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

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

Transcript

1. iOS, iPadOS Web Push 2023.04.28 Yuta Ohashi
2. 2 iOS iPadOS Web Push
3. 3 iOS iPadOS Web Push iOS 16.4 iPadOS 16.4 2023/03/27
4. 4 Android 2016
7. 7 3 API •Notification API •Service Worker API •Push API Notification Push Service Workers
8. Notification API
9. 9 Notification API
10. 10 Notification API
11. 11 Push Service Workers Notification Notification API • Web • ( ) • • • • PC MAX3 • Push Service Worker •
12. 12 Notification API Android JS or 1 2 3
13. Service Worker API
14. 14 Service Worker API
15. 15 Service Worker API
16. 16 Service Worker API Notification Push Service Workers • • • • • API • https localhost •
17. 17 Service Worker API chrome://serviceworker-internals/
18. 18 Service Worker API Web Service Worker Web Service Worker 1 4 2 3 1 2
19. Push API
20. 20 Push API
21. 21 Push API
22. 22 Notification Push Service Workers Push API • Web • ( ) • (Service Worker) • • • Service Worker • https localhost Service Worker • Notification
23. 23 Push API Android JS Service Worker Push 1 2 3 6 4 5
24. 24 Push API Android JS Service Worker Push 1 2 3 6 4 5 FCM Firebase Cloud Messaging
25. 25 iPhone
26. 26 🤔
27. 27 🤔 iOS PWA
28. PWA - Progressive Web Apps -
29. 29 PWA - Progressive Web Apps -
30. 30 PWA - Progressive Web Apps -
31. 31 PWA - Progressive Web Apps -
32. 32 PWA - Progressive Web Apps - • Web • • Service Worker • A2HS • • • • manifest.json, manifest.webmanifest PWA
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" } ] }
34. 34 PWA - Progressive Web Apps -
35. 35 PWA - Progressive Web Apps -
36. DEMO
37. 37 PWA - Progressive Web Apps - Android JS Service Worker Push 1 2 3 6 4 5
38. 38 PWA - Progressive Web Apps -
39. 39 PWA - Progressive Web Apps - Android JS Service Worker Push 1 2 3 6 4 5
40. 40 PWA - Progressive Web Apps -
41. 41 PWA - Progressive Web Apps - Android JS Service Worker Push 1 2 3 6 4 5
42. 42 PWA - Progressive Web Apps -
43. 43 🎉
44. まとめ
45. 45 • iOS iPadOS Web Push • PWA • PWA • • iOS A2HS • Andorid iOS • •
46. / @blue_goheimochi , , , , , PUBG Mobile,
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
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
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/