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

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

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/

laiso

July 06, 2018
Tweet

More Decks by laiso

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. Stack Overflow PWA
    • StackOverflowϏϡϫʔ

    View full-size slide

  4. Architecture in Stack
    Overflow PWA
    • Firebase Function

    • Express/NodeJS

    • Service Workers

    View full-size slide

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

    • Server-side Rendering(Express)

    • Web App in Service Workers

    View full-size slide

  6. Web App in Service
    Workers
    • Workbox

    • fetch

    • Non-SPA

    View full-size slide

  7. Workbox by
    @GoogleChrome
    • ΦϑϥΠϯ΢ΣϒΞϓϦͷͨΊͷϥΠϒϥϦ

    • Google's Web Developer Relations team

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. ඞཁͳ৘ใΛfetch͢Δ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. SSR: Express
    • GET /questions/:id

    • axiosͰAPI call (lru-cacheʹset)

    • HTMLΛ૊Έཱͯͯ res.write()

    View full-size slide

  14. SW: Workbox
    • GET /questions/:id (workbox-routing)

    • fetch() ͰAPI call

    • HTMLΛ૊Έཱͯ (workbox-streams)

    View full-size slide

  15. Web App in Service
    Workers
    • ϓϩάϨογϒʹ։ൃ͕Մೳ

    • NodeJSͰ΢ΣϒΞϓϦΛ࡞Δ

    • SW+WorkboxͰಈ͘Α͏ʹڞ௨Խ͢Δ

    View full-size slide

  16. ·ͱΊ: Service WorkersΛ࢖ͬ
    ͨ΢ΣϒΞϓϦͷΞʔΩςΫνϟ
    • ΢Σϒ͔Β഑৴͞ΕΠϯετʔϧ͞ΕΔ

    • Ωϟογϡ࢖ͬͯHTMLͰUIΛ૊ΈཱͯΔ

    • ίϯςϯπ͸ࠩ෼ΛඇಉظʹfetchͰऔಘ͢Δ

    View full-size slide