Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

38b31e2f4877c8216969f152e4fb11d9?s=47 Fuya
June 21, 2016
610

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

38b31e2f4877c8216969f152e4fb11d9?s=128

Fuya

June 21, 2016
Tweet

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