Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ウェブアプリケーションがオフラインでも動作できるようにやっていった話 / ServiceWor...
Search
pastak
September 29, 2018
Technology
0
1.2k
ウェブアプリケーションがオフラインでも動作できるようにやっていった話 / ServiceWorker for Offline WebApp in MANGA Viewer
pastak
September 29, 2018
Tweet
Share
More Decks by pastak
See All by pastak
LT: JavaScript / HTML カルトクイズ
pastak
0
75
「夏フェス」をヒントに新しいカンファレンスを考えてみた at 函館市電LT
pastak
3
460
「アクセシビリティを始めたい!」から1年、あれからどうなったのか。
pastak
2
130
「アクセシビリティを始めたい!」から1年、あれからどうなったのか。 〜LTバージョン〜
pastak
1
850
【2024年最新】「エンジニアお茶会」という取り組みについて
pastak
1
430
UserAgentに依存した分岐を捨てられるか (または何故捨てられていないのか)
pastak
4
4.2k
開発組織外の他業種も巻き込んでアクセシビリティに関する機運を高めつつある話
pastak
0
710
手を動かして始めるアクセシビリティ改善
pastak
3
1.7k
Gyazoの開発の進め方/devlove-kansai2018-10-29 #DevKan
pastak
1
1.9k
Other Decks in Technology
See All in Technology
AIエージェント完全に理解した
segavvy
4
260
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略
ryu955
2
250
20250326_管理ツールの権限管理で改善したこと
sasata299
1
370
技術的負債を正しく理解し、正しく付き合う #phperkaigi / PHPerKaigi 2025
shogogg
7
1.8k
パスキーでのログインを 実装してみよう!
hibiki_cube
0
650
パスキー導入の課題と ベストプラクティス、今後の展望
ritou
7
1.2k
問題解決に役立つ数理工学
recruitengineers
PRO
7
2k
コード品質向上で得られる効果と実践的取り組み
ham0215
2
200
Tirez profit de Messenger pour améliorer votre architecture
tucksaun
1
130
[CATS]Amazon Bedrock GenUハンズオン座学資料 #2 GenU環境でRAGを体験してみよう
tsukuboshi
0
140
ISUCONにPHPで挑み続けてできるようになっ(てき)たこと / phperkaigi2025
blue_goheimochi
0
140
Cloud Native PG 使ってみて気づいたことと最新機能の紹介 - 第52回PostgreSQLアンカンファレンス
seinoyu
1
180
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
22
2.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Why Our Code Smells
bkeepers
PRO
336
57k
Done Done
chrislema
183
16k
Optimising Largest Contentful Paint
csswizardry
35
3.2k
Typedesign – Prime Four
hannesfritz
41
2.6k
Transcript
Pasta-K
[email protected]
2018/09/29 at Ԭࢁ (Y8 in ) ΣϒΞϓϦέʔγϣϯ͕ ΦϑϥΠϯͰಈ࡞͢ΔΑ͏ʹ
͍ͬͯͬͨ v 1.1.0(2018/10/04)
Pasta-K / @pastak
• ژେֶֶ෦ใֶՊ ܭࢉػՊֶίʔε6ճੜ • KMC ݩใ • Nota Inc Gyazo։ൃνʔϜ
ΞϧόΠτ • JavaScript / React / Ruby on Rails • Browser Extension • גࣜձࣾͯͳ ΞϧόΠτ • TypeScript
• ژେֶֶ෦ใֶՊ ܭࢉػՊֶίʔε6ճੜ • KMC ݩใ • Nota Inc Gyazo։ൃνʔϜ
ΞϧόΠτ • JavaScript / React / Ruby on Rails • Browser Extension • גࣜձࣾͯͳ ΞϧόΠτ • TypeScript
Supported by && We are hiring!!
࣍ • ΣϒΞϓϦέʔγϣϯΛΦϑϥΠϯରԠ͢ΔͨΊʹඞཁͳ͜ͱ • ServiceWorkerʹ͍ͭͯ • Ωϟογϯάઓུߟʹ͍ͭͯ • ։ൃதʹૺ۰ͨ͠ΞϨϠίϨϠͷ͝հ
ϚϯΨϏϡʔϫʔΛ࡞͍ͬͯ·͢ • GigaViewerͱ͍͏໊લ • ΣϒαΠτͰͷϚϯΨӾཡʹಛԽ͍ͯ͠Δ • ϚϯΨϏϡʔϫʔҎ֎ʹϝσΟΞຖͷτοϓϖʔδίϯςϯπͳͲͷཧը໘ ͍࣋ͬͯΔ • ৄ͘͠
id:tkzwtks ͷʮͯͳͱWebϚϯΨαʔϏεͷาΈʯ* Λ • ʮͱͳΓͷϠϯάδϟϯϓʯͳͲݱࡏ6αΠτͰར༻͞Ε͍ͯΔ *: https://speakerdeck.com/tkzwtks/hatena-engineer-seminar-10
GigaViewerͷΦϑϥΠϯରԠ • ʮͱͳΓͷϠϯάδϟϯϓʯͰར༻Ͱ ͖ΔΑ͏ʹͳΓ·ͨ͠ • http://tonarinoyj.hatenablog.com/ entry/2018/09/27/165752 • ࠓ͜ͷΛ͠·͢
ࠓճͷΦϑϥΠϯରԠཁ݅ • τοϓϖʔδͳͲݟΕͳͯ͘ྑ͍ • ସʹͳΔΦϑϥΠϯͰಡΊΔͷҰཡ͕͋ΕOK • ϏϡʔϫʔϖʔδΛΩϟογϡͯ͠ಡΊΔΑ͏ʹ͢Δɻ͜ͷͱ͖ը૾ͳͲҰॹʹΩϟογϡ ʹࡌͤΔɻ • ԿΛಡΊΔΑ͏ʹ͢Δ͔Ϣʔβʔ͕બ͢Δ
• Ұఆͷظ͕ؒͬͯ͘Δͱফ͑ΔʢͣͬͱʹΓଓ͚Δ͜ͱͳ͍ʣ • ΞϓϦέʔγϣϯͷಛͱͯ͠(ࠓճͷରൣғʹ)POSTͷΤϯυϙΠϯτແ͍
ΣϒΞϓϦέʔγϣϯΛ ΦϑϥΠϯରԠ͢ΔͨΊʹ ඞཁͳ͜ͱ
ԿΛ͢Εྑ͍ͷ͔ • ͍ͬͯ͘ؾ࣋ͪΛߴΊΔ • HTTPSରԠ͢Δ • ServiceWorkerΔ • ϢʔβʔͷڥʹΩϟογϡΛஔ͘ •
ԿΛ͢Εྑ͍ͷ͔ • ͍ͬͯ͘ؾ࣋ͪΛߴΊΔ • HTTPSରԠ͢Δ • ServiceWorkerΔ • ϢʔβʔͷڥʹΩϟογϡΛஔ͘ •
ߴ·ͬͯ·͔͢ʁ )5514Ͱ͢ΑͶʁ
ԿΛ͢Εྑ͍ͷ͔ • ͍ͬͯ͘ؾ࣋ͪΛߴΊΔ • HTTPSରԠ͢Δ • ServiceWorkerΔ • ϢʔβʔͷڥʹΩϟογϡΛஔ͘ •
ServiceWorkerʹ͍ͭͯ
ServiceWorkerͱ > Service Worker ϒϥβ͕ Web ϖʔδͱผʹόοΫάϥϯ υͰ࣮ߦ͢ΔεΫϦϓτͰɺWeb ϖʔδϢʔβͷΠϯλϥΫγϣ ϯΛඞཁͱ͠ͳ͍ػೳΛ
Web ʹͨΒ͠·͢ɻ* > Service Worker ϓϩάϥϜՄೳͳωοτϫʔΫϓϩΩγͰ͢ɻ* *: https://developers.google.com/web/fundamentals/primers/service-workers/
ServiceWorkerͱ • JSͰهड़ͯ͠ɺϢʔβʔʹఏڙ͢ΔϓϩΩγͩͱࢥ͑ྑ͍ • ͍ͭͰʹPUSH௨όοΫάϥϯυಉظͳͲ͋Δ • JavaScript Workerͷ1छͳͷͰDOMʹΞΫηεͰ͖ͳ͍ (postMessageͰΓͱΓ͢Δ) •
HTTPSඞਢ
ServiceWorker͕ແ͍ͱ͖ ΞϓϦέʔγϣϯ ωοτϫʔΫ Ωϟογϡ
ServiceWorker͕ແ͍ͱ͖ ΞϓϦέʔγϣϯ ωοτϫʔΫ Ωϟογϡ ͲͪΒΛͲ͏͏͔ )551ϔομʔͳͲ͔Β ϒϥβ͕ܾఆ͢Δ
ServiceWorker͕͋Δͱ͖ ΞϓϦέʔγϣϯ Service Worker ωοτϫʔΫ Ωϟογϡ
ServiceWorker͕͋Δͱ͖ ΞϓϦέʔγϣϯ Service Worker ωοτϫʔΫ Ωϟογϡ ΞϓϦέʔγϣϯ௨৴ͷઌ͕ Ͳ͏ͳ͍ͬͯΔ͔Λҙࣝ͢Δඞཁ͕ͳ͍ ௨৴ΛͲ͏ॲཧ͢Δ͔48ʹҠৡ
ServiceWorker͕͋Δͱ͖ ΞϓϦέʔγϣϯ Service Worker ωοτϫʔΫ Ωϟογϡ Ͳ͏ذͤ͞Δ͔ +BWB4DSJQUͰ هड़͓ͯ͘͠
ServiceWorkerͰΔ͜ͱ • ΦϑϥΠϯͰΞϓϦέʔγϣϯ͕ಈ࡞͢ΔͨΊʹඞཁͳωοτϫʔ Ϋ௨৴ͷ݁ՌΛฦ͢ඞཁ͕͋Δ • ωοτϫʔΫΛϓϩΩγͯ͠ྑ͍ײ͡ʹΩϟογϡ(·ͨμϛʔ· ͨϦμΠϨΫτ)Λฦ͢ • چདྷͷΩϟογϡςΫχοΫ͑ͳ͍ͷͰɺJSͰؤு͍ͬͯ͘
ServiceWorkerΛϢʔβʔͷڥʹొ͢Δ
SWͰΩϟογϡฦͨ͠ΓՃͨ͠Γ͢Δ
Ωϟογϯάઓུߟʹ͍ͭͯ
ΦϑϥΠϯΞϓϦέʔγϣϯͷΩϟογϡ • ΦϑϥΠϯͷ࣌جຊతʹશͯͷϦιʔεΛΩϟογϡ͔Β࣋ͬͯ͘Δ ඞཁ͕͋Δ • ͭ·ΓΞϓϦέʔγϣϯ͕(ΦϑϥΠϯͰ)ಈ࡞͢Δͱ͖ɺৗʹશͯͷඞ ཁͳϦιʔεΩϟογϡ͞Ε͍ͯΔ͜ͱ͕ٻΊΒΕΔ • ඞཁͳϦιʔεΛͲͷλΠϛϯάͰͲ͏ͬͯΩϟογϡʹࡌͤΔ͔ɺ ΦϯϥΠϯͷͱ͖ͷSWͷৼΔ͍ΛͲ͏͢Δ͔ʹ͍ͭͯݕ౼ɾઃܭ͢
Δඞཁ͕͋Δ
Service WorkerͷΩϟογϡ • લఏͱͯ͠SWͷΩϟογϡඇৗʹڧྗ • HTTP headerΛͬͨΩϟογϡϨϕϧͷࢦఆͳͲޮ͔ͳ͍ • ҰΩϟογϡͨ͠ͷΛฦ͢Α͏ͳঢ়ଶʹͳΔͱαʔϏεଆ͔Βखग़͠Λ؆୯ʹग़དྷͳ͘ͳͬ ͯ͠·͍͔Ͷͳ͍
• CDNͷ߹CDN্ͷΩϟογϡΛඈͨ͠Γग़དྷΔ͕ɺҰSW͕Πϯετʔϧ͞ΕΔͱ؆୯ ʹΞϓϦέʔγϣϯ͔ΒมߋͰ͖ͳ͍ʢSWεΫϦϓτͷߋ৽ͳͲ͕ඞཁʹͳΔʣ • Կ͔͠ΒΞϓϦέʔγϣϯଆ͔ΒϢʔβʔڥͷCacheStorageΛ;ͬඈ͢ํ๏Λ͓࣋ͬͯ͘ͱྑ ͍͔ʢcacheStorageʹΫϥΠΞϯτଆ͔ΒSW͔ΒΞΫηεͰ͖Δ)
ϦιʔεΩϟογϡͷར༻࣌ͷઓུ • ΩϟογϡϑΝʔετ • جຊతʹશͯͷΩϟογϡΛ͍࣋ͬͯΔͷͰ͍ • ωοτϫʔΫϑΝʔετ • ϦιʔεΛ࠷৽ͷঢ়ଶʹอ͍ͪ͢ͷͰ҆શ •
έʔεόΠέʔεͰؤுΔ • ্ͷ2ͭͷΠΠτίυϦΛ͍ͨ͠!!!!!!!!!! JSͰؤுΔ
ΠΠτίυϦ͢Δͧ • ಉҰURLͰߋ৽ස͕͍(or ߋ৽͞ΕΔͱURL͕มΘΔ)ͷΦϯ ϥΠϯ࣌ͰͲΜͲΜΩϟογϡʹدͤΔ • ߋ৽සͷߴ͍ͷΦϯϥΠϯ࣌ωοτϫʔΫ͔Β࣋ͬͯ͘Δ ํʹدͤΔ • ෆཁʹͳͬͨΩϟογϡྑ͍ײ͡ʹഁغ͢Δ
• ↑Λग़དྷΔΑ͏ʹϧʔϧΛΜͰ͍͘
GigaViewerͷΦϑϥΠϯΩϟογϡ࣮ • install / activete࣌ʹ༧ΊΩϟογϡ • ΞΠίϯը૾ͳͲͷΞηοτྨ • JSCSSͳͲ •
͜ͷͱ͖ʹݹ͍ΩϟογϡࣺͯΔ • CacheStorageΛ͚͓ͯ͘ ਤ https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ ΑΓ
install࣌ʹΩϟογϡΛ༻ҙ activate࣌ʹݹ͍ͷΛഁغ
GigaViewerͷΦϑϥΠϯΩϟογϡ࣮ • ϚϯΨͷը૾ʹؔͯ͠URL͕Ұҙ ͳͷͰɺϢʔβʔ͕ϖʔδΛ࣮ࡍʹ ಡΉͳͲͨ͠߹ͰҰ௨৴ͨ͠ ΒҎޙΩϟογϡʹࡌͤͯɺͦΕ Λ͏ • ΦϑϥΠϯҎ֎ͷͱ͖Ͱωοτ ϫʔΫΛޮԽͰ͖ΔΑ͏ʹ
ਤ https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ ΑΓ
GigaViewerͷΦϑϥΠϯΩϟογϡ࣮ • ϚϯΨͷը૾ʹؔͯ͠URL͕Ұҙ ͳͷͰɺϢʔβʔ͕ϖʔδΛ࣮ࡍʹ ಡΉͳͲͨ͠߹ͰҰ௨৴ͨ͠ ΒҎޙΩϟογϡʹࡌͤͯɺͦΕ Λ͏ • ΦϑϥΠϯҎ֎ͷͱ͖Ͱωοτ ϫʔΫΛޮԽͰ͖ΔΑ͏ʹ
ਤ https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ ΑΓ ༰ྔͷ߹ͳͲ͕͋Γ ͜ͷ࡞ઓࢭΊ·ͨ͠ (ৄࡉޙड़)
GigaViewerͷΦϑϥΠϯΩϟογϡ࣮ • ωοτϫʔΫ͕ΦϯϥΠϯͷͱ͖HTML/ JS/CSSωοτϫʔΫ͔Βऔಘ͢Δ • Ωϟογϡ͍ͯ͠Δͷͷ҆શଆʹ ͍ͯ͠Δ • ಛʹHTMLΦϑϥΠϯͰ͋Δͱ͖Ҏ֎ ΩϟογϡΛར༻͠ͳ͍ʢͦͦ
Ωϟογϡ͍ͯ͠ͳ͍ʣ ਤ https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ ΑΓ
ΦϑϥΠϯΩϟογϡ࡞λΠϛϯά • Ξηοτྨ → ServiceWorkerͷinstall࣌ • ͦͷଞ → Ϣʔβʔ͕ΦϑϥΠϯԽཁٻ࣌ •
ϚϯΨͷϖʔδͷը૾ɾϏϡʔϫʔϖʔδͷHTML • ͜ͷͱ͖ʹݖݶӾཡظݶɺ༰ྔͷ͕ແ͍͔ͳͲΛݕূ͢ Δ
Cache APIʹ͍ͭͯ • CacheStorageΛѻ͏JSͷAPIʹؔͯ͠ServiceWorker্Ͱ ɺΫϥΠΞϯτͷJS͔ΒΞΫηεͰ͖Δ • ϦιʔεͷՃআͳͲ͕ωοτϫʔΫfetchҎ֎ͷϢʔβʔ ΞΫγϣϯΛىҼ͢Δ߹ΫϥΠΞϯταΠυͰͬͯ͠· ͏ͷख
ԿΛ͢Εྑ͍ͷ͔ • ͍ͬͯ͘ؾ࣋ͪΛߴΊΔ • HTTPSରԠ͢Δ • ServiceWorkerΔ • ϢʔβʔͷڥʹΩϟογϡΛஔ͘ •
ԿΛ͢Εྑ͍ͷ͔ • ͍ͬͯ͘ؾ࣋ͪΛߴΊΔ • HTTPSରԠ͢Δ • ServiceWorkerΔ • ϢʔβʔͷڥʹΩϟογϡΛஔ͘ •
օ͞Μग़དྷΔΑ͏ʹ ͳΓ·ͨ͠Ͷʁ
ԿΛ͢Εྑ͍ͷ͔ • ͍ͬͯ͘ؾ࣋ͪΛߴΊΔ • HTTPSରԠ͢Δ • ServiceWorkerΔ • ϢʔβʔͷڥʹΩϟογϡΛஔ͘ •
વ͏͕ Է͞ͳ͍
։ൃதʹૺ۰ͨ͠ ΞϨϠίϨϠͷ͝հ
ΦϑϥΠϯͰಡΊΔͷҰཡΛఏڙ͢Δ • localStorage vs IndexedDB • खܰ͞ͷͨΊʹlocalStorageΛબ • IndexedDBͰ͋ΕSWͷίϯςΩετ͔ΒͰΞΫηεՄೳ •
SW͔ΒݟΕͳ͍ͷͰɺྫ͑ը૾ͱͷඥ͚ͮใΛLS͔ΒಘΔͱ͔ग़དྷͳ͍ • ಡΊΔظݶͳͲ͜͜ʹೖ͍ͬͯΔ • ΦϯϥΠϯ࣌ʹJSONΛऔಘͯ͠ಉظͤͯ͞ݕূ͍ͯ͠Δ
ΦϑϥΠϯͰݟΕͳ͍ϖʔδରࡦ • Response.redirect()Λฦͯ͠ϦμΠϨΫτ͢Δ • ྫ͑ΦϑϥΠϯ༻ͷτοϓϖʔδͳͲΛ༻ҙͯ͠ࣄલʹΩϟο γϡ͓͍ͯͯ͠ɺͦͷURLʹϦμΠϨΫτ • طଘͷϖʔδΛͬͨΓͯ͠ྑ͍Ͱ͢Ͷ
ΦϑϥΠϯͷ߹ϦμΠϨΫτ͢Δ
ΦϑϥΠϯఆʹ͍ͭͯ • ΦϑϥΠϯͷͱ͖͚ͩredirect͢Δͱ͔Γ͍ͨͰ͢ΑͶ • navigator.onLineͰϒϥβ͕ΦϯϥΠϯ͔Ͳ͏͔औΕΔ • iOSͷSafari͜Ε͕ৗʹtrue • https://bugs.webkit.org/show_bug.cgi?id=171277 •
ΦϑϥΠϯͰ͋Δ͜ͱΛΔ͜ͱ͕ग़དྷͳ͍ • ௨৴ͯ͠ΈΔ͔͠ແ͍
อଘՄೳ༰ྔʹ͍ͭͯ • Safari͚ͩۃʹগͳ͍(ଞͷϒϥβ΄΅ແ੍ݶͳͷʹରͯ͠ɺ Safari50MBఔʹݟ͑Δ) • navigator.storage.estimate ར༻Մೳ༰ྔͱར༻தͷ༰ྔΛ֬ೝՄೳ • ͜ͷAPIΛSafariະ࣮ͳͷͰɺΩϟογϡΛอଘͯ͠Έͯ༰ྔ ա͍ͯ͠ΔͱɺQuotaExceededError͕ฦͬͯ͘ΔͷͰྑ͠ͳʹ͢Δ
։ൃڥ • MS EdgeͰWorkerεΫϦϓτΛऔಘ͢Δͱ͖ʹcredential͕ ༩Ͱ͖ͳ͍ͷͰؾΛ͚ͭ·͠ΐ͏ • https://developer.microsoft.com/en-us/microsoft-edge/ platform/issues/17360912/ • ྫ͑ɺBasicೝূcookieೝূͳͲͰक͍ͬͯΔڥ্Ͱͷݕ
ূͳͲ͕ࠔʹͳΔ
։ൃڥ • ։ൃ༻ͷhostͷͱ͖͚ͩBasicೝূcookieೝূͷͨΊʹɺcredentialΛޙ͚ ͢Δ߹ • fetchΠϕϯτͰऔͬͨRequestΦϒδΣΫτ͍ճͤͳ͍ • Request.clone()Ͱෳ͢Δͱ͑Δ • Request.credentialsreadonlyͳͷͰखͰΦϒδΣΫτΛ࡞Γ͍ͯ͠Δ…
• ͜ΕͬͯͳΜͱ্͔ख͘ग़དྷͨΓ͠·ͤΜ͔Ͷ
ΩϟογϡετϨʔδͷΞΫηε • ૉʹ࣮͢Δͱ1ͭͷΩϟογϡετϨʔδΛ͍ճ͢͜ͱʹͳ Δ • ओʹChromeͰɺΩϟογϡετϨʔδͷϦιʔε͕૿͑Δͱɺ Ϧιʔεͷ2ఔϨεϙϯε͕͘ͳΔݱ͕͋Δ • https://bugs.chromium.org/p/chromium/issues/detail? id=682677
ΩϟογϡετϨʔδͷΞΫηε • ΩϟογϡετϨʔδʹ400݅΄ͲϦιʔε͕ೖ͍ͬͯΔঢ়ଶ
ΩϟογϡετϨʔδͷΞΫηε • ΩϟογϡετϨʔδʹ400݅΄ͲϦιʔε͕ೖ͍ͬͯΔঢ়ଶ Ϧιʔεͷऔಘʹҟ༷ʹ࣌ؒ ͕͔͔͍ͬͯΔ
ΩϟογϡετϨʔδͷΞΫηε • ΩϟογϡετϨʔδʹ400݅΄ͲϦιʔε͕ೖ͍ͬͯΔঢ়ଶ 4FSWJDF8PSLFS͔Βͷ ϨεϙϯεΛͪଓ͚͍ͯΔ
ΩϟογϡετϨʔδͷΞΫηε • ରࡦͱͯ͠ͳΜΒ͔ͷنଇͰΩϟογϡετϨʔδΛ͚Δ • ΞηοτͱͦΕҎ֎(ΩϟογϡλΠϛϯάͰ͚Δ) • ֤ͷմͳͲͰ͚Δ(CSຖ·ͱΊͯআͰ͖ͯศར) • ͜ͷͱ͖ʹLSʹใΛೖΕ͍ͯͨͷͰɺͱը૾ͷରԠΛSWͰଈ࠲ʹ Εͳ͔ͬͨͷͰɺURL͔ΒదʹετϨʔδ໊Λੜͯ͠ৼΓ͚Δ͜ͱ
ʹͳͬͨ…
ΩϟογϡετϨʔδͷΞΫηε • CacheStorageͷόοΫΤϯυΛ࡞Γ͢ܭը͕͋ΔΑ͏ͳͷͰকདྷ తʹվળ͞Εͦ͏ʁ • https://bugs.chromium.org/p/chromium/issues/detail?id=886861 • ෆ֬ఆ͚ͩͲChrome73ʹೖΕ͍ͨͱ͍͏ײ͡Β͍͠ • VaryϔομʔͷରԠͷͨΊͰ͋ΔΒ͍͠
PWA? SPA? • ΣϒΞϓϦέʔγϣϯΛΦϑϥΠϯରԠͤ͞ΔͨΊʹPWASPA ʹରԠ͢Δඞཁͳ͍ • ΦϑϥΠϯରԠͳͲΛਐΊ͍ͯ͘ͱॴҦ"PWA"ʹͳ͍ͬͯ͘ • SPAʹͳ͍ͬͯΔͱViewͷΩϟογϡͳͲ͕खܰʹͳΔ •
ϧʔςΟϯάJSͰ͍ͬͯΔͷͰίϯτϩʔϧָ͕
·ͱΊ • ΣϒΞϓϦέʔγϣϯΛΦϑϥΠϯରԠͤ͞Δํ๏ʹ͍ͭͯɺGigaViewerʢϚϯΨ ϏϡʔϫʔʣΛྫʹհ͠·ͨ͠ • ͪΐͬͱͷServiceWorkerͱϦιʔεͷΩϟογϡ৴ઓུ͑͋͞ΕΦϑϥΠϯͰ Ϣʔβʔʹಧ͚ΒΕ·͢ • ؼΓͷ৽װઢͳͲͰʰ໌ͪΌΜͷηʔϥʔʱ(*1)ͳͲΦϑϥΠϯͰಡΜͰΈͯͩ͘ ͍͞ɻདྷ͠ͳͷ৽װઢͰʰੜͱࢮͷΩϣΧΠʱ(*2)ΛಡΈ·ͨ͠ɻ
• *1: https://tonarinoyj.jp/episode/13932016480028986061 • *2: https://tonarinoyj.jp/episode/13932016480029095338
ϒϥβٕज़ͰϚϯΨϏϡʔϫʔ Λྑ͍ͨ͘͠ਓ͓͍ͪͯ͠·͢!!!!!! ͜͜ʹʁͷϩΰೖΔ ͪͳΈʹࣗ͜ͷTweetͷ1ϲ݄ޙʹΞϧόΠτͰϚϯΨϏϡʔϫʔॻ͘͜ͱʹͳͬͨͷͰ͋ͬͨ