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

Transcript

1. Pasta-K [email protected] 2018/09/29 at Ԭࢁ৓ (Y8 in ৓) ΢ΣϒΞϓϦέʔγϣϯ͕ ΦϑϥΠϯͰ΋ಈ࡞͢ΔΑ͏ʹ

   ΍͍ͬͯͬͨ࿩ v 1.1.0(2018/10/04)

2. Pasta-K / @pastak

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

   ΞϧόΠτ • JavaScript / React / Ruby on Rails • Browser Extension • גࣜձࣾ͸ͯͳ ΞϧόΠτ • TypeScript

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

   ΞϧόΠτ • JavaScript / React / Ruby on Rails • Browser Extension • גࣜձࣾ͸ͯͳ ΞϧόΠτ • TypeScript

5. Supported by && We are hiring!!

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

7. ϚϯΨϏϡʔϫʔΛ࡞͍ͬͯ·͢ • GigaViewerͱ͍͏໊લ • ΢ΣϒαΠτͰͷϚϯΨӾཡʹಛԽ͍ͯ͠Δ • ϚϯΨϏϡʔϫʔҎ֎ʹ΋ϝσΟΞຖͷτοϓϖʔδ΍ίϯςϯπͳͲͷ؅ཧը໘ ΋͍࣋ͬͯΔ • ৄ͘͠͸

   id:tkzwtks ͷʮ͸ͯͳͱWebϚϯΨαʔϏεͷาΈʯ* Λ • ʮͱͳΓͷϠϯάδϟϯϓʯͳͲݱࡏ6αΠτͰར༻͞Ε͍ͯΔ *: https://speakerdeck.com/tkzwtks/hatena-engineer-seminar-10

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

9. ࠓճͷΦϑϥΠϯରԠཁ݅ • τοϓϖʔδͳͲ͸ݟΕͳͯ͘΋ྑ͍ • ୅ସʹͳΔΦϑϥΠϯͰಡΊΔ࿩ͷҰཡ͕͋Ε͹OK • ϏϡʔϫʔϖʔδΛΩϟογϡͯ͠ಡΊΔΑ͏ʹ͢Δɻ͜ͷͱ͖ը૾ͳͲ΋ҰॹʹΩϟογϡ ʹࡌͤΔɻ • ԿΛಡΊΔΑ͏ʹ͢Δ͔͸Ϣʔβʔ͕બ୒͢Δ

   • Ұఆͷظ͕ؒ΍ͬͯ͘Δͱফ͑Δʢͣͬͱ୺຤ʹ࢒Γଓ͚Δ͜ͱ͸ͳ͍ʣ • ΞϓϦέʔγϣϯͷಛ௃ͱͯ͠(ࠓճͷର৅ൣғʹ͸)POSTͷΤϯυϙΠϯτ͸ແ͍

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

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

    ׬੒

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

    ׬੒ ߴ·ͬͯ·͔͢ʁ
    )5514Ͱ͢ΑͶʁ

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

    ׬੒

14. ServiceWorkerʹ͍ͭͯ

15. ServiceWorkerͱ͸ > Service Worker ͸ϒϥ΢β͕ Web ϖʔδͱ͸ผʹόοΫάϥ΢ϯ υͰ࣮ߦ͢ΔεΫϦϓτͰɺWeb ϖʔδ΍ϢʔβͷΠϯλϥΫγϣ ϯΛඞཁͱ͠ͳ͍ػೳΛ

    Web ʹ΋ͨΒ͠·͢ɻ* > Service Worker ͸ϓϩάϥϜՄೳͳωοτϫʔΫϓϩΩγͰ͢ɻ* *: https://developers.google.com/web/fundamentals/primers/service-workers/

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

    HTTPSඞਢ

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

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

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

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

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

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

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

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

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

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

    Δඞཁ͕͋Δ

27. Service WorkerͷΩϟογϡ • લఏͱͯ͠SWͷΩϟογϡ͸ඇৗʹڧྗ • HTTP headerΛ࢖ͬͨΩϟογϡϨϕϧͷࢦఆͳͲ͸ޮ͔ͳ͍ • Ұ౓Ωϟογϡͨ͠΋ͷΛฦ͢Α͏ͳঢ়ଶʹͳΔͱαʔϏεଆ͔Β͸खग़͠Λ؆୯ʹ͸ग़དྷͳ͘ͳͬ ͯ͠·͍͔Ͷͳ͍

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

28. ϦιʔεΩϟογϡͷར༻࣌ͷઓུ • ΩϟογϡϑΝʔετ • جຊతʹશͯͷΩϟογϡΛ͍࣋ͬͯΔͷͰ଎͍ • ωοτϫʔΫϑΝʔετ • ϦιʔεΛ࠷৽ͷঢ়ଶʹอͪ΍͍͢ͷͰ҆શ •

    έʔεόΠέʔεͰؤுΔ • ্ͷ2ͭͷΠΠτίυϦΛ͍ͨ͠!!!!!!!!!! JSͰؤுΔ

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

    • ↑Λग़དྷΔΑ͏ʹϧʔϧΛ૊ΜͰ͍͘

30. GigaViewerͷΦϑϥΠϯΩϟογϡ࣮૷ • install / activete࣌ʹ༧ΊΩϟογϡ • ΞΠίϯը૾ͳͲͷΞηοτྨ • JS΍CSSͳͲ •

    ͜ͷͱ͖ʹݹ͍Ωϟογϡ͸ࣺͯΔ • CacheStorageΛ෼͚͓ͯ͘ ਤ͸ https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ ΑΓ

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

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

    ਤ͸ https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ ΑΓ

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

    ਤ͸ https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ ΑΓ ༰ྔͷ౎߹ͳͲ͕͋Γ ͜ͷ࡞ઓ͸ࢭΊ·ͨ͠ (ৄࡉޙड़)

34. GigaViewerͷΦϑϥΠϯΩϟογϡ࣮૷ • ωοτϫʔΫ͕ΦϯϥΠϯͷͱ͖͸HTML/ JS/CSS͸ωοτϫʔΫ͔Βऔಘ͢Δ • Ωϟογϡ͸͍ͯ͠Δ΋ͷͷ҆શଆʹ౗ ͍ͯ͠Δ • ಛʹHTML͸ΦϑϥΠϯͰ͋Δͱ͖Ҏ֎ ͸ΩϟογϡΛར༻͠ͳ͍ʢͦ΋ͦ΋

    Ωϟογϡ΋͍ͯ͠ͳ͍ʣ ਤ͸ https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ ΑΓ

35. ΦϑϥΠϯΩϟογϡ࡞੒λΠϛϯά • Ξηοτྨ → ServiceWorkerͷinstall࣌ • ͦͷଞ → Ϣʔβʔ͕ΦϑϥΠϯԽཁٻ࣌ •

    ϚϯΨͷϖʔδͷը૾ɾϏϡʔϫʔϖʔδͷHTML • ͜ͷͱ͖ʹݖݶ΍Ӿཡظݶɺ༰ྔͷ໰୊͕ແ͍͔ͳͲΛݕূ͢ Δ

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

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

    ׬੒

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

    ׬੒ օ͞Μग़དྷΔΑ͏ʹ ͳΓ·ͨ͠Ͷʁ

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

    ׬੒ વ͏͸໰԰͕ Է͞ͳ͍

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

41. ΦϑϥΠϯͰಡΊΔ࿩ͷҰཡΛఏڙ͢Δ • localStorage vs IndexedDB • खܰ͞ͷͨΊʹlocalStorageΛબ୒ • IndexedDBͰ͋Ε͹SWͷίϯςΩετ͔ΒͰ΋ΞΫηεՄೳ •

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

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

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

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

    ΦϑϥΠϯͰ͋Δ͜ͱΛ஌Δ͜ͱ͕ग़དྷͳ͍ • ௨৴ͯ͠ΈΔ͔͠ແ͍

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

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

    ূͳͲ͕ࠔ೉ʹͳΔ

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

    • ͜ΕͬͯͳΜͱ্͔ख͘ग़དྷͨΓ͠·ͤΜ͔Ͷ

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

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

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

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

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

    ʹͳͬͨ…

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

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

    ϧʔςΟϯά΋JSͰ΍͍ͬͯΔͷͰίϯτϩʔϧָ͕

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

    • *1: https://tonarinoyj.jp/episode/13932016480028986061 • *2: https://tonarinoyj.jp/episode/13932016480029095338

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