旅行アプリにおけるLive Activitiesを用いたフライト追跡

🍎 iOSDC Japan 2023 Day2 11:00~ Track A
https://fortee.jp/iosdc-japan-2023/proposal/ec9c142d-76ca-4846-937f-3469571349a1

Transcript

1. 
   
   LiveActivities
   @y
   0
   shikei_
   iOSDC Japan
   20
   2 3
   Day
   2 1 1
   :
   0 0
   ~ Track A
   

   View Slide

2. © 2023 Reiwa Travel, Inc.
   2
   | Keisuke Yoshida
   
   
   @y
   0
   shikei_
   🏢
   
   
   
   NEWT App Unit
   
   
   🧑💻
   
   
   / iOS
   
   
   
   
   
   NEWT
   
   
   NEWT iOS ...
   

   View Slide

3. AGENDA
   © 2023 Reiwa Travel, Inc.
   3
   1
   .Live Activities
   
   
   2
   .
   
   
   3
   .
   

   View Slide

4. © 2023 Reiwa Travel, Inc.
   1
   . Live Activities
   
   
   
   

   View Slide

5. © 2023 Reiwa Travel, Inc.
   1
   . Live Activities
   
   
   
   

   View Slide

6. © 2023 Reiwa Travel, Inc.
   1
   . Live Activities |
   6
   Dynamic Island
   
   
   
   

   View Slide

7. © 2023 Reiwa Travel, Inc.
   1
   . Live Activities |
   7
   iOS
   16
   .
   1
   ActivityKit Framework
   https://developer.apple.com/documentation/activitykit
   

   View Slide

8. © 2023 Reiwa Travel, Inc.
   1
   . Live Activities
   
   
   
   

   View Slide

9. © 2023 Reiwa Travel, Inc.
   1
   . Live Activities |
   9
   Widget
   🔐
   Screen dimensions Lock Screen
   430x932 408x84-160
   393x852 371x84-160
   っ
   160pt View
   https://developer.apple.com/design/human-interface-guidelines/live-activities#iOS-Live-Activity-dimensions
   

   View Slide

10. © 2023 Reiwa Travel, Inc.
    Expanded Dynamic Island
    1
    . Live Activities |
    10
    Dynamic Island
    🏝
    Screen dimensions Expanded
    430x932 408x84-160
    393x852 371x84-160
    っ
    
    
    View
    https://developer.apple.com/design/human-interface-guidelines/live-activities#iOS-Live-Activity-dimensions
    

    View Slide

11. © 2023 Reiwa Travel, Inc.
    Compact Live Activity 1
    Dynamic Island
    🏝
    1
    . Live Activities |
    11
    Screen dimensions Compact leading Compact trailing
    430x932 62.33x36.67 62.33x36.67
    393x852 52.33x36.67 52.33x36.67
    っ
    Dynamic Island 2 View
    https://developer.apple.com/design/human-interface-guidelines/live-activities#iOS-Live-Activity-dimensions
    

    View Slide

12. © 2023 Reiwa Travel, Inc.
    Minimal Live Activity
    Dynamic Island
    🏝
    1
    . Live Activities |
    12
    Screen dimensions Expanded
    430x932 408x84-160
    393x852 371x84-160
    っ
    Activity detached ( )
    
    
    Activity attached ( )
    https://developer.apple.com/design/human-interface-guidelines/live-activities#iOS-Live-Activity-dimensions
    

    View Slide

13. © 2023 Reiwa Travel, Inc.
    1
    . Live Activities
    
    
    
    

    View Slide

14. © 2023 Reiwa Travel, Inc.
    1
    . Live Activities |
    Push
    
    
    Activity
    14
    https://developer.apple.com/documentation/activitykit/activity/request(attributes:content:pushtype:)#discussion
    Live Activity
    🚀
    Activity
    

    View Slide

15. © 2023 Reiwa Travel, Inc.
    1
    . Live Activities |
    15
    https://developer.apple.com/documentation/activitykit/activity/update(_:)
    Live Activity
    ♻
    1
    . App API
    
    
    2
    . BackgroundTasks ( )
    
    
    3. Push Backend
    App Push
    

    View Slide

16. © 2023 Reiwa Travel, Inc.
    1
    . Live Activities |
    16
    https://developer.apple.com/documentation/activitykit/updating-and-ending-your-live-activity-with-activitykit-push-notifications#Overview
    Push
    🔔
    Push
    
    
    Push Token Push Server
    
    
    
    
    Push
    
    
    Payload (
    4
    KB )
    Push Token Push Server
    

    View Slide

17. © 2023 Reiwa Travel, Inc.
    1
    . Live Activities |
    17
    📱
    1 5
    
    
    5 (6 )
    
    
    2 Push
    
    
    Dynamic Island
    
    
    1 ( 築 )
    

    View Slide

18. © 2023 Reiwa Travel, Inc.
    1
    . Live Activities |
    18
    📱
    LiveActivity 8
    8
    
    
    4
    
    
    Dynamic Island
    

    View Slide

19. © 2023 Reiwa Travel, Inc.
    1
    . Live Activities |
    19
    https://developer.apple.com/documentation/activitykit/displaying-live-data-with-live-activities
    OS API
    ⛔
    iOS
    16
    .
    2
    iOS
    16
    .
    1
    
    iOS
    16
    .
    2
    API
    
    
    頻 Deprecated
    

    View Slide

20. © 2023 Reiwa Travel, Inc.
    2.
    
    
    Live Activity
    
    
    Live Activity
    

    View Slide

21. © 2023 Reiwa Travel, Inc.
    2.
    
    
    Live Activity
    
    
    Live Activity
    

    View Slide

22. © 2023 Reiwa Travel, Inc.
    2. |
    22
    Widget Extension
    📦
    File > New > Target
    
    
    Widget Extension
    Live Activity
    

    View Slide

23. © 2023 Reiwa Travel, Inc.
    2. |
    23
    Widget Extension
    📦
    Widget Extension
    Live Activity
    

    View Slide

24. © 2023 Reiwa Travel, Inc.
    2. |
    24
    Widget Extension
    📦
    Include Live Activity
    Widget WidgetBundle
    
    
    LiveActivity
    Live Activity
    

    View Slide

25. © 2023 Reiwa Travel, Inc.
    2. |
    25
    Widget Extension
    📦
    LiveActivity 🎉
    Live Activity
    

    View Slide

26. © 2023 Reiwa Travel, Inc.
    2. |
    26
    Live Activity
    ✅
    [ ] NSSupportsLiveActivities YES
    [ ]
    
    
    NSSupportsLiveActivitiesFrequentUpdates YES (iOS
    16
    .
    2
    +)
    App info.plist
    

    View Slide

27. © 2023 Reiwa Travel, Inc.
    2. |
    27
    Widget
    🎯
    ActivityAttributes
    

    View Slide

28. © 2023 Reiwa Travel, Inc.
    2. |
    28
    Widget
    🎯
    ActivityAttributes
    

    View Slide

29. © 2023 Reiwa Travel, Inc.
    2. |
    29
    Widget
    🎯
    ActivityAttributes
    ContentState
    

    View Slide

30. © 2023 Reiwa Travel, Inc.
    2. |
    30
    Widget
    🎯
    ActivityAttributes
    ⚠ ActivityAttributes
    
    
    App
    
    
    Target Membership App
    

    View Slide

31. © 2023 Reiwa Travel, Inc.
    2.
    
    
    Live Activity
    
    
    Live Activity
    

    View Slide

32. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    32
    Live Activity
    🎨
    View Widget
    

    View Slide

33. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    33
    Live Activity
    🎨
    View Widget
    ActivityViewContext
    
    
    View
    

    View Slide

34. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    34
    Live Activity
    🎨
    View Widget
    LiveActivityView
    Attributes
    Attributes context View
    
    
    context.state
    
    
    context.attributes
    

    View Slide

35. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    35
    Live Activity
    🎨
    View Widget
    Dynamic Island
    
    
    ActivityViewContext
    

    View Slide

36. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    36
    Live Activity
    🎨
    View Widget
    Dynamic Island
    

    View Slide

37. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    37
    Live Activity
    🎨
    View Widget
    Expanded View View
    
    
    DynamicIslandExpandedRegion
    

    View Slide

38. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    38
    Live Activity
    🎨
    View Widget
    Compact / Minimal
    
    
    View
    compactLeading Leading View
    
    
    compactTrailing Trailing View
    
    
    minimal Minimal View
    

    View Slide

39. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    39
    Live Activity
    🎨
    View Widget
    Dynamic Island URL
    
    
    (DeepLink)
    https://developer.apple.com/documentation/WidgetKit/DynamicIsland/widgetURL(_:)
    

    View Slide

40. © 2023 Reiwa Travel, Inc.
    2.
    
    
    Live Activity
    
    
    Live Activity
    

    View Slide

41. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    41
    Live Activity request/update/end
    🎮
    Live Activity 3
    https://developer.apple.com/documentation/activitykit/activity/update(_:alertconfiguration:)
    https://developer.apple.com/documentation/activitykit/activity/request(attributes:content:pushtype:)
    https://developer.apple.com/documentation/activitykit/activity/end(_:dismissalpolicy:)
    

    View Slide

42. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    42
    Live Activity request
    🚀
    Live Activity
    

    View Slide

43. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    43
    Live Activity request
    🚀
    Live Activity
    LiveActivity
    Live Activity
    
    
    
    
    

    View Slide

44. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    44
    Live Activity request
    🚀
    Live Activity
    request
    
    
    LiveActivity
    
    
    

    View Slide

45. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    45
    Live Activity request
    🚀
    Live Activity
    request
    っ attributes: Attributes
    
    
    ActivityAttributes
    
    
    

    View Slide

46. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    46
    Live Activity request
    🚀
    Live Activity
    request
    っ state: State
    
    
    ActivityAttributes.ContentState
    
    
    
    
    っ staleDate: Date?
    
    
    Activity
    築
    
    
    っ relevanceScore: Double (=
    0
    .
    0
    )
    
    
    Activity
    
    
    ( ) 築
    

    View Slide

47. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    47
    Live Activity request
    🚀
    Live Activity
    request
    っ pushType: PushType? (= nil)
    
    
    Push
    
    
    
    
    
    Push
    
    
    .token
    

    View Slide

48. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    48
    Live Activity update
    ♻
    Live Activity
    

    View Slide

49. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    49
    Live Activity update
    ♻
    Live Activity
    
    
    LiveActivity
    update
    

    View Slide

50. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    50
    Live Activity update
    ♻
    Live Activity
    っ ActivityContent
    
    
    .ContentState>
    
    
    request
    
    
    state: State
    
    
    staleDate: Date?
    
    
    relevanceScore: Double
    
    
    Activity
    update
    

    View Slide

51. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    51
    Live Activity update
    ♻
    Live Activity
    っ alertConfiguration:
    
    
    AlertConfiguration? (= nil)
    
    
    Live Activity
    
    
    update
    

    View Slide

52. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    52
    Live Activity end
    🚫
    Live Activity
    

    View Slide

53. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    53
    Live Activity end
    🚫
    Live Activity
    end
    
    
    
    
    LiveActivity
    

    View Slide

54. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    54
    Live Activity end
    🚫
    Live Activity
    end
    っ ActivityContent
    
    
    
    
    
    state: State
    
    
    staleDate: Date?
    
    
    relevanceScore: Double
    
    
    

    View Slide

55. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    55
    Live Activity end
    🚫
    Live Activity
    end
    っ dismissalPolicy:
    
    
    ActivityUIDismissalPolicy (= .default)
    
    
    Live Activity
    
    
    
    
    
    default: (4 )
    
    
    immediate:
    
    
    after(Date): ( 4 )
    

    View Slide

56. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    56
    Push Live Activity
    📨
    Live Activity request pushToken
    request
    
    
    pushToken
    
    
    push server
    request
    

    View Slide

57. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    57
    Push Live Activity
    📨
    Live Activity request pushToken
    pushToken JSON payload
    
    
    events:
    
    
    "update" / "end"
    
    
    content-state:
    
    
    Activity.ContentState
    https://developer.apple.com/documentation/activitykit/updating-and-ending-your-live-activity-with-activitykit-push-notifications#Construct-the-ActivityKit-push-notification-payload
    

    View Slide

58. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    58
    Push Live Activity
    📨
    Live Activity request pushToken
    
    
    apns-push-type: liveactivity
    
    
    apns-topic: .push-type.liveactivity
    
    
    authorization: bearer $AUTHENTICATION_TOKEN
    
    
    APNs
    
    
    https://developer.apple.com/documentation
    
    
    /usernotifications/setting_up_a_remote_notification_server/sending_notification_requests_to_apns
    https://developer.apple.com/documentation/activitykit/updating-and-ending-your-live-activity-with-activitykit-push-notifications#Construct-the-ActivityKit-push-notification-payload
    

    View Slide

59. © 2023 Reiwa Travel, Inc.
    3.
    
    
    
    Braze SDK
    
    
    

    View Slide

60. © 2023 Reiwa Travel, Inc.
    
    
    ...
    

    View Slide

61. © 2023 Reiwa Travel, Inc.
    61
    

    View Slide

62. © 2023 Reiwa Travel, Inc.
    62
    Mission
    

    View Slide

63. © 2023 Reiwa Travel, Inc.
    63
    2022 4
    
    
    🔥
    

    View Slide

64. © 2023 Reiwa Travel, Inc.
    64
    UX
    

    View Slide

65. © 2023 Reiwa Travel, Inc.
    65
    

    View Slide

66. © 2023 Reiwa Travel, Inc.
    Live Activity
    
    
    ...
    

    View Slide

67. © 2023 Reiwa Travel, Inc.
    3.
    
    
    
    Braze SDK
    
    
    

    View Slide

68. © 2023 Reiwa Travel, Inc.
    3. |
    68
    
    
    
    
    ✈
    

    View Slide

69. © 2023 Reiwa Travel, Inc.
    3.
    
    
    
    Braze SDK
    
    
    

    View Slide

70. © 2023 Reiwa Travel, Inc.
    3. |
    70
    FlightAware AeroAPI
    
    
    

    View Slide

71. © 2023 Reiwa Travel, Inc.
    3. |
    71
    AeroAPI NEWT Backend Cloud Messaging NEWT App
    🔰
    Push FCM ...
    PushToken
    
    
    Push
    

    View Slide

72. © 2023 Reiwa Travel, Inc.
    3. |
    72
    AeroAPI NEWT Backend Cloud Messaging NEWT App
    🔰
    Push FCM ...
    🙅
    PushToken
    
    
    Push
    

    View Slide

73. © 2023 Reiwa Travel, Inc.
    1
    . Live Activities |
    73
    https://github.com/firebase/firebase-ios-sdk/issues/10047
    FCM LiveActivity
    🙅
    Issue ...(2023 9 )
    

    View Slide

74. © 2023 Reiwa Travel, Inc.
    3. |
    74
    Customer Engagement Platform
    
    
    Braze SDK
    https://www.braze.com/docs/developer_guide/platform_integration_guides/swift/live_activities/live_activities/#example
    

    View Slide

75. © 2023 Reiwa Travel, Inc.
    3. |
    75
    AeroAPI NEWT Backend Braze SDK NEWT App
    💫
    Braze
    PushToken
    
    
    Push
    

    View Slide

76. © 2023 Reiwa Travel, Inc.
    3.
    
    
    
    Braze SDK
    
    
    

    View Slide

77. © 2023 Reiwa Travel, Inc.
    っ pushTokenTag: String
    
    
    Tag
    
    
    Tag
    
    
    (Backend )
    3. | Braze SDK
    77
    request
    Braze SDK
    📦
    Live Activity request launchActivity
    

    View Slide

78. © 2023 Reiwa Travel, Inc.
    3. | Braze SDK
    78
    
    
    Braze Live Activity
    
    
    application(_: didFinishLaunchingWithOptions:)
    Braze SDK
    📦
    resumeActivities
    OK👌
    

    View Slide

79. © 2023 Reiwa Travel, Inc.
    Braze Live Activity
    ♻
    Backend POST API /message/live_activity/update
    3. | Braze SDK
    79
    https://www.braze.com/docs/api/endpoints/messaging/live_activity/update/
    

    View Slide

80. © 2023 Reiwa Travel, Inc.
    Braze Live Activity
    ♻
    Backend POST API /message/live_activity/update
    3. | Braze SDK
    80
    Example request
    

    View Slide

81. © 2023 Reiwa Travel, Inc.
    Braze Live Activity
    ♻
    Backend POST API /message/live_activity/update
    3. | Braze SDK
    81
    Example request
    っ app_id: String
    
    
    
    Braze
    
    
    っ activity_id: String
    
    
    
    
    launchActivity
    
    
    pushTokenTag
    

    View Slide

82. © 2023 Reiwa Travel, Inc.
    Braze Live Activity
    ♻
    Backend POST API /message/live_activity/update
    3. | Braze SDK
    82
    Example request
    っ content_state: Object
    
    
    
    
    ContentState
    
    
    
    ⚠
    
    
    
    

    View Slide

83. © 2023 Reiwa Travel, Inc.
    Braze Live Activity
    ♻
    Backend POST API /message/live_activity/update
    3. | Braze SDK
    83
    Example request
    っ end_activity: Boolean
    
    
    true
    
    
    Live Activity
    
    
    (Optional)
    

    View Slide

84. © 2023 Reiwa Travel, Inc.
    Braze Live Activity
    ♻
    Backend POST API /message/live_activity/update
    3. | Braze SDK
    84
    Example request
    っ dismissal_date: Datetime
    
    
    Live Activity UI
    築
    
    
    (Optional)
    
    
    っ stale_date: Datetime
    
    
    Activity
    
    
    築
    
    
    
    
    (Optional)
    

    View Slide

85. © 2023 Reiwa Travel, Inc.
    Braze Live Activity
    ♻
    Backend POST API /message/live_activity/update
    3. | Braze SDK
    85
    Example request
    っ notification: Object
    
    
    Live Activity
    
    
    
    

    View Slide

86. © 2023 Reiwa Travel, Inc.
    ⚠
    Push Notification Settings
    Debug
    
    
    
    
    
    
    Push
    3. | Braze SDK
    86
    

    View Slide

87. © 2023 Reiwa Travel, Inc.
    ⚠
    築
    
    
    content_state
    
    
    UnixTime
    
    
    dismissal_date / stale_date
    
    
    ISO-
    8 60
    1
    string
    
    
    content_state Apple
    
    
    Braze
    3. | Braze SDK
    87
    

    View Slide

88. © 2023 Reiwa Travel, Inc.
    3.
    
    
    
    Braze SDK
    
    
    

    View Slide

89. © 2023 Reiwa Travel, Inc.
    3. |
    89
    
    
    Live Activity 🎉
    

    View Slide

90. © 2023 Reiwa Travel, Inc.
    Appendix. | (PDF )
    90
    

    View Slide

91. © 2023 Reiwa Travel, Inc.
    

    View Slide

92. © 2023 Reiwa Travel, Inc.
    92
    
    
    
    1
    . Live Activities
    
    
    Live Activity
    
    
    Live Activity
    2.
    
    
    
    Braze SDK
    
    
    3.
    

    View Slide

93. © 2023 Reiwa Travel, Inc.
    / NEWT
    
    
    iOS
    
    
    🔥
    https://www.reiwatravel.co.jp/recruit
    

    View Slide

94. © 2023 Reiwa Travel, Inc.
    https://potatotips.connpass.com/event/294378/
    

    View Slide