5 minutes PWA - Speaker Deck

Slide 1

Slide 1 text

5 minuts PWA

Slide 2

Slide 2 text

PWAͱ͸ • Progressive Web Apps • ϞόΠϧ୺຤ͰϖʔδΛදࣔ͢Δͱ͖ʹωΠςΟϒΞϓϦͷ Α͏ͳڍಈΛͤ͞Δ͜ͱ͕Ͱ͖Δ • GoogleΛத৺ͱͯ͠ࡦఆ͞Ε͍ͯΔ

Slide 3

Slide 3 text

PWAΛߏ੒͢Δཁૉ • Service Worker • Push API • Notiﬁcation API • localStorage / IndexedDB • History API • Geolocation API

Slide 4

Slide 4 text

PWAͰͰ͖Δ͜ͱ • ΦϑϥΠϯରԠ • ϖʔδͷදࣔ • ը໘ભҠ • ϓογϡ௨஌ • ϗʔϜը໘ͷ௥Ճ • Ґஔ৘ใͷऔಘ

Slide 5

Slide 5 text

PWA vs Native

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

࠾༻ྫ • Twitter Mobile • Instagram • ଞଟ਺

Slide 8

Slide 8 text

Service Worker • ϒϥ΢β͕Webϖʔδͱ͸ผʹόοΫάϥ΢ϯυͰ࣮ߦ͢Δ εΫϦϓτɻ • DOMʹ͸௚઀ΞΫηεͰ͖ͳ͍ɻ • Service Worker͸࢖༻͍ͯ͠ͳ͍ؒ͸ऴྃ͞Εɺඞཁʹͳͬ ͨΒىಈ͠·͢ɻ • localhost or httpsͰͷΈಈ࡞ɻ

Slide 9

Slide 9 text

Service Worker

Slide 10

Slide 10 text

ϒϥ΢βରԠঢ়گ

Slide 11

Slide 11 text

iOS11.3ΑΓService Worker͕༗ޮ ʹ

Slide 12

Slide 12 text

݁࿦

Slide 13

Slide 13 text

͙͢ಋೖ͢΂͖͔ʁ

Slide 14

Slide 14 text

·ͩૣ͍

Slide 15

Slide 15 text

Ҏ্

Slide 16

Slide 16 text

ࢀߟϦϯΫ • http://www.publickey1.jp/blog/18/ appleiosmacosprogressiveweb_apps.html • https://qiita.com/edwardkenfox/items/ 4c0b9550ffa48c1f0445 • https://qiita.com/y_fujieda/items/f9e765ac9d89ba241154 • https://developers.google.com/web/fundamentals/primers/ service-workers/?hl=ja • https://qiita.com/horo/items/ff665e4a6613e7684f8f