iOS16新特性：实时活动-在锁屏界面实时更新APP消息 | 京东云技术团队

原创

于 2023-09-18 14:29:54 发布 · 1.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#京东云 #服务器 #数据库 #IOS16 #实时活动 #APP消息

本文详细介绍了iOS16中LiveActivity的锁屏实时活动样式适配流程，包括限制条件、UI开发、数据同步和使用推送通知更新实时活动的实战步骤，以及遇到的开发问题和解决方案。

简介

之前在《iOS16新特性:灵动岛适配开发与到家业务场景结合的探索实践》里介绍了iOS16新的特性：实时更新（Live Activity）中灵动岛的适配流程，但其实除了灵动岛的展示样式，Live Activity还有一种非常实用的应用场景，那就是锁屏界面实时状态更新：

上图是部分已经做出适配的APP，锁屏实时活动的展示。可以看到，相比于灵动岛的样式，锁屏更新的展示区域更大，能够显示更多信息，并且是在锁屏界面上进行展示，结合苹果在iPhone14之后推出的“全天候显示”功能，能够让用户在不解锁手机，甚至不拿起手机的情况下就能够获取到APP内最新的消息更新，在某些应用场景下非常实用。

这篇文章主要就介绍Live Activity中锁屏实时活动样式的适配流程，再结合实际开发过程中的遇到的问题进行实际详解：

限制条件

在进行开发之前，需要先了解一下锁屏实时活动的一些限制条件：

1.实时活动显示在通知区域且有更自由的视图定制和刷新方法，但是跟Widget小组件一样，它也限制了视图上的动画开发，所有的动画效果仅能由系统处理。

2.锁屏通知区域内的实时活动在8小时之内可以刷新数据展示，超过8小时不再支持刷新，，超过12小时强制消失

3.实时活动视图本体不支持发起网络请求，所有的动态数据都要经由通知下发，或者后台活动数据刷新，且每次更新的数据不能超过4KB。

4.实时活动可以通过推送下发更新数据，但是推送的类型不同于传统“基于证书”的推送，而是“基于token”的推送类型。

实际开发

1.建立锁屏实时活动扩展项目

这部分建立的过程与灵动岛的适配流程完全一致，请参见 iOS16新特性:灵动岛适配开发与到家业务场景结合的探索实践中相关的流程描述，如果之前建立过灵动岛项目，则可以直接开始开发：

2.UI开发

Live Activity的全部样式开发均完全采用SwiftUI，锁屏实时活动也不例外，以下是我开发的UI部分代码，大家可以一参考一下：

struct LockScreenLiveActivityView: View {
    let context: ActivityViewContext<DJDynamicIslandAttributes>
    
    var body: some View {
        VStack {
            Spacer(minLength: 10)
            LockScreenLiveActivityStoreHeaderView(imageURL: context.state.logo, title: context.state.title, subTitle: context.state.subTitle)
            Spacer(minLength: 0)
            LockScreenLiveActivityProgressView(progress: context.state.progress)
            Spacer(minLength: 10)
        }
    }
}

struct LockScreenLiveActivityStoreHeaderView: View {
    let imageURL: String
    let title: String
    let subTitle: String
    
    var body: some View {
        HStack(spacing: 10) {
            NetworkImage(imageUrl: imageURL)
                .frame(width: 50, height: 50)
            
            VStack(alignment: .leading, spacing: 4) {
                HStack {
                    Text(title)
                        .font(.system(size: 16, weight: .bold))
                        .foregroundColor(Color(hex: 0x333333, alpha: 1))
                }
                
                Text(subTitle)