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

Service Workersを使ったウェブアプリのアーキテクチャ / Web App Architecture on Service Workers

D107509659b6f023aa60e77aef1db237?s=47 laiso
July 06, 2018

Service Workersを使ったウェブアプリのアーキテクチャ / Web App Architecture on Service Workers

Frontrend Vol.12 - サービスの誕生と成長 におけるLT「Service Workersを使ったウェブアプリのアーキテクチャ」のスライドです

- https://developers.google.com/web/updates/2018/05/beyond-spa
- https://so-pwa.firebaseapp.com/
- https://github.com/GoogleChromeLabs/so-pwa/

D107509659b6f023aa60e77aef1db237?s=128

laiso

July 06, 2018
Tweet

Transcript

  1. Service WorkersΛ࢖ͬͨ΢Σ ϒΞϓϦͷΞʔΩςΫνϟ

  2. Beyond SPAs • https://developers.google.com/web/updates/2018/05/ beyond-spa

  3. Stack Overflow PWA • StackOverflowϏϡϫʔ

  4. Architecture in Stack Overflow PWA • Firebase Function • Express/NodeJS

    • Service Workers
  5. Architecture in Stack Overflow PWA • 2֊ݐΞʔΩςΫνϟ(ςϯϓϨʔτΛڞ௨Խ) • Server-side Rendering(Express)

    • Web App in Service Workers
  6. Web App in Service Workers • Workbox • fetch •

    Non-SPA
  7. Workbox by @GoogleChrome • ΦϑϥΠϯ΢ΣϒΞϓϦͷͨΊͷϥΠϒϥϦ • Google's Web Developer Relations

    team
  8. URLϧʔςΟϯάΛSWͰߦ͏

  9. ϨεϙϯεϖʔδͷHTMLΛSW Ͱ૊ΈཱͯΔ

  10. ඞཁͳ৘ใΛfetch͢Δ

  11. ैདྷͷ΢ΣϒΞϓϦͱͷൺֱ • Ԡ౴଎౓

  12. SPAͱͷൺֱ • Ωϟογϡཁૉͷ੍ޚ

  13. SSR: Express • GET /questions/:id • axiosͰAPI call (lru-cacheʹset) •

    HTMLΛ૊Έཱͯͯ res.write()
  14. SW: Workbox • GET /questions/:id (workbox-routing) • fetch() ͰAPI call

    • HTMLΛ૊Έཱͯ (workbox-streams)
  15. Web App in Service Workers • ϓϩάϨογϒʹ։ൃ͕Մೳ • NodeJSͰ΢ΣϒΞϓϦΛ࡞Δ •

    SW+WorkboxͰಈ͘Α͏ʹڞ௨Խ͢Δ
  16. ·ͱΊ: Service WorkersΛ࢖ͬ ͨ΢ΣϒΞϓϦͷΞʔΩςΫνϟ • ΢Σϒ͔Β഑৴͞ΕΠϯετʔϧ͞ΕΔ • Ωϟογϡ࢖ͬͯHTMLͰUIΛ૊ΈཱͯΔ • ίϯςϯπ͸ࠩ෼ΛඇಉظʹfetchͰऔಘ͢Δ