Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

yoshikei
September 03, 2023

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

yoshikei

September 03, 2023
Tweet

More Decks by yoshikei

Other Decks in Programming

Transcript



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

    View full-size slide

  2. © 2023 Reiwa Travel, Inc.
    2
    | Keisuke Yoshida


    @y
    0
    shikei_
    🏢



    NEWT App Unit


    🧑💻


    / iOS





    NEWT


    NEWT iOS ...

    View full-size slide

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


    2
    .


    3
    .

    View full-size slide

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



    View full-size slide

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



    View full-size slide

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



    View full-size slide

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

    View full-size slide

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



    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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



    View full-size 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 full-size 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 full-size 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 full-size slide

  17. © 2023 Reiwa Travel, Inc.
    1
    . Live Activities |
    17
    📱
    1 5


    5 (6 )


    2 Push


    Dynamic Island


    1 ( 築 )

    View full-size slide

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


    4


    Dynamic Island

    View full-size 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 full-size slide

  20. © 2023 Reiwa Travel, Inc.
    2.


    Live Activity


    Live Activity

    View full-size slide

  21. © 2023 Reiwa Travel, Inc.
    2.


    Live Activity


    Live Activity

    View full-size slide

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


    Widget Extension
    Live Activity

    View full-size slide

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

    View full-size slide

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


    LiveActivity
    Live Activity

    View full-size slide

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

    View full-size slide

  26. © 2023 Reiwa Travel, Inc.
    2. |
    26
    Live Activity

    [ ] NSSupportsLiveActivities YES
    [ ]


    NSSupportsLiveActivitiesFrequentUpdates YES (iOS
    16
    .
    2
    +)
    App info.plist

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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


    App


    Target Membership App

    View full-size slide

  31. © 2023 Reiwa Travel, Inc.
    2.


    Live Activity


    Live Activity

    View full-size slide

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

    View full-size slide

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


    View

    View full-size slide

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


    context.state


    context.attributes

    View full-size slide

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


    ActivityViewContext

    View full-size slide

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

    View full-size slide

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


    DynamicIslandExpandedRegion

    View full-size 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 full-size 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 full-size slide

  40. © 2023 Reiwa Travel, Inc.
    2.


    Live Activity


    Live Activity

    View full-size 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 full-size slide

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

    View full-size slide

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




    View full-size slide

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


    LiveActivity


    View full-size slide

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


    ActivityAttributes


    View full-size 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 full-size slide

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


    Push





    Push


    .token

    View full-size slide

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

    Live Activity

    View full-size slide

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

    Live Activity


    LiveActivity
    update

    View full-size 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 full-size slide

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

    Live Activity
    っ alertConfiguration:


    AlertConfiguration? (= nil)


    Live Activity


    update

    View full-size slide

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

    View full-size slide

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




    LiveActivity

    View full-size slide

  54. © 2023 Reiwa Travel, Inc.
    2. | Live Activity
    54
    Live Activity end
    🚫
    Live Activity
    end
    っ ActivityContent





    state: State


    staleDate: Date?


    relevanceScore: Double


    View full-size 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 full-size slide

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


    pushToken


    push server
    request

    View full-size 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 full-size 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 full-size slide

  59. © 2023 Reiwa Travel, Inc.
    3.



    Braze SDK


    View full-size slide

  60. © 2023 Reiwa Travel, Inc.


    ...

    View full-size slide

  61. © 2023 Reiwa Travel, Inc.
    61

    View full-size slide

  62. © 2023 Reiwa Travel, Inc.
    62
    Mission

    View full-size slide

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


    🔥

    View full-size slide

  64. © 2023 Reiwa Travel, Inc.
    64
    UX

    View full-size slide

  65. © 2023 Reiwa Travel, Inc.
    65

    View full-size slide

  66. © 2023 Reiwa Travel, Inc.
    Live Activity


    ...

    View full-size slide

  67. © 2023 Reiwa Travel, Inc.
    3.



    Braze SDK


    View full-size slide

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





    View full-size slide

  69. © 2023 Reiwa Travel, Inc.
    3.



    Braze SDK


    View full-size slide

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


    View full-size slide

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


    Push

    View full-size slide

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


    Push

    View full-size 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 full-size 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 full-size slide

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


    Push

    View full-size slide

  76. © 2023 Reiwa Travel, Inc.
    3.



    Braze SDK


    View full-size slide

  77. © 2023 Reiwa Travel, Inc.
    っ pushTokenTag: String


    Tag


    Tag


    (Backend )
    3. | Braze SDK
    77
    request
    Braze SDK
    📦
    Live Activity request launchActivity

    View full-size slide

  78. © 2023 Reiwa Travel, Inc.
    3. | Braze SDK
    78


    Braze Live Activity


    application(_: didFinishLaunchingWithOptions:)
    Braze SDK
    📦
    resumeActivities
    OK👌

    View full-size 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 full-size slide

  80. © 2023 Reiwa Travel, Inc.
    Braze Live Activity

    Backend POST API /message/live_activity/update
    3. | Braze SDK
    80
    Example request

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  86. © 2023 Reiwa Travel, Inc.

    Push Notification Settings
    Debug






    Push
    3. | Braze SDK
    86

    View full-size 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 full-size slide

  88. © 2023 Reiwa Travel, Inc.
    3.



    Braze SDK


    View full-size slide

  89. © 2023 Reiwa Travel, Inc.
    3. |
    89


    Live Activity 🎉

    View full-size slide

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

    View full-size slide

  91. © 2023 Reiwa Travel, Inc.

    View full-size slide

  92. © 2023 Reiwa Travel, Inc.
    92



    1
    . Live Activities


    Live Activity


    Live Activity
    2.



    Braze SDK


    3.

    View full-size slide

  93. © 2023 Reiwa Travel, Inc.
    / NEWT


    iOS


    🔥
    https://www.reiwatravel.co.jp/recruit

    View full-size slide

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

    View full-size slide