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/

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Ͱऔಘ͢Δ