Live Activities in iOS 16.1 and later in SwiftUI

Live Activities in iOS 16.1 and later in SwiftUI

Start, update, and end live activities

With each new iteration of iOS, Apple introduces exciting features to enrich the user experience. One such feature that has gained popularity is the Live Activity Widget. This powerful widget allows users to have real-time information and updates from their favorite apps directly on their home screen. In this blog post, we will explore the Live Activity Widget in iOS, its functionalities, customization options, and how it enhances user engagement by providing dynamic content at a glance.

Requirements: Xcode 14.1 or higher, iOS 16.1 or higher

Live Activities are only available on iPhone

Live Activities help people keep track of tasks and events they care about, offering persistent locations for displaying information that updates frequently. For example, a food delivery app could display the time remaining until a food order arrives, or a sports app could display the score for an ongoing game.

In addition to displaying a Live Activity on the Lock Screen, devices that support Live Activities can display your app information in different ways, depending on whether the device supports Dynamic Island.

• On devices that support Dynamic Island, the system displays Live Activities in a persistent location around the TrueDepth camera.

• On devices that don’t support Dynamic Island, the system can display a Live Activity update in a banner that appears briefly at the top of the screen.

How to Enable from Your iPhone

Enable Live Activities

As per the above image we have to enable it from the Settings app. Go to Settings -> Face ID & Passcode -> Live Activities and on the switch. By default, it will be Off.

Let’s get started to set up in Xcode:

Create an iOS single-view app project from Xcode and give related names. And add a Widget Extension from File -> New -> Target -> iOS -> Widget Extension please refer below image.

Widget Extension

Now your target has been added to your project, add the following key to your project's main Info.plist — this is an important step:

After adding the live activity widget extension we will see a file structure like the below image.

Activity Widget

Now we are going to create an Attribute class where we can hold the value of the Activity class.

The PizzaDeliveryAttributes struct has a nested struct called ContentState, which conforms to the Codable and Hashable protocols. It has two properties: driverName of type String, representing the name of the delivery driver, and estimatedDeliveryTime of type ClosedRange<Date>, representing the range of possible delivery times.

The PizzaDeliveryAttributes struct itself has two properties: numberOfPizzas of type Int, representing the number of pizzas in the delivery, and totalAmount of type String, representing the total cost of the delivery.

The PizzaAdAttributes struct also has a nested struct called ContentState, which conforms to the Codable and Hashable protocols. It has two properties: adName of type String, representing the name of the pizza advertisement, and showTime of type Date, representing the time at which the advertisement is shown.

The PizzaAdAttributes struct itself has one property: discount of type String, representing the discount offered in the advertisement.

Both structs can be used as attributes for activities in an application, allowing you to attach additional information to those activities.

Dynamic Island

On iPhone 14 Pro and iPhone 14 Pro Max, you can check alerts and current activity in progress — such as music playing, your timer, an AirDrop connection, and directions from Maps — in Dynamic Island on the Home Screen or in any app. The Dynamic Island appears whenever your iPhone is unlocked. — Apple Support

Explanation of the Dynamic Island

Expanded view in the Dynamic Island

Leading and trailing expanded view below TrueDepth camera

Steps

1. Refer to the modes mentioned above, you can create different looks inside dynamicIsland based on user behaviors, e.g., when the users tap the island, the info will popup: DynamicIslandExpandedRegion(.leading), DynamicIslandExpandedRegion(.trailing), DynamicIslandExpandedRegion(.center), and DynamicIslandExpandedRegion(.bottom)

Also, compact mode and minimal will work when users just need to view the live data on top without interacting: compactLeading, compactTrailing, minimal

Just replace the above code in ActivityWidgetLiveActivity class.

Life cycle of Live Activity:

• Start

• Update

• End

• The Activity object offers functionality to start, update, and end a Live Activity from within your app. You can update or end a Live Activity while your app is in the background, but you can only start a Live Activity while the app is in the foreground.

• Additionally, Activity offers functionality to observe changes to:

• The Live Activity

• The Live Activity’s state in its life cycle

• The user’s permission to start Live Activities

• The Live Activity’s push token if you configure it to receive updates through remote push notifications.

Start Activity:

To start activity use the below function.

Update Activity:

To update activity use below function.

End Activity:

To end activity use the below function.

When we start the Activity it will show up in your notification tray like push notification messages.

Result

Here we have one more benefit that this notification will display even after your phone is locked. As this is a special type of configuration provided by Apple.

Conclusion: 

The Food Ordering, Weather & Sports Live Activity Widget exemplifies how dynamic widgets enhance user engagement on iOS. By offering real-time updates, personalized experiences, and convenient access to food order, weather & Sports information, the widget empowers users to stay informed and plan their activities accordingly. With its interactive elements and customization options, the Live Activity Widget enriches the user experience and demonstrates the power of Live Activity Widgets in iOS.