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

Slide 1

Slide 1 text

iOS, iPadOS Web Push 2023.04.28 Yuta Ohashi

Slide 2

Slide 2 text

2 iOS iPadOS Web Push

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

4 Android 2016

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

Notification API

Slide 9

Slide 9 text

9 Notification API

Slide 10

Slide 10 text

10 Notification API

Slide 11

Slide 11 text

11 Push Service Workers Notification Notification API • Web • ( ) • • • • PC MAX3 • Push Service Worker •

Slide 12

Slide 12 text

12 Notification API Android JS or 1 2 3

Slide 13

Slide 13 text

Service Worker API

Slide 14

Slide 14 text

14 Service Worker API

Slide 15

Slide 15 text

15 Service Worker API

Slide 16

Slide 16 text

16 Service Worker API Notification Push Service Workers • • • • • API • https localhost •

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Push API

Slide 20

Slide 20 text

20 Push API

Slide 21

Slide 21 text

21 Push API

Slide 22

Slide 22 text

22 Notification Push Service Workers Push API • Web • ( ) • (Service Worker) • • • Service Worker • https localhost Service Worker • Notification

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

25 iPhone

Slide 26

Slide 26 text

26 🤔

Slide 27

Slide 27 text

27 🤔 iOS PWA

Slide 28

Slide 28 text

PWA - Progressive Web Apps -

Slide 29

Slide 29 text

29 PWA - Progressive Web Apps -

Slide 30

Slide 30 text

30 PWA - Progressive Web Apps -

Slide 31

Slide 31 text

31 PWA - Progressive Web Apps -

Slide 32

Slide 32 text

32 PWA - Progressive Web Apps - • Web • • Service Worker • A2HS • • • • manifest.json, manifest.webmanifest PWA

Slide 33

Slide 33 text

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" } ] }

Slide 34

Slide 34 text

34 PWA - Progressive Web Apps -

Slide 35

Slide 35 text

35 PWA - Progressive Web Apps -

Slide 36

Slide 36 text

DEMO

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

38 PWA - Progressive Web Apps -

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

40 PWA - Progressive Web Apps -

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

42 PWA - Progressive Web Apps -

Slide 43

Slide 43 text

43 🎉

Slide 44

Slide 44 text

まとめ

Slide 45

Slide 45 text

45 • iOS iPadOS Web Push • PWA • PWA • • iOS A2HS • Andorid iOS • •

Slide 46

Slide 46 text

/ @blue_goheimochi , , , , , PUBG Mobile,

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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/