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

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

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. View Slide

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