SECRET OF CSS

Create Live Activities With ActivityKit on iOS 16 Beta | by Batikan Sosun | Aug, 2022


Get real-time updates on your lock screen

API support iOS 16.0+ BetaiPadOS 16.0+ BetaMac Catalyst 16.0+ Beta

If you are a strict developer who’s been following Apple’s innovation, you must have heard about the “Displaying live data on the Lock Screen with Live Activities” recently.

Apple announced it a few weeks ago, and then I heard the news about it.

Apple provides it with a new framework called ActivityKit. With the ActivityKit, you can share live updates from your app as Live Activities on the iPhone Lock Screen.

Live Activities use WidgetKit functionality and SwiftUI for their user interface on the Lock Screen.

ActivityKit’s role is to handle the life cycle of each Live Activity: You use its API to request, update, and end a Live Activity. — Apple

Let’s imagine a sports app. This app user might want to track the soccer matches goals and other statistics: passes, shots, etc., on the iPhone Lock Screen.

Another example could be a food delivery app. You know that pizza consumers might be impatient users. Without opening the app, app users can follow the pizza courier on the iPhone lock screen. Another one could be a groceries app.

That’s enough for the examples. OK, let’s get the Live Activities coding started.

0*NeAsTSkg2EB9P4G1
Photo by William Hook on Unsplash

We have to create a Widget to configure ActivityKit. It’s similar to Widget Extensions.

We will use SwiftUI and WidgetKit to create the user interface of the Live Activity. Live Activities works like Widget Extension and enables code sharing between your widgets and Live Activities.

However, Live Activities use a different mechanism to receive updates compared to widgets.

Instead of using a timeline mechanism, Live Activities receive updated data from your app with ActivityKit or by receiving remote push notifications. — Apple

Live Activities are only available on iPhone.

Live Activities and ActivityKit won’t be included in the initial publicly released version of iOS 16 but will be publicly available in an update later this year. Once they’re publicly available, you can submit your apps with Live Activities to the App Store.

I am going to create a delivery app for groceries. And then, I am going to create an ActivityKit Widget for Live Activities of the delivery progress.

If you already offer widgets in your app, you can add user interface code for the Live Activity to your existing widget extension and may be able to reuse code between your widgets and Live Activities.

Don’t forget that, although Live Activities leverage WidgetKit’s functionality, they aren’t widgets. Live Activities are not using a timeline mechanism to provide the user interface.

0*vdgMELKl6dbtw rL
Photo by Yura Fresh on Unsplash

I will allow users to start Live Activities through a button for tracking delivery progress on the lock screen.

  • Follow the navigation to create a single app with SwiftUI, and then name it GroceryDeliveryApp.

Xcode -> File -> New -> Project -> App

  • Add the following key to your app’s info.plist and set to YES.

NSSupportsLiveActivities

This key will support the app for Live Activities.

  • After configuring the app, we have to create a Widget Extension.

Follow the navigation to create a Widget Extension, and then name it DeliveryTrackWidget.

Project Navigator -> Select the project -> Add a target from target list -> Widget Extension

  • Add the following key to the extension info.plist and set it to YES.

NSSupportsLiveActivities

This key will support the extension for Live Activities.

Once you have created your app and your Widget Extension, you can design it as you wish.

1* uqO8gezGynnRpo

First of all, we need to create an ActivityAttributes. We use ActivityAttributes to identify a Live Activity. And, then we use ContentState to specify the dynamic content. I created an ActivityAttributes struct with the following code:

And then, we need to create a Live Activity request with the Activity class. The Activity class takes a generic type for the ActivityAttributes struct.
Note that if you want to update or end this activity, you must pass the pushType value here.

The pushType token value represents updating your activity on a particular iOS device through Apple Push Service (APS) system. Your application will receive a push token following the activity request to set up the APS protocol, and then you’ll be able to send activity update payloads through APS.

Note that the updated dynamic data for both ActivityKit updates and remote push notification updates can not exceed 4KB in size.

I created an ActivityAttributes struct with the following code:

Make sure Live Activities are available. Do not forget that users can choose to deactivate Live Activities for an app in the Settings app on iPhone.

If you want to detect that Live Activities are available and the user allowed your app to use Live Activities, you can do this with areActivitiesEnabled and activityEnablementUpdates.

Furthermore, to observe the state of an ongoing Live Activity, you can use activityStateUpdates.

Once you create a Live Activity, you can update or end it through ContentState.

I updated and ended a Live Activity with the following code:

You can use .after(_ date: Date) instead of .immediate to end a Live Activity later.

Every activity has a pushTokenUpdates to update its content by remote push notification. You can use pushToken data to update the content of a Live Activity. In this case, your app must be registered with APNS for remote push notifications. If you’re new to remote push notifications, read the documentation for the User Notifications framework.

The remote push notification payload should match your dynamic data attributes part. An example push notification payload should look like the JSON below:

A Live Activity can be active for up to eight hours unless your app or the user explicitly ends it. After this limit, the system automatically ends a Live Activity if the user or your app hasn’t ended it. In this end state, the Live Activity remains on the Lock Screen for up to four additional hours before the system removes it. The user can also choose to remove it.

As a result, a Live Activity remains on the Lock Screen for twelve hours maximum.

When we update a Live Activity, ActivityConfiguration returns ActivityAttributes to update the Widget user interface. ActivityConfiguration provides a context to access dynamic data(ContentState) and static data of the ActivityAttributes.

I created the user interface of the Live Activity with the code below:

Reference: Apple Documentation

Note that the system may truncate a Live Activity if its height exceeds 160 points.

Here is a link to the entire code on Github.

Thanks for reading.

Want to Connect?Let’s connect on Twitter @batikansosun.





News Credit

%d bloggers like this: