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

Transcript

1. Pasta-K
   pasta0915@gmail.com
   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