meguro.esのサイトをPWAsにしてみた+α

Transcript

1. meguro.esͷαΠτΛ PWAsʹͯ͠Έͨ +ଞ meguro.es #4 2016/06/21 Fumiya FURUYA 1 meguro.es#4 https:/ /meguro.es
2. whoami 1 • ݹ୩จ໻ (Fumiya FURUYA) • גࣜձࣾυϦίϜ • ৽ଔ2೥໨ • ιʔγϟϧήʔϜͷ αʔόʔαΠυΤϯδχΞ(rails) 2 meguro.es#4 https:/ /meguro.es
3. whoami 2 • ׂѪ 3 meguro.es#4 https:/ /meguro.es
4. ࠓ೔͸ͳ͢͜ͱ • ΋ͱ΋ͱGeofencing APIΛ࢖ͬͯΈͨɻΛ10෼ؒͰ༧ఆͯ͠ ͓Γ·͕ͨ͠ॾൠͷࣄ৘ʹΑΓ2ຊཱͯͰ͢ɻ • ͋ΒͨͳService Worker(SWs)ͷػೳGeofencing APIʹ͍ͭͯ • meguro.es ެࣜαΠτʹ͍ͭͯ 4 meguro.es#4 https:/ /meguro.es
5. Geofencing API • Editor’s Draft, 11 May 2016 • ChromeͰ͸ϑϥάΛཱͯΔ͜ͱͰ࣮ ૷ͷ֬ೝ͕Ͱ͖ͨ 5 meguro.es#4 https:/ /meguro.es
6. Geofencing API͕Կނग़དྷͨͷ͔ Service workers are generic, event-driven, time-limited script contexts that run at an origin. These properties make them natural endpoints for a range of runtime services that may outlive the context of a particular document, e.g. handling push notifications, background data synchronization, responding to resource requests from other origins, or receiving centralized updates to expensive-to-calculate data (e.g., geolocation or gyroscope). 6 meguro.es#4 https:/ /meguro.es
7. Geofencing API͕Կނग़དྷͨͷ͔ • Ϧιʔεෛՙͷߴ͍ॲཧ͸֤ݸαΠτͷWorkerΛಈ͔͢ͷͰ͸ ͳ͘ूத؅ཧ͢Δ • push௨஌ΛFirebaseܦ༝Ͱ͢Δͷ͸ͦͷͨΊ 7 meguro.es#4 https:/ /meguro.es
8. Geofencing APIͷ࢖͍ํ navigator.serviceWorker.register('serviceworker.js') .then((swRegistration) => { let region = new CircularGeofenceRegion({ name: 'arcotower', latitude: 35.631851, longitude: 139.7146477, radius: 1000 }); swRegistration.geofencing.add(region); }); 8 meguro.es#4 https:/ /meguro.es
9. Geofencing APIͷ࢖͍ํ serviceworker.js self.ongeofenceenter = (e) => { // ͜͜Ͱ௨஌Λग़ͨ͠Γɺfetch (POST) Λͨ͠Γ͢Δɻ } self.ongeofenceleave = (e) => { // ͜͜Ͱ௨஌Λग़ͨ͠Γɺfetch (POST) Λͨ͠Γ͢Δɻ } 9 meguro.es#4 https:/ /meguro.es
10. ͦ͏؆୯ʹ͸ಈ͔ͳ͍ Geofencing API • ໊લ͕มΘ͍ͬͯΔ໰୊(undefined functionͱग़Δ໰୊) • CircularGeofenceRegion -> CircularGeofencingRegion • swRegistration.geofencing.add -> swRegistration.geofencing.regis terRegion 10 meguro.es#4 https:/ /meguro.es
11. ͦͯ͠deprecatedʹ • 5݄ࠒʹdeprecatedʹͳΓ·ͨ͠ • Chrome Canary͔Β΋ফ͑ͯͳ͘ͳΓ ·ͨ͠ • ServiceWorkerͷ໨తΛߟ͑Δͱͦͷ͏ ͪࣅͨΑ͏ͳ΋ͷ͸෮׆͢Δ!?͔΋ɻ 11 meguro.es#4 https:/ /meguro.es
12. ͜ͷ஌ΒͤΛݟͨ࣌;ͱ಄ΛΑ͗Γ·ͨ͠ 12 meguro.es#4 https:/ /meguro.es
13. meguro.esͷ ωλ͕੾Εͨʂ 13 meguro.es#4 https:/ /meguro.es
14. meguro.esͷαΠτΛ PWAsʹ͢Δͱ͖ͷ஌ݟ meguro.es #4 2016/06/21 Fumiya FURUYA 14 meguro.es#4 https:/ /meguro.es
15. ͳʹʹ͍ͭͯ͸ͳ͔͢ • meguro.esαΠτΛઈࢍมߋதͰ͢ɻ • 11݄ʹ࡞ͬͨ࣌ʹൺ΂ͯมԽͨ͠·ΘΓͷπʔϧʹ͍ͭͯ঺ հ͠·͢ 15 meguro.es#4 https:/ /meguro.es
16. ͖͔͚ͬ • meguro.esʹެࣜΩϟϥ͕Ͱ͖·ͨ͠ʂ • εςοΧʔɺ΢ΣϧΧϜΧʔυ(໊ࡳ)ͳͲ͸͡Ί·ͨ͠ • ͔ͤͬ͘ɺ֎ʹग़ͤΔΩϟϥ͕Ͱ͖͔ͨΒαΠτΛ࡞Ζ͏ 16 meguro.es#4 https:/ /meguro.es
17. (ͪͳΈʹ)Ϧεͷཧ༝ • ΦϥΠϦʔ͔Βདྷ೥ൃച༧ఆͷຊ͔Β • http:/ /shop.oreilly.com/product/0636920026396.do • ͜ͷಈ෺͕ຊ౰ʹϦεͳͷ͔͸ෆ໌ 17 meguro.es#4 https:/ /meguro.es
18. WebStarterKitΛ࢖ͬͯ։ൃ • ϚςϦΞϧσβΠϯ • sw-toolbox ͳͲศརػೳ͕ଟ෼ʹೖ͍ͬͯΔ 18 meguro.es#4 https:/ /meguro.es
19. ChromeͷDevTools͕ॆ࣮͍ͯ͠Δ • ΩϟογϡΛແޮʹͰ͖Δ 19 meguro.es#4 https:/ /meguro.es
20. sw-toolboxΛ࢖͏ • Google I/O ͳͲ΢Υον͍ͯ͠Δਓ͸͝ଘ஌ͷϑϨʔϜϫʔΫ • SWsΛ࢖ͬͨ͋Γ͕ͪͳॲཧ(cacheͳͲ)͸͔Ώ͍ͱ͜Ζʹख͕ ಧ͘൓໘ɺઃఆ͕൥ࡶͳͷͰ͍͍ײ͡ʹ͢ΔϥΠϒϥϦͰ͢ɻ 20 meguro.es#4 https:/ /meguro.es
21. Precahing toolbox.precache(['/index.html', '/site.css', '/images/logo.png']); SWsͷΠϯετʔϧ࣌ʹΩϟογϡͤ͞Δ͜ͱ͕Ͱ͖Δ 21 meguro.es#4 https:/ /meguro.es
22. υϝΠϯऔಘ • https:/ /www.meguro.es/ • es ͸εϖΠϯͷTLD! Espanyol • esυϝΠϯ͸ύεϙʔτ͕͋Ε͹ͱΕΔͷͰECMAScriptք۾ ͷํ͸ੋඇ SSLରԠʹ͸CloudFlareΛ࢖͏ • SWsʹ͸HTTPS͕ඞਢ 22 meguro.es#4 https:/ /meguro.es
23. hosting͸githubͰʂ • github pagesͰॻ͍ͯ·͢ɻ • CNAMEͱ͍͏໊લΛ͓͚͹೚ҙͷυϝΠϯΛ͋ͯΒΕΔ • push௨஌ͳͲαʔόͷػೳ͕ඞཁʹͳΓͦ͏ʹͳͬͨΒ·ͨҠ సΛߟ͍͑ͨͱࢥ͍·͢ • ࠓճΑΓɺษڧձͷϨϙʔτΛmeguro.esʹ͍͋͛ͯ͜͏ͱ͓΋ ͍·͢ 23 meguro.es#4 https:/ /meguro.es
24. ·ͱΊ • SWsͷػೳ͸೔ʑ૿͍͑ͯΔɻ • ࣮ࡍͷར༻Λߟ͑Δͱɺϒϥ΢βϕϯμʔ͕ग़͍ͯ͠Δπʔϧ Λ࢖ͬͨ΄͏͕؆୯ʹͰ͖Δ͔΋ 24 meguro.es#4 https:/ /meguro.es