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
Helpfeelがアクセシビリティにどのように取り組み始めて、どこまで来れたのか/Helpfeel Accessibility 2025-07
pastak
3
370
LT: JavaScript / HTML カルトクイズ
pastak
0
120
「夏フェス」をヒントに新しいカンファレンスを考えてみた at 函館市電LT
pastak
3
500
「アクセシビリティを始めたい!」から1年、あれからどうなったのか。
pastak
2
160
「アクセシビリティを始めたい!」から1年、あれからどうなったのか。 〜LTバージョン〜
pastak
1
900
【2024年最新】「エンジニアお茶会」という取り組みについて
pastak
1
460
UserAgentに依存した分岐を捨てられるか (または何故捨てられていないのか)
pastak
4
4.5k
開発組織外の他業種も巻き込んでアクセシビリティに関する機運を高めつつある話
pastak
0
750
手を動かして始めるアクセシビリティ改善
pastak
3
1.7k
Other Decks in Technology
See All in Technology
KCD Lima: eBee in Peru!
lizrice
0
110
株式会社島津製作所_研究開発(集団協業と知的生産)の現場を支える、OSS知識基盤システムの導入
akahane92
1
1.3k
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
370
Tiptapで実現する堅牢で柔軟なエディター開発
kirik
1
150
マルチモーダル基盤モデルに基づく動画と音の解析技術
lycorptech_jp
PRO
2
260
自分がLinc’wellで提供しているプロダクトを理解するためにやったこと
murabayashi
1
170
公開初日に個人環境で試した Gemini CLI 体験記など / Gemini CLI実験レポート
you
PRO
3
610
From Live Coding to Vibe Coding with Firebase Studio
firebasethailand
1
310
DatabricksのOLTPデータベース『Lakebase』に詳しくなろう!
inoutk
0
160
Microsoft Learn MCP/Fabric データエージェント/Fabric MCP/Copilot Studio-簡単・便利なAIエージェント作ってみた -"Building Simple and Powerful AI Agents with Microsoft Learn MCP, Fabric Data Agent, Fabric MCP, and Copilot Studio"-
reireireijinjin6
1
150
SAE J1939シミュレーション環境構築
daikiokazaki
1
190
【2025 Japan AWS Jr. Champions Ignition】点から線、線から面へ〜僕たちが起こすコラボレーション・ムーブメント〜
amixedcolor
1
100
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
246
12k
The Language of Interfaces
destraynor
158
25k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Designing for humans not robots
tammielis
253
25k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
BBQ
matthewcrist
89
9.8k
How GitHub (no longer) Works
holman
314
140k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Visualization
eitanlees
146
16k
Embracing the Ebb and Flow
colly
86
4.8k
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ϲ݄ޙʹΞϧόΠτͰϚϯΨϏϡʔϫʔॻ͘͜ͱʹͳͬͨͷͰ͋ͬͨ