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.3k
ウェブアプリケーションがオフラインでも動作できるようにやっていった話 / 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
120
「夏フェス」をヒントに新しいカンファレンスを考えてみた at 函館市電LT
pastak
3
490
「アクセシビリティを始めたい!」から1年、あれからどうなったのか。
pastak
2
160
「アクセシビリティを始めたい!」から1年、あれからどうなったのか。 〜LTバージョン〜
pastak
1
890
【2024年最新】「エンジニアお茶会」という取り組みについて
pastak
1
450
UserAgentに依存した分岐を捨てられるか (または何故捨てられていないのか)
pastak
4
4.5k
開発組織外の他業種も巻き込んでアクセシビリティに関する機運を高めつつある話
pastak
0
740
手を動かして始めるアクセシビリティ改善
pastak
3
1.7k
Gyazoの開発の進め方/devlove-kansai2018-10-29 #DevKan
pastak
1
1.9k
Other Decks in Technology
See All in Technology
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
380
本当に使える?AutoUpgrade の新機能を実践検証してみた
oracle4engineer
PRO
1
120
IIWレポートからみるID業界で話題のMCP
fujie
0
730
AI技術トレンド勉強会 #1MCPの基礎と実務での応用
nisei_k
1
240
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
150
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
570
JSX - 歴史を振り返り、⾯⽩がって、エモくなろう
pal4de
3
1.1k
エンジニア向け技術スタック情報
kauche
0
110
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
130
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
4
1.7k
ObsidianをMCP連携させてみる
ttnyt8701
2
140
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
170
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Unsuck your backbone
ammeep
671
58k
Typedesign – Prime Four
hannesfritz
42
2.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Cult of Friendly URLs
andyhume
79
6.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
Embracing the Ebb and Flow
colly
86
4.7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
34k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
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ϲ݄ޙʹΞϧόΠτͰϚϯΨϏϡʔϫʔॻ͘͜ͱʹͳͬͨͷͰ͋ͬͨ