ウェブアプリケーションがオフラインでも動作できるようにやっていった話 / 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)
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ϲ݄ޙʹΞϧόΠτͰϚϯΨϏϡʔϫʔॻ͘͜ͱʹͳͬͨͷͰ͋ͬͨ