Bringing Live Activities to Apple Watch in watchOS 11: A Developer’s Guide

 

With the release of iOS 18 and watchOS 11, Apple has introduced exciting improvements that enhance the Live Activity experience on Apple Watch. This update allows your existing iOS Live Activities to automatically appear in the Smart Stack on Apple Watch, offering users a seamless way to stay updated directly from their wrist.

In this guide, we’ll explore:

• How your iOS Live Activity integrates with watchOS 11.
• Customizing your Live Activity view for the Smart Stack.
• Ensuring your Live Activity stays updated and visible with minimal effort.

1. How Live Activities Appear on Apple Watch

When iPhone users leave the Lock Screen, Live Activities shift to the Dynamic Island’s compact views. Similarly, on Apple Watch, these compact views automatically appear in the Smart Stack. This allows your app’s critical information to be easily accessible.

For instance, if you have a delivery tracking app, the estimated delivery time can appear in the leading view, while the current order status is shown in the trailing view. These updates sync automatically between iOS and watchOS without requiring additional code.

2. Customizing Live Activity for Apple Watch

To tailor your Live Activity for Apple Watch, Apple introduced the .supplementalActivityFamilies modifier. This modifier ensures that your Lock Screen view is adapted for the Smart Stack.

Here’s how to customize your view:

struct DeliveryLiveActivity: Widget {
    var body: some WidgetConfiguration {
        ActivityConfiguration(
            for: DeliveryActivityAttributes.self
        ) { context in
            DeliveryActivityContent(context: context)
        } dynamicIsland: { context in
            DynamicIsland {
                DynamicIslandExpandedRegion(.leading) {
                    DeliveryExpandedLeadingView(context: context)
                }
                DynamicIslandExpandedRegion(.trailing) {
                    DeliveryExpandedTrailingView(context: context)
                }
                DynamicIslandExpandedRegion(.bottom) {
                    DeliveryExpandedBottomView(context: context)
                }
            } compactLeading: {
                DeliveryCompactLeading(context: context)
            } compactTrailing: {
                DeliveryCompactTrailing(context: context)
            } minimal: {
                DeliveryMinimal(context: context)
            }
        }
        .supplementalActivityFamilies([.small])
    }
}

3. Previewing Customized Layouts

Xcode’s Preview tool helps you visualize how your Live Activity will appear in the Smart Stack. You can adjust the Canvas Device Settings to focus on Smart Stack-specific content.

#Preview("Content", as: .content, using: DeliveryActivityAttributes.preview) {
    DeliveryLiveActivity()
} contentStates: {
    DeliveryActivityAttributes.ContentState.packedOrder
    DeliveryActivityAttributes.ContentState.shippedOrder
}

4. Ensuring Up-to-Date Information

Apple Watch synchronizes Live Activity updates automatically, ensuring your content stays fresh. However, to conserve battery, these updates are budgeted similarly to iOS.

If connectivity is limited, updates may experience delays. Key updates such as Start, End, and alerting notifications are prioritized to ensure users remain informed.

5. Adapting for Always On Display

In Always On Display mode, Apple Watch reduces brightness and switches to a dark color scheme. Use the .isLuminanceReduced environment value to adjust your UI accordingly:

struct DeliveryGauge: View {
    @Environment(\.isLuminanceReduced) private var isLuminanceReduced
    var context: ActivityViewContext<DeliveryActivityAttributes>

var body: some View {
        Gauge(value: context.state.progressPercent) {
            GaugeLabel(context: context)
        }
        .tint(isLuminanceReduced ? .gaugeDim : .gauge)
    }
}

For a consistent look, apply .preferredColorScheme(.light) for light-mode content that automatically switches to dark mode for Always On Display.

struct DeliveryActivityContent: View {
    @Environment(\.activityFamily) var activityFamily
    var context: ActivityViewContext<DeliveryActivityAttributes>

var body: some View {
        switch activityFamily {
        case .small:
            DeliverySmallContent(context: context)
                .preferredColorScheme(.light)
        case .medium:
            DeliveryMediumContent(context: context)
        @unknown default:
            DeliveryMediumContent(context: context)
        }
    }
}

Final Thoughts

With watchOS 11, Apple has made it easier than ever to extend your iOS Live Activity experience to Apple Watch. By customizing your content for the Smart Stack, ensuring updates are timely, and adapting your design for Always On Display, you can provide a rich, engaging experience that keeps users informed right from their wrist.

For a deeper dive into design strategies, check out Apple’s video titled “Design Live Activities for Apple Watch.”

Now’s the perfect time to enhance your app’s presence on Apple Watch — happy coding!