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

ウェブアプリケーションがオフラインでも動作できるようにやっていった話 / ServiceWorker for Offline WebApp in MANGA Viewer

pastak
September 29, 2018

ウェブアプリケーションがオフラインでも動作できるようにやっていった話 / ServiceWorker for Offline WebApp in MANGA Viewer

pastak

September 29, 2018
Tweet

More Decks by pastak

Other Decks in Technology

Transcript

  1. • ژ౎େֶ޻ֶ෦৘ใֶՊ ܭࢉػՊֶίʔε6ճੜ • KMC ݩ޿ใ • Nota Inc Gyazo։ൃνʔϜ

    ΞϧόΠτ • JavaScript / React / Ruby on Rails • Browser Extension • גࣜձࣾ͸ͯͳ ΞϧόΠτ • TypeScript
  2. • ژ౎େֶ޻ֶ෦৘ใֶՊ ܭࢉػՊֶίʔε6ճੜ • KMC ݩ޿ใ • Nota Inc Gyazo։ൃνʔϜ

    ΞϧόΠτ • JavaScript / React / Ruby on Rails • Browser Extension • גࣜձࣾ͸ͯͳ ΞϧόΠτ • TypeScript
  3. ϚϯΨϏϡʔϫʔΛ࡞͍ͬͯ·͢ • GigaViewerͱ͍͏໊લ • ΢ΣϒαΠτͰͷϚϯΨӾཡʹಛԽ͍ͯ͠Δ • ϚϯΨϏϡʔϫʔҎ֎ʹ΋ϝσΟΞຖͷτοϓϖʔδ΍ίϯςϯπͳͲͷ؅ཧը໘ ΋͍࣋ͬͯΔ • ৄ͘͠͸

    id:tkzwtks ͷʮ͸ͯͳͱWebϚϯΨαʔϏεͷาΈʯ* Λ • ʮͱͳΓͷϠϯάδϟϯϓʯͳͲݱࡏ6αΠτͰར༻͞Ε͍ͯΔ *: https://speakerdeck.com/tkzwtks/hatena-engineer-seminar-10
  4. ServiceWorkerͱ͸ > Service Worker ͸ϒϥ΢β͕ Web ϖʔδͱ͸ผʹόοΫάϥ΢ϯ υͰ࣮ߦ͢ΔεΫϦϓτͰɺWeb ϖʔδ΍ϢʔβͷΠϯλϥΫγϣ ϯΛඞཁͱ͠ͳ͍ػೳΛ

    Web ʹ΋ͨΒ͠·͢ɻ* > Service Worker ͸ϓϩάϥϜՄೳͳωοτϫʔΫϓϩΩγͰ͢ɻ* *: https://developers.google.com/web/fundamentals/primers/service-workers/
  5. Service WorkerͷΩϟογϡ • લఏͱͯ͠SWͷΩϟογϡ͸ඇৗʹڧྗ • HTTP headerΛ࢖ͬͨΩϟογϡϨϕϧͷࢦఆͳͲ͸ޮ͔ͳ͍ • Ұ౓Ωϟογϡͨ͠΋ͷΛฦ͢Α͏ͳঢ়ଶʹͳΔͱαʔϏεଆ͔Β͸खग़͠Λ؆୯ʹ͸ग़དྷͳ͘ͳͬ ͯ͠·͍͔Ͷͳ͍

    • CDNͷ৔߹͸CDN্ͷΩϟογϡΛඈ͹ͨ͠Γग़དྷΔ͕ɺҰ౓SW͕Πϯετʔϧ͞ΕΔͱ؆୯ ʹ͸ΞϓϦέʔγϣϯ͔ΒมߋͰ͖ͳ͍ʢSWεΫϦϓτͷߋ৽ͳͲ͕ඞཁʹͳΔʣ • Կ͔͠ΒΞϓϦέʔγϣϯଆ͔ΒϢʔβʔ؀ڥͷCacheStorageΛ;ͬඈ͹͢ํ๏Λ͓࣋ͬͯ͘ͱྑ ͍͔΋ʢcacheStorageʹ͸ΫϥΠΞϯτଆ͔Β΋SW͔Β΋ΞΫηεͰ͖Δ)
  6. GigaViewerͷΦϑϥΠϯΩϟογϡ࣮૷ • install / activete࣌ʹ༧ΊΩϟογϡ • ΞΠίϯը૾ͳͲͷΞηοτྨ • JS΍CSSͳͲ •

    ͜ͷͱ͖ʹݹ͍Ωϟογϡ͸ࣺͯΔ • CacheStorageΛ෼͚͓ͯ͘ ਤ͸ https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ ΑΓ
  7. ΦϑϥΠϯΩϟογϡ࡞੒λΠϛϯά • Ξηοτྨ → ServiceWorkerͷinstall࣌ • ͦͷଞ → Ϣʔβʔ͕ΦϑϥΠϯԽཁٻ࣌ •

    ϚϯΨͷϖʔδͷը૾ɾϏϡʔϫʔϖʔδͷHTML • ͜ͷͱ͖ʹݖݶ΍Ӿཡظݶɺ༰ྔͷ໰୊͕ແ͍͔ͳͲΛݕূ͢ Δ
  8. ΦϑϥΠϯͰಡΊΔ࿩ͷҰཡΛఏڙ͢Δ • localStorage vs IndexedDB • खܰ͞ͷͨΊʹlocalStorageΛબ୒ • IndexedDBͰ͋Ε͹SWͷίϯςΩετ͔ΒͰ΋ΞΫηεՄೳ •

    SW͔Β͸ݟΕͳ͍ͷͰɺྫ͑͹ը૾ͱ࿩ͷඥ͚ͮ৘ใΛLS͔ΒಘΔͱ͔͸ग़དྷͳ͍ • ಡΊΔظݶͳͲ΋͜͜ʹೖ͍ͬͯΔ • ΦϯϥΠϯ࣌ʹJSONΛऔಘͯ͠ಉظͤͯ͞ݕূ͍ͯ͠Δ