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

iOS, iPadOSにもWeb Pushがきたのでさわってみた

iOS, iPadOSにもWeb Pushがきたのでさわってみた

ウィルゲート&リンケージ合同勉強会のLT資料です。

blue_goheimochi

April 28, 2023
Tweet

More Decks by blue_goheimochi

Other Decks in Technology

Transcript

  1. iOS, iPadOS
    Web Push
    2023.04.28
    Yuta Ohashi

    View Slide

  2. 2
    iOS iPadOS Web Push

    View Slide

  3. 3
    iOS iPadOS Web Push
    iOS 16.4 iPadOS 16.4
    2023/03/27

    View Slide

  4. 4
    Android 2016

    View Slide

  5. 5

    View Slide

  6. 6

    View Slide

  7. 7
    3 API
    •Notification API
    •Service Worker API
    •Push API
    Notification
    Push Service Workers

    View Slide

  8. Notification API

    View Slide

  9. 9
    Notification API

    View Slide

  10. 10
    Notification API

    View Slide

  11. 11
    Push Service Workers
    Notification
    Notification API
    • Web
    • ( )



    • PC MAX3
    • Push Service Worker

    View Slide

  12. 12
    Notification API
    Android
    JS
    or
    1 2 3

    View Slide

  13. Service Worker API

    View Slide

  14. 14
    Service Worker API

    View Slide

  15. 15
    Service Worker API

    View Slide

  16. 16
    Service Worker API
    Notification
    Push Service Workers




    • API
    • https localhost

    View Slide

  17. 17
    Service Worker API
    chrome://serviceworker-internals/

    View Slide

  18. 18
    Service Worker API
    Web
    Service Worker
    Web
    Service Worker
    1 4
    2 3
    1 2

    View Slide

  19. Push API

    View Slide

  20. 20
    Push API

    View Slide

  21. 21
    Push API

    View Slide

  22. 22
    Notification
    Push Service Workers
    Push API
    • Web
    • ( )
    • (Service Worker)


    • Service Worker
    • https localhost Service Worker
    • Notification

    View Slide

  23. 23
    Push API
    Android
    JS Service Worker
    Push
    1 2
    3
    6
    4
    5

    View Slide

  24. 24
    Push API
    Android
    JS Service Worker
    Push
    1 2
    3
    6
    4
    5
    FCM Firebase Cloud Messaging

    View Slide

  25. 25
    iPhone

    View Slide

  26. 26
    🤔

    View Slide

  27. 27
    🤔
    iOS PWA

    View Slide

  28. PWA
    - Progressive Web Apps -

    View Slide

  29. 29
    PWA - Progressive Web Apps -

    View Slide

  30. 30
    PWA - Progressive Web Apps -

    View Slide

  31. 31
    PWA - Progressive Web Apps -

    View Slide

  32. 32
    PWA - Progressive Web Apps -
    • Web

    • Service Worker
    • A2HS



    • manifest.json, manifest.webmanifest PWA

    View Slide

  33. 33
    PWA - Progressive Web Apps -
    {
    "background_color": "#000000",
    "name": "Web Notification Playground",
    "description": "Demo Web Push",
    "short_name": "WNP",
    "display": "standalone",
    "lang": "ja",
    "start_url": "/",
    "icons": [
    {
    "src": "icon/192x192.png",
    "sizes": "192x192",
    "type": "image/png"
    }
    ]
    }

    View Slide

  34. 34
    PWA - Progressive Web Apps -

    View Slide

  35. 35
    PWA - Progressive Web Apps -

    View Slide

  36. DEMO

    View Slide

  37. 37
    PWA - Progressive Web Apps -
    Android
    JS Service Worker
    Push
    1 2
    3
    6
    4
    5

    View Slide

  38. 38
    PWA - Progressive Web Apps -

    View Slide

  39. 39
    PWA - Progressive Web Apps -
    Android
    JS Service Worker
    Push
    1 2
    3
    6
    4
    5

    View Slide

  40. 40
    PWA - Progressive Web Apps -

    View Slide

  41. 41
    PWA - Progressive Web Apps -
    Android
    JS Service Worker
    Push
    1 2
    3
    6
    4
    5

    View Slide

  42. 42
    PWA - Progressive Web Apps -

    View Slide

  43. 43
    🎉

    View Slide

  44. まとめ

    View Slide

  45. 45
    • iOS iPadOS Web Push
    • PWA
    • PWA

    • iOS A2HS
    • Andorid iOS


    View Slide

  46. / @blue_goheimochi
    , , , ,
    , PUBG Mobile,

    View Slide

  47. 47
    • Notification API
    • https://notifications.spec.whatwg.org/
    • Notifications API
    • https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API
    • Service Workers
    • https://www.w3.org/TR/service-workers/
    • Service Worker API
    • https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
    • Push API
    • https://www.w3.org/TR/push-api/
    • Push API
    • https://developer.mozilla.org/en-US/docs/Web/API/Push_API

    View Slide

  48. 48
    • Progressive web apps (PWAs)
    • https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps
    • Learn PWA
    • https://web.dev/learn/pwa/
    • What are Progressive Web Apps?
    • https://web.dev/what-are-pwas/
    • Making PWAs installable
    • https://developer.mozilla.org/en-
    US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable

    View Slide

  49. 49
    • PWA iOS
    • https://speakerdeck.com/pkino/pwa-now-and-in-the-future-status-
    of-support-on-ios
    • iOS PWA Compatibility
    • https://firt.dev/notes/pwa-ios/
    • PWA Progressive Web Apps
    • https://spice-factory.co.jp/development/what-is-pwa/

    View Slide