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
420
LT: JavaScript / HTML カルトクイズ
pastak
0
130
「夏フェス」をヒントに新しいカンファレンスを考えてみた at 函館市電LT
pastak
3
510
「アクセシビリティを始めたい!」から1年、あれからどうなったのか。
pastak
2
170
「アクセシビリティを始めたい!」から1年、あれからどうなったのか。 〜LTバージョン〜
pastak
1
920
【2024年最新】「エンジニアお茶会」という取り組みについて
pastak
1
480
UserAgentに依存した分岐を捨てられるか (または何故捨てられていないのか)
pastak
4
4.6k
開発組織外の他業種も巻き込んでアクセシビリティに関する機運を高めつつある話
pastak
0
770
手を動かして始めるアクセシビリティ改善
pastak
3
1.8k
Other Decks in Technology
See All in Technology
WebアプリケーションのUI構築で気を付けてるポイント
tomokusaba
0
160
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
260
Pythonによる契約プログラミング入門 / PyCon JP 2025
7pairs
4
2.2k
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
hogelog
3
1.3k
stupid jj tricks
indirect
0
7.5k
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
180
新卒QAエンジニアの成長戦略
qatonchan
0
300
kaigi_on_rails_2025_設計.pdf
nay3
8
4k
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
840
CData MCP ナイト!「CData × Oracleで実現する新しいデータ活用 ― 国産SaaS 連携から MCP Server for Oracle Database まで」
shisyu_gaku
0
190
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
110
AIを導⼊しても、 開発⽣産性は"爆増"していない なぜ?
kinosuke01
4
3.6k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
139
7.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Unsuck your backbone
ammeep
671
58k
Designing for Performance
lara
610
69k
Optimizing for Happiness
mojombo
379
70k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
950
Code Review Best Practice
trishagee
72
19k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Building an army of robots
kneath
306
46k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Making Projects Easy
brettharned
118
6.4k
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ϲ݄ޙʹΞϧόΠτͰϚϯΨϏϡʔϫʔॻ͘͜ͱʹͳͬͨͷͰ͋ͬͨ