GDG神戸 Progressive Web Appハンズオン勉強会

GDG神戸 Progressive Web Appハンズオン勉強会の資料です。

Transcript

1. Progressive Web Apps
 ϋϯζΦϯษڧձ GDGਆށ ͓ͷ͏͑ 2016/07/30
2. ͸͡Ίʹ • Progressive Web Apps (PWA)ͷϋϯζΦϯษڧձͰ͢ • ϋϯζΦϯͱ΋͘΋͘λΠϜΛ௨ͯ͡PWAΛମݧ͠·͢ • HTMLɺJavaScriptΛ࢖ͬͯ։ൃ͠·͢ • Android୺຤ or ΤϛϡϨʔλ͕͋ΔͱΑΓָ͍͠Ͱ͢
3. ࣗݾ঺հ • ͓ͷ͏͑ (@_likr) • ژ౎େֶ ֶࡍ༥߹ڭҭݚڀਪਐηϯλʔ
 ੓ࡦͷͨΊͷՊֶϢχοτ ಛఆॿڭ • GDGਆށελοϑɺng-kyotoΦʔΨφΠβʔ • ՄࢹԽɺ࠷దԽɺΞϧΰϦζϜͷݚڀ • WebϑϩϯτΤϯυ։ൃ
4. λΠϜςʔϒϧ ࣌ؒ ಺༰ ʙ Φʔϓχϯά ʙ 18"ͷ঺հ ʙ ϋϯζΦϯ ʙɹ ΋͘΋͘λΠϜ ʙ ੒Ռൃද ೚ҙ ʙ εϙϯαʔτʔΫΫϩʔδϯά
5. ؀ڥ • Google Chrome
 https://www.google.co.jp/chrome/browser/desktop/ • Web Server for Chrome
 https://chrome.google.com/webstore/detail/ ofhbbkphhbklhfoeikjpcbhemlocgigb • Node.js
 https://nodejs.org/ • ޷ΈͷςΩετΤσΟλ
6. Progressive Web Appsͱ͸ʁ
7. Progressive Web Apps • https://developers.google.com/web/progressive- web-apps/ • WebαΠτͱωΠςΟϒΞϓϦͷ
 ͍͍ͱ͜औΓΛͨ͠WebΞϓϦ • Progressive Enhancement • ߴ͍ϢʔβϏϦςΟͷ࣮ݱ • ϏδωεϑϨϯυϦʔ
8. PWAͰͰ͖Δ͜ͱ • ΦϑϥΠϯԽ • Πϯλʔωοτ઀ଓͳ͠Ͱͷར༻ • දࣔͷߴ଎Խ • Push௨஌ • ΞϓϦ΁ͷ࠶๚Λଅਐ • App Install Banner • ϗʔϜը໘΁ͷγϣʔτΧοτ௥Ճ • ঃʑʹΞϓϦͷΑ͏ʹͳΔʂ
9. PWAͷProgressive Enhancement • WebαΠτʹΞΫηε
 ˠ ΩϟογϡʹΑΔදࣔͷߴ଎Խ
 ˠ γϣʔτΧοτͷ௥Ճ
 ˠ Push௨஌
10. ͳͥPWAʁ • Ϣʔβʔ͕ϞόΠϧΞϓϦΛ࢖༻͢Δ࣌ؒ͸ݶΒΕ͍ͯ Δ͕ɺۃҰ෦ͷਓؾΞϓϦʹׂ͔ΕΔ͕࣌ؒଟ͍
 ˠ ΄ͱΜͲͷϞόΠϧΞϓϦͷ࢖༻཰͸ඇৗʹ௿͍
 ˠ Ϣʔβʔ͕ΑΓଟ͘ར༻͢ΔWebαΠτʹ
 ɹωΠςΟϒΞϓϦͷར఺ΛऔΓࠐΉ
11. PWAΛࢧ͑ΔWebٕज़ • Service Worker
 https://www.w3.org/TR/service-workers/ • Web App Manifest
 https://www.w3.org/TR/appmanifest/
12. ؔ࿈Ωʔϫʔυ • Responsive Design • RAIL Performance Model • Web Storage / IndexedDB • ϞδϡʔϧγεςϜ • webpackɺSystemJSɺ… • ϑϩϯτΤϯυϑϨʔϜϫʔΫɺϥΠϒϥϦ • AngularɺPolymerɺReactɺ…
13. Service Workerೖ໳
14. ࠓ͸ੲ… • Application Cache • Offline Web ApplicationsΛ࣮ݱ͢ΔͨΊͷ࢓૊Έ • cache manifestͰΩϟογϡ͢ΔϦιʔεΛࢦఆ • Application CacheͷηΩϡϦςΟ໰୊ by @kyo_ago
 http://0-9.sakura.ne.jp/pub/w3cdev/start.html • ݱࡏඇਪ঑ɺকདྷతʹഇࢭ΁ • JavaScriptͰॊೈͳ੍ޚ͕ՄೳͳServiceWorker΁
15. Service Workerͱ͸ • Webϖʔδ(ϝΠϯεϨουɺUIεϨου)ͱ͸
 ಠཱͯ͠εΫϦϓτΛಈ࡞ͤ͞Δ࢓૊Έ • ωοτϫʔΫϦΫΤετΛϑοΫ • ΩϟογϡΛ࢖ͬͯϨεϙϯε • ϦΫΤετΛमਖ਼ • αʔόʔPushΛड͚ͯ௨஌Λදࣔ • postMessageͰϝΠϯεϨουͱ௨৴ • HTTPSͰͷΈಈ࡞ (localhostΛআ͘)
16. ͳͥΦϑϥΠϯWebΞϓϦʁ • ϞόΠϧ؀ڥ΁ͷରԠ • ௨৴ͷෆ҆ఆ͞ • ௨৴ͷޮ཰Խ • ޫ଎౓͸ෆมʂ • ΦϑϥΠϯɾϑΝʔετͷࢥ૝ͱ࣮ફ by നੴढ़ฏ
 http://www.slideshare.net/shumpei/thought-and- practice-of-offline-first
17. Service Workerͷαϙʔτঢ়گ • Desktop • Firefox • Chrome • Opera • Mobile • Android Browser • Chrome for Android • http://caniuse.com/#feat=serviceworkers
18. Service Workerͷొ࿥ • navigator.serviceWorker.registerΛ࢖༻ • Service Workerະαϙʔτ؀ڥ͸ navigator.serviceWorkerͷ༗ແΛ֬ೝ • ॏෳొ࿥͸ؾʹ͠ͳͯ͘OK if ('serviceWorker' in navigator) { navigator.serviceWorker .register('./service-worker.js') .then(() => { console.log('Service Worker Registered’) }) }
19. Service Workerͷ࣮૷ • ΠϕϯτϋϯυϥͰॲཧΛ࣮૷ • ϖʔδ͕ඇΞΫςΟϒͰ΋ಈ࡞ self.addEventListener(‘install’, (event) => { // workerͷΠϯετʔϧ }) self.addEventListener(‘activate’, (event) => { // workerͷactivate }) self.addEventListener(‘fetch’, (event) => { // ωοτϫʔΫΞΫηεͷϑοΫ }) self.addEventListener(‘message’, (event) => { // ϝΠϯεϨου͔Βͷϝοηʔδड৴ })
20. Cache • ੩తΩϟογϡɿinstallΠϕϯτͰॲཧ • ಈతΩϟογϡɿfetchΠϕϯτͰॲཧ let cacheName = ‘pwa-example’ let filesToCache = [/* urls */] self.addEventListener(‘install’, (event) => { console.log(‘[ServiceWorker] Install’) event.waitUntil(caches.open(cacheName).then((cache) => { console.log(‘[ServiceWorker] Caching app shell’) return cache.addAll(filesToCache) })) })
21. Push௨஌ • WorkerͰϝοηʔδड৴ͯ͠௨஌Λදࣔ • ૹ৴ʹ͸Google Cloud Messaging (GCM)Λ࢖༻ self.addEventListener(‘push’, (event) => { console.log(‘Push message’, event); let title = ‘Push message’ event.waitUntil( self.registration.showNotification(title, { body: ‘The Message’, icon: ‘images/icon.png’, tag: ‘my-tag’ })) })
22. Service Workerͷσόοά • Developer Tools • Ωϟογϡͷ֬ೝɺૢ࡞ • Workerίʔυͷσόοά • Push௨஌ͷςετ • chrome://serviceworker-internals • Workerͷఀࢭɺొ࿥ղআ
23. Fetchઓུ • The offline cookbook
 https://jakearchibald.com/2014/offline-cookbook/ • Cache only • Network only • Cache, falling back to network (cache first) • Cache & network race (fastest) • Network falling back to cache (network first) • …
24. sw-precache • https://github.com/GoogleChrome/sw-precache • JavaScript·ͨ͸ઃఆϑΝΠϧ͔Β
 Service WorkerίʔυΛੜ੒ • Α͘࢖͏Fetchઓུ͕࣮૷ࡁΈ • networkFirst • cacheFirst • fastest • cacheOnly • networkOnly
25. ͓·͚ (্ڃऀ޲͚ʁ) • ΍Γ͍ͨ͜ͱ • AltJSͰService WorkerΛ࣮૷͢Δ • Service WorkerͰnode.jsϞδϡʔϧΛར༻͢Δ • UIεϨουͱService WorkerͷίʔυΛڞ௨Խ͢Δ • WorkerΛۦ࢖͢ΔͨΊͷϓϩδΣΫτߏ੒ with webpack
 http://qiita.com/_likr/items/d382dc120a942ba4c6fe
26. PWAͷαϯϓϧ
27. PWAͷαϯϓϧ • https://developers.google.com/web/progressive- web-apps/ • https://developers.google.com/web/showcase/2016/ iowa2016 • https://shop.polymer-project.org/ • https://pwa.rocks/
28. ΍ͬͯΈͨ • Angular & WordPress.com APIͰ࣮૷ͨ͠ϒϩά • https://likr.github.io/blog • https://github.com/likr/blog • ΍ͬͨ͜ͱ • Service WorkerʹΑΔΦϑϥΠϯରԠ • sw-precache࢖༻ • هࣄ͸network firstͰऔಘ • ϗʔϜεΫϦʔϯ΁ͷ௥Ճ
29. ϋϯζΦϯ
30. ϋϯζΦϯ಺༰ • Your first Progressive Web App • ӳޠɿhttps://codelabs.developers.google.com/ codelabs/your-first-pwapp/index.html • ೔ຊޠɿhttps://codelabs.developers.google.com/ codelabs/your-first-pwapp-ja/index.html
31. ΋͘΋͘λΠϜ
32. ΋͘΋͘λΠϜ • ΋ͬͱPWA։ൃΛ΍ͬͯΈΑ͏ʂ • ଞͷcodelabΛ΍Δ • https://codelabs.developers.google.com/pwa- dev-summit • ࣗ෼ͷWebΞϓϦͷPWAԽ • PWAΛ৽͘͠࡞Δ • ࠷ޙʹ੒Ռൃද
33. ͓͢͢ΊCodelab • ॳڃ • Add Your Web App to a User’s Home Screen • Migrate your site to a Progressive Web App • தڃ • Caching with progressive libraries • Enable Push Notifications for your Web App • ্ڃ • Building data-rich web apps with Lovefield • Building a Progressive Web app with Firebase, Polymerfire and Polymer Components
34. ࢀߟ৘ใ • Progressive Web Apps
 https://developers.google.com/web/progressive- web-apps/ • Progressive Web App Dev Summit 2016
 https://events.withgoogle.com/progressive-web-app- dev-summit/