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

by laiso

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Stack Overﬂow PWA • StackOverﬂowϏϡϫʔ

Slide 4

Slide 4 text

Architecture in Stack Overﬂow PWA • Firebase Function • Express/NodeJS • Service Workers

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Web App in Service Workers • Workbox • fetch • Non-SPA

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

ඞཁͳ৘ใΛfetch͢Δ

Slide 11

Slide 11 text

ैདྷͷ΢ΣϒΞϓϦͱͷൺֱ • Ԡ౴଎౓

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

SSR: Express • GET /questions/:id • axiosͰAPI call (lru-cacheʹset) • HTMLΛ૊Έཱͯͯ res.write()

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Web App in Service Workers • ϓϩάϨογϒʹ։ൃ͕Մೳ • NodeJSͰ΢ΣϒΞϓϦΛ࡞Δ • SW+WorkboxͰಈ͘Α͏ʹڞ௨Խ͢Δ

Slide 16

Slide 16 text

·ͱΊ: Service WorkersΛ࢖ͬ ͨ΢ΣϒΞϓϦͷΞʔΩςΫνϟ • ΢Σϒ͔Β഑৴͞ΕΠϯετʔϧ͞ΕΔ • Ωϟογϡ࢖ͬͯHTMLͰUIΛ૊ΈཱͯΔ • ίϯςϯπ͸ࠩ෼ΛඇಉظʹfetchͰऔಘ͢Δ