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. Pasta-K
    [email protected]
    2018/09/29 at Ԭࢁ৓ (Y8 in ৓)
    ΢ΣϒΞϓϦέʔγϣϯ͕
    ΦϑϥΠϯͰ΋ಈ࡞͢ΔΑ͏ʹ
    ΍͍ͬͯͬͨ࿩
    v 1.1.0(2018/10/04)

    View Slide

  2. Pasta-K / @pastak

    View Slide

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

    View Slide

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

    View Slide

  5. Supported by && We are hiring!!

    View Slide

  6. ໨࣍
    • ΢ΣϒΞϓϦέʔγϣϯΛΦϑϥΠϯରԠ͢ΔͨΊʹඞཁͳ͜ͱ
    • ServiceWorkerʹ͍ͭͯ
    • Ωϟογϯάઓུߟʹ͍ͭͯ
    • ։ൃதʹૺ۰ͨ͠ΞϨϠίϨϠͷ͝঺հ

    View Slide

  7. ϚϯΨϏϡʔϫʔΛ࡞͍ͬͯ·͢
    • GigaViewerͱ͍͏໊લ
    • ΢ΣϒαΠτͰͷϚϯΨӾཡʹಛԽ͍ͯ͠Δ
    • ϚϯΨϏϡʔϫʔҎ֎ʹ΋ϝσΟΞຖͷτοϓϖʔδ΍ίϯςϯπͳͲͷ؅ཧը໘
    ΋͍࣋ͬͯΔ
    • ৄ͘͠͸ id:tkzwtks ͷʮ͸ͯͳͱWebϚϯΨαʔϏεͷาΈʯ* Λ
    • ʮͱͳΓͷϠϯάδϟϯϓʯͳͲݱࡏ6αΠτͰར༻͞Ε͍ͯΔ
    *: https://speakerdeck.com/tkzwtks/hatena-engineer-seminar-10

    View Slide

  8. GigaViewerͷΦϑϥΠϯରԠ
    • ʮͱͳΓͷϠϯάδϟϯϓʯͰར༻Ͱ
    ͖ΔΑ͏ʹͳΓ·ͨ͠
    • http://tonarinoyj.hatenablog.com/
    entry/2018/09/27/165752
    • ࠓ೔͸͜ͷ࿩Λ͠·͢

    View Slide

  9. ࠓճͷΦϑϥΠϯରԠཁ݅
    • τοϓϖʔδͳͲ͸ݟΕͳͯ͘΋ྑ͍
    • ୅ସʹͳΔΦϑϥΠϯͰಡΊΔ࿩ͷҰཡ͕͋Ε͹OK
    • ϏϡʔϫʔϖʔδΛΩϟογϡͯ͠ಡΊΔΑ͏ʹ͢Δɻ͜ͷͱ͖ը૾ͳͲ΋ҰॹʹΩϟογϡ
    ʹࡌͤΔɻ
    • ԿΛಡΊΔΑ͏ʹ͢Δ͔͸Ϣʔβʔ͕બ୒͢Δ
    • Ұఆͷظ͕ؒ΍ͬͯ͘Δͱফ͑Δʢͣͬͱ୺຤ʹ࢒Γଓ͚Δ͜ͱ͸ͳ͍ʣ
    • ΞϓϦέʔγϣϯͷಛ௃ͱͯ͠(ࠓճͷର৅ൣғʹ͸)POSTͷΤϯυϙΠϯτ͸ແ͍

    View Slide

  10. ΢ΣϒΞϓϦέʔγϣϯΛ
    ΦϑϥΠϯରԠ͢ΔͨΊʹ
    ඞཁͳ͜ͱ

    View Slide

  11. ԿΛ͢Ε͹ྑ͍ͷ͔
    • ΍͍ͬͯ͘ؾ࣋ͪΛߴΊΔ
    • HTTPSରԠ͢Δ
    • ServiceWorker഑Δ
    • Ϣʔβʔͷ؀ڥʹΩϟογϡΛஔ͘
    • ׬੒

    View Slide

  12. ԿΛ͢Ε͹ྑ͍ͷ͔
    • ΍͍ͬͯ͘ؾ࣋ͪΛߴΊΔ
    • HTTPSରԠ͢Δ
    • ServiceWorker഑Δ
    • Ϣʔβʔͷ؀ڥʹΩϟογϡΛஔ͘
    • ׬੒
    ߴ·ͬͯ·͔͢ʁ
    )5514Ͱ͢ΑͶʁ

    View Slide

  13. ԿΛ͢Ε͹ྑ͍ͷ͔
    • ΍͍ͬͯ͘ؾ࣋ͪΛߴΊΔ
    • HTTPSରԠ͢Δ
    • ServiceWorker഑Δ
    • Ϣʔβʔͷ؀ڥʹΩϟογϡΛஔ͘
    • ׬੒

    View Slide

  14. ServiceWorkerʹ͍ͭͯ

    View Slide

  15. ServiceWorkerͱ͸
    > Service Worker ͸ϒϥ΢β͕ Web ϖʔδͱ͸ผʹόοΫάϥ΢ϯ
    υͰ࣮ߦ͢ΔεΫϦϓτͰɺWeb ϖʔδ΍ϢʔβͷΠϯλϥΫγϣ
    ϯΛඞཁͱ͠ͳ͍ػೳΛ Web ʹ΋ͨΒ͠·͢ɻ*
    > Service Worker ͸ϓϩάϥϜՄೳͳωοτϫʔΫϓϩΩγͰ͢ɻ*
    *: https://developers.google.com/web/fundamentals/primers/service-workers/

    View Slide

  16. ServiceWorkerͱ͸
    • JSͰهड़ͯ͠ɺϢʔβʔʹఏڙ͢ΔϓϩΩγͩͱࢥ͑͹ྑ͍
    • ͍ͭͰʹPUSH௨஌΍όοΫάϥ΢ϯυಉظͳͲ΋͋Δ
    • JavaScript Workerͷ1छͳͷͰDOMʹ͸ΞΫηεͰ͖ͳ͍
    (postMessageͰ΍ΓͱΓ͢Δ)
    • HTTPSඞਢ

    View Slide

  17. ServiceWorker͕ແ͍ͱ͖
    ΞϓϦέʔγϣϯ
    ωοτϫʔΫ
    Ωϟογϡ

    View Slide

  18. ServiceWorker͕ແ͍ͱ͖
    ΞϓϦέʔγϣϯ
    ωοτϫʔΫ
    Ωϟογϡ
    ͲͪΒΛͲ͏࢖͏͔͸
    )551ϔομʔͳͲ͔Β
    ϒϥ΢β͕ܾఆ͢Δ

    View Slide

  19. ServiceWorker͕͋Δͱ͖
    ΞϓϦέʔγϣϯ
    Service Worker
    ωοτϫʔΫ
    Ωϟογϡ

    View Slide

  20. ServiceWorker͕͋Δͱ͖
    ΞϓϦέʔγϣϯ
    Service Worker
    ωοτϫʔΫ
    Ωϟογϡ
    ΞϓϦέʔγϣϯ͸௨৴ͷઌ͕
    Ͳ͏ͳ͍ͬͯΔ͔Λҙࣝ͢Δඞཁ͕ͳ͍
    ௨৴ΛͲ͏ॲཧ͢Δ͔͸48ʹҠৡ

    View Slide

  21. ServiceWorker͕͋Δͱ͖
    ΞϓϦέʔγϣϯ
    Service Worker
    ωοτϫʔΫ
    Ωϟογϡ
    Ͳ͏෼ذͤ͞Δ͔͸
    +BWB4DSJQUͰ
    هड़͓ͯ͘͠

    View Slide

  22. ServiceWorkerͰ΍Δ͜ͱ
    • ΦϑϥΠϯͰΞϓϦέʔγϣϯ͕ಈ࡞͢ΔͨΊʹඞཁͳωοτϫʔ
    Ϋ௨৴ͷ݁ՌΛฦ͢ඞཁ͕͋Δ
    • ωοτϫʔΫΛϓϩΩγͯ͠ྑ͍ײ͡ʹΩϟογϡ(·ͨ͸μϛʔ·
    ͨ͸ϦμΠϨΫτ౳)Λฦ͢
    • چདྷͷΩϟογϡςΫχοΫ࢖͑ͳ͍ͷͰɺJSͰؤு͍ͬͯ͘

    View Slide

  23. ServiceWorkerΛϢʔβʔͷ؀ڥʹొ࿥͢Δ

    View Slide

  24. SWͰΩϟογϡฦͨ͠Γ௥Ճͨ͠Γ͢Δ

    View Slide

  25. Ωϟογϯάઓུߟʹ͍ͭͯ

    View Slide

  26. ΦϑϥΠϯΞϓϦέʔγϣϯͷΩϟογϡ
    • ΦϑϥΠϯͷ࣌͸جຊతʹશͯͷϦιʔεΛΩϟογϡ͔Β࣋ͬͯ͘Δ
    ඞཁ͕͋Δ
    • ͭ·ΓΞϓϦέʔγϣϯ͕(ΦϑϥΠϯͰ)ಈ࡞͢Δͱ͖ɺৗʹશͯͷඞ
    ཁͳϦιʔε͸Ωϟογϡ͞Ε͍ͯΔ͜ͱ͕ٻΊΒΕΔ
    • ඞཁͳϦιʔεΛͲͷλΠϛϯάͰͲ͏΍ͬͯΩϟογϡʹࡌͤΔ͔ɺ
    ΦϯϥΠϯͷͱ͖ͷSWͷৼΔ෣͍ΛͲ͏͢Δ͔ʹ͍ͭͯݕ౼ɾઃܭ͢
    Δඞཁ͕͋Δ

    View Slide

  27. Service WorkerͷΩϟογϡ
    • લఏͱͯ͠SWͷΩϟογϡ͸ඇৗʹڧྗ
    • HTTP headerΛ࢖ͬͨΩϟογϡϨϕϧͷࢦఆͳͲ͸ޮ͔ͳ͍
    • Ұ౓Ωϟογϡͨ͠΋ͷΛฦ͢Α͏ͳঢ়ଶʹͳΔͱαʔϏεଆ͔Β͸खग़͠Λ؆୯ʹ͸ग़དྷͳ͘ͳͬ
    ͯ͠·͍͔Ͷͳ͍
    • CDNͷ৔߹͸CDN্ͷΩϟογϡΛඈ͹ͨ͠Γग़དྷΔ͕ɺҰ౓SW͕Πϯετʔϧ͞ΕΔͱ؆୯
    ʹ͸ΞϓϦέʔγϣϯ͔ΒมߋͰ͖ͳ͍ʢSWεΫϦϓτͷߋ৽ͳͲ͕ඞཁʹͳΔʣ
    • Կ͔͠ΒΞϓϦέʔγϣϯଆ͔ΒϢʔβʔ؀ڥͷCacheStorageΛ;ͬඈ͹͢ํ๏Λ͓࣋ͬͯ͘ͱྑ
    ͍͔΋ʢcacheStorageʹ͸ΫϥΠΞϯτଆ͔Β΋SW͔Β΋ΞΫηεͰ͖Δ)

    View Slide

  28. ϦιʔεΩϟογϡͷར༻࣌ͷઓུ
    • ΩϟογϡϑΝʔετ
    • جຊతʹશͯͷΩϟογϡΛ͍࣋ͬͯΔͷͰ଎͍
    • ωοτϫʔΫϑΝʔετ
    • ϦιʔεΛ࠷৽ͷঢ়ଶʹอͪ΍͍͢ͷͰ҆શ
    • έʔεόΠέʔεͰؤுΔ
    • ্ͷ2ͭͷΠΠτίυϦΛ͍ͨ͠!!!!!!!!!! JSͰؤுΔ

    View Slide

  29. ΠΠτίυϦ͢Δͧ
    • ಉҰURLͰߋ৽ස౓͕௿͍(or ߋ৽͞ΕΔͱURL͕มΘΔ)΋ͷ͸Φϯ
    ϥΠϯ࣌Ͱ΋ͲΜͲΜΩϟογϡʹدͤΔ
    • ߋ৽ස౓ͷߴ͍΋ͷ͸ΦϯϥΠϯ࣌͸ωοτϫʔΫ͔Β࣋ͬͯ͘Δ
    ํʹدͤΔ
    • ෆཁʹͳͬͨΩϟογϡ͸ྑ͍ײ͡ʹഁغ͢Δ
    • ↑Λग़དྷΔΑ͏ʹϧʔϧΛ૊ΜͰ͍͘

    View Slide

  30. GigaViewerͷΦϑϥΠϯΩϟογϡ࣮૷
    • install / activete࣌ʹ༧ΊΩϟογϡ
    • ΞΠίϯը૾ͳͲͷΞηοτྨ
    • JS΍CSSͳͲ
    • ͜ͷͱ͖ʹݹ͍Ωϟογϡ͸ࣺͯΔ
    • CacheStorageΛ෼͚͓ͯ͘
    ਤ͸ https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ ΑΓ

    View Slide

  31. install࣌ʹΩϟογϡΛ༻ҙ
    activate࣌ʹݹ͍ͷΛഁغ

    View Slide

  32. GigaViewerͷΦϑϥΠϯΩϟογϡ࣮૷
    • ϚϯΨͷը૾ʹؔͯ͠͸URL͕Ұҙ
    ͳͷͰɺϢʔβʔ͕ϖʔδΛ࣮ࡍʹ
    ಡΉͳͲͨ͠৔߹Ͱ΋Ұ౓௨৴ͨ͠
    ΒҎޙ͸ΩϟογϡʹࡌͤͯɺͦΕ
    Λ࢖͏
    • ΦϑϥΠϯҎ֎ͷͱ͖Ͱ΋ωοτ
    ϫʔΫΛޮ཰ԽͰ͖ΔΑ͏ʹ
    ਤ͸ https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ ΑΓ

    View Slide

  33. GigaViewerͷΦϑϥΠϯΩϟογϡ࣮૷
    • ϚϯΨͷը૾ʹؔͯ͠͸URL͕Ұҙ
    ͳͷͰɺϢʔβʔ͕ϖʔδΛ࣮ࡍʹ
    ಡΉͳͲͨ͠৔߹Ͱ΋Ұ౓௨৴ͨ͠
    ΒҎޙ͸ΩϟογϡʹࡌͤͯɺͦΕ
    Λ࢖͏
    • ΦϑϥΠϯҎ֎ͷͱ͖Ͱ΋ωοτ
    ϫʔΫΛޮ཰ԽͰ͖ΔΑ͏ʹ
    ਤ͸ https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ ΑΓ
    ༰ྔͷ౎߹ͳͲ͕͋Γ
    ͜ͷ࡞ઓ͸ࢭΊ·ͨ͠
    (ৄࡉޙड़)

    View Slide

  34. GigaViewerͷΦϑϥΠϯΩϟογϡ࣮૷
    • ωοτϫʔΫ͕ΦϯϥΠϯͷͱ͖͸HTML/
    JS/CSS͸ωοτϫʔΫ͔Βऔಘ͢Δ
    • Ωϟογϡ͸͍ͯ͠Δ΋ͷͷ҆શଆʹ౗
    ͍ͯ͠Δ
    • ಛʹHTML͸ΦϑϥΠϯͰ͋Δͱ͖Ҏ֎
    ͸ΩϟογϡΛར༻͠ͳ͍ʢͦ΋ͦ΋
    Ωϟογϡ΋͍ͯ͠ͳ͍ʣ
    ਤ͸ https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ ΑΓ

    View Slide

  35. ΦϑϥΠϯΩϟογϡ࡞੒λΠϛϯά
    • Ξηοτྨ → ServiceWorkerͷinstall࣌
    • ͦͷଞ → Ϣʔβʔ͕ΦϑϥΠϯԽཁٻ࣌
    • ϚϯΨͷϖʔδͷը૾ɾϏϡʔϫʔϖʔδͷHTML
    • ͜ͷͱ͖ʹݖݶ΍Ӿཡظݶɺ༰ྔͷ໰୊͕ແ͍͔ͳͲΛݕূ͢
    Δ

    View Slide

  36. Cache APIʹ͍ͭͯ
    • CacheStorageΛѻ͏JSͷAPIʹؔͯ͠͸ServiceWorker্Ͱ
    ΋ɺΫϥΠΞϯτͷJS͔Β΋ΞΫηεͰ͖Δ
    • Ϧιʔεͷ௥Ճ΍࡟আͳͲ͕ωοτϫʔΫfetchҎ֎ͷϢʔβʔ
    ΞΫγϣϯΛىҼ͢Δ৔߹͸ΫϥΠΞϯταΠυͰ΍ͬͯ͠·
    ͏ͷ΋ख

    View Slide

  37. ԿΛ͢Ε͹ྑ͍ͷ͔
    • ΍͍ͬͯ͘ؾ࣋ͪΛߴΊΔ
    • HTTPSରԠ͢Δ
    • ServiceWorker഑Δ
    • Ϣʔβʔͷ؀ڥʹΩϟογϡΛஔ͘
    • ׬੒

    View Slide

  38. ԿΛ͢Ε͹ྑ͍ͷ͔
    • ΍͍ͬͯ͘ؾ࣋ͪΛߴΊΔ
    • HTTPSରԠ͢Δ
    • ServiceWorker഑Δ
    • Ϣʔβʔͷ؀ڥʹΩϟογϡΛஔ͘
    • ׬੒
    օ͞Μग़དྷΔΑ͏ʹ
    ͳΓ·ͨ͠Ͷʁ

    View Slide

  39. ԿΛ͢Ε͹ྑ͍ͷ͔
    • ΍͍ͬͯ͘ؾ࣋ͪΛߴΊΔ
    • HTTPSରԠ͢Δ
    • ServiceWorker഑Δ
    • Ϣʔβʔͷ؀ڥʹΩϟογϡΛஔ͘
    • ׬੒
    વ͏͸໰԰͕
    Է͞ͳ͍

    View Slide

  40. ։ൃதʹૺ۰ͨ͠
    ΞϨϠίϨϠͷ͝঺հ

    View Slide

  41. ΦϑϥΠϯͰಡΊΔ࿩ͷҰཡΛఏڙ͢Δ
    • localStorage vs IndexedDB
    • खܰ͞ͷͨΊʹlocalStorageΛબ୒
    • IndexedDBͰ͋Ε͹SWͷίϯςΩετ͔ΒͰ΋ΞΫηεՄೳ
    • SW͔Β͸ݟΕͳ͍ͷͰɺྫ͑͹ը૾ͱ࿩ͷඥ͚ͮ৘ใΛLS͔ΒಘΔͱ͔͸ग़དྷͳ͍
    • ಡΊΔظݶͳͲ΋͜͜ʹೖ͍ͬͯΔ
    • ΦϯϥΠϯ࣌ʹJSONΛऔಘͯ͠ಉظͤͯ͞ݕূ͍ͯ͠Δ

    View Slide

  42. ΦϑϥΠϯͰݟΕͳ͍ϖʔδରࡦ
    • Response.redirect()Λฦͯ͠ϦμΠϨΫτ͢Δ
    • ྫ͑͹ΦϑϥΠϯ༻ͷτοϓϖʔδͳͲΛ༻ҙͯ͠ࣄલʹΩϟο
    γϡ͓͍ͯͯ͠ɺͦͷURLʹϦμΠϨΫτ
    • طଘͷϖʔδΛ࢖ͬͨΓͯ͠΋ྑ͍Ͱ͢Ͷ

    View Slide

  43. ΦϑϥΠϯͷ৔߹͸ϦμΠϨΫτ͢Δ

    View Slide

  44. ΦϑϥΠϯ൑ఆʹ͍ͭͯ
    • ΦϑϥΠϯͷͱ͖͚ͩredirect͢Δͱ͔΍Γ͍ͨͰ͢ΑͶ
    • navigator.onLineͰϒϥ΢β͕ΦϯϥΠϯ͔Ͳ͏͔औΕΔ
    • iOSͷSafari͸͜Ε͕ৗʹtrue
    • https://bugs.webkit.org/show_bug.cgi?id=171277
    • ΦϑϥΠϯͰ͋Δ͜ͱΛ஌Δ͜ͱ͕ग़དྷͳ͍
    • ௨৴ͯ͠ΈΔ͔͠ແ͍

    View Slide

  45. อଘՄೳ༰ྔʹ͍ͭͯ
    • Safari͚ͩۃ୺ʹগͳ͍(ଞͷϒϥ΢β͸΄΅ແ੍ݶͳͷʹରͯ͠ɺ
    Safari͸໿50MBఔ౓ʹݟ͑Δ)
    • navigator.storage.estimate ར༻Մೳ༰ྔͱར༻தͷ༰ྔΛ֬ೝՄೳ
    • ͜ͷAPIΛSafari͸ະ࣮૷ͳͷͰɺΩϟογϡΛอଘͯ͠Έͯ༰ྔ௒
    ա͍ͯ͠ΔͱɺQuotaExceededError͕ฦͬͯ͘ΔͷͰྑ͠ͳʹ͢Δ

    View Slide

  46. ։ൃ؀ڥ
    • MS EdgeͰ͸WorkerεΫϦϓτΛऔಘ͢Δͱ͖ʹcredential͕෇
    ༩Ͱ͖ͳ͍ͷͰؾΛ͚ͭ·͠ΐ͏
    • https://developer.microsoft.com/en-us/microsoft-edge/
    platform/issues/17360912/
    • ྫ͑͹ɺBasicೝূ΍cookieೝূͳͲͰक͍ͬͯΔ؀ڥ্Ͱͷݕ
    ূͳͲ͕ࠔ೉ʹͳΔ

    View Slide

  47. ։ൃ؀ڥ
    • ։ൃ༻ͷhostͷͱ͖౳͚ͩBasicೝূ΍cookieೝূͷͨΊʹɺcredentialΛޙ෇͚
    ͢Δ৔߹
    • fetchΠϕϯτͰऔͬͨRequestΦϒδΣΫτ͸࢖͍ճͤͳ͍
    • Request.clone()Ͱෳ੡͢Δͱ࢖͑Δ
    • Request.credentials͸readonlyͳͷͰखͰΦϒδΣΫτΛ࡞Γ௚͍ͯ͠Δ…
    • ͜ΕͬͯͳΜͱ্͔ख͘ग़དྷͨΓ͠·ͤΜ͔Ͷ

    View Slide

  48. ΩϟογϡετϨʔδ΁ͷΞΫηε଎౓໰୊
    • ૉ๿ʹ࣮૷͢Δͱ1ͭͷΩϟογϡετϨʔδΛ࢖͍ճ͢͜ͱʹͳ
    Δ
    • ओʹChromeͰɺΩϟογϡετϨʔδ಺ͷϦιʔε਺͕૿͑Δͱɺ
    Ϧιʔε਺ͷ2৐ఔ౓Ϩεϙϯε͕஗͘ͳΔݱ৅͕͋Δ
    • https://bugs.chromium.org/p/chromium/issues/detail?
    id=682677

    View Slide

  49. ΩϟογϡετϨʔδ΁ͷΞΫηε଎౓໰୊
    • ΩϟογϡετϨʔδʹ400݅΄ͲϦιʔε͕ೖ͍ͬͯΔঢ়ଶ

    View Slide

  50. ΩϟογϡετϨʔδ΁ͷΞΫηε଎౓໰୊
    • ΩϟογϡετϨʔδʹ400݅΄ͲϦιʔε͕ೖ͍ͬͯΔঢ়ଶ
    Ϧιʔεͷऔಘʹҟ༷ʹ࣌ؒ
    ͕͔͔͍ͬͯΔ

    View Slide

  51. ΩϟογϡετϨʔδ΁ͷΞΫηε଎౓໰୊
    • ΩϟογϡετϨʔδʹ400݅΄ͲϦιʔε͕ೖ͍ͬͯΔঢ়ଶ
    4FSWJDF8PSLFS͔Βͷ
    ϨεϙϯεΛ଴ͪଓ͚͍ͯΔ

    View Slide

  52. ΩϟογϡετϨʔδ΁ͷΞΫηε଎౓໰୊
    • ରࡦͱͯ͠͸ͳΜΒ͔ͷنଇͰΩϟογϡετϨʔδΛ෼͚Δ
    • ΞηοτͱͦΕҎ֎(ΩϟογϡλΠϛϯάͰ෼͚Δ)
    • ֤࿩ͷմͳͲͰ෼͚Δ(CSຖ·ͱΊͯ࡟আͰ͖ͯศར)
    • ͜ͷͱ͖ʹLSʹ৘ใΛೖΕ͍ͯͨͷͰɺ࿩ͱը૾ͷରԠΛSWͰଈ࠲ʹ஌
    Εͳ͔ͬͨͷͰɺURL͔Βద౰ʹετϨʔδ໊Λੜ੒ͯ͠ৼΓ෼͚Δ͜ͱ
    ʹͳͬͨ…

    View Slide

  53. ΩϟογϡετϨʔδ΁ͷΞΫηε଎౓໰୊
    • CacheStorageͷόοΫΤϯυΛ࡞Γ௚͢ܭը͕͋ΔΑ͏ͳͷͰকདྷ
    తʹ͸վળ͞Εͦ͏ʁ
    • https://bugs.chromium.org/p/chromium/issues/detail?id=886861
    • ෆ֬ఆ͚ͩͲChrome73ʹ͸ೖΕ͍ͨͱ͍͏ײ͡Β͍͠
    • Varyϔομʔ΁ͷରԠͷͨΊͰ΋͋ΔΒ͍͠

    View Slide

  54. PWA? SPA?
    • ΢ΣϒΞϓϦέʔγϣϯΛΦϑϥΠϯରԠͤ͞ΔͨΊʹPWA΍SPA
    ʹରԠ͢Δඞཁ͸ͳ͍
    • ΦϑϥΠϯରԠͳͲΛਐΊ͍ͯ͘ͱॴҦ"PWA"ʹͳ͍ͬͯ͘
    • SPAʹͳ͍ͬͯΔͱViewͷΩϟογϡͳͲ͕खܰʹͳΔ
    • ϧʔςΟϯά΋JSͰ΍͍ͬͯΔͷͰίϯτϩʔϧָ͕

    View Slide

  55. ·ͱΊ
    • ΢ΣϒΞϓϦέʔγϣϯΛΦϑϥΠϯରԠͤ͞Δํ๏ʹ͍ͭͯɺGigaViewerʢϚϯΨ
    ϏϡʔϫʔʣΛྫʹ঺հ͠·ͨ͠
    • ͪΐͬͱͷServiceWorkerͱϦιʔεͷΩϟογϡ഑৴ઓུ͑͋͞Ε͹ΦϑϥΠϯͰ΋
    Ϣʔβʔʹಧ͚ΒΕ·͢
    • ؼΓͷ৽װઢͳͲͰʰ໌೔ͪΌΜͷηʔϥʔ෰ʱ(*1)ͳͲΦϑϥΠϯͰಡΜͰΈͯͩ͘
    ͍͞ɻ๻͸དྷ͠ͳͷ৽װઢͰʰੜͱࢮͷΩϣ΢ΧΠʱ(*2)ΛಡΈ·ͨ͠ɻ
    • *1: https://tonarinoyj.jp/episode/13932016480028986061
    • *2: https://tonarinoyj.jp/episode/13932016480029095338

    View Slide

  56. ϒϥ΢βٕज़ͰϚϯΨϏϡʔϫʔ
    Λྑ͍ͨ͘͠ਓ͓଴͍ͪͯ͠·͢!!!!!!
    ͜͜ʹʁͷϩΰೖΔ
    ͪͳΈʹࣗ෼͸͜ͷTweetͷ1ϲ݄ޙʹΞϧόΠτͰϚϯΨϏϡʔϫʔॻ͘͜ͱʹͳͬͨͷͰ͋ͬͨ

    View Slide