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
ウェブアプリケーションがオフラインでも動作できるようにやっていった話 / ServiceWorker for Offline WebApp in MANGA Viewer
Search
pastak
September 29, 2018
Technology
0
1k
ウェブアプリケーションがオフラインでも動作できるようにやっていった話 / ServiceWorker for Offline WebApp in MANGA Viewer
pastak
September 29, 2018
Tweet
Share
More Decks by pastak
See All by pastak
UserAgentに依存した分岐を捨てられるか (または何故捨てられていないのか)
pastak
4
1.8k
開発組織外の他業種も巻き込んでアクセシビリティに関する機運を高めつつある話
pastak
0
510
手を動かして始めるアクセシビリティ改善
pastak
3
1.4k
Gyazoの開発の進め方/devlove-kansai2018-10-29 #DevKan
pastak
1
1.7k
コミュニティが持続可能であるために考えておきたいこと/How to kill your community
pastak
0
2.8k
2018年の”JavaScript” 再入門/re-learning-about-js-in-2018
pastak
31
12k
ブラウザ拡張のクロスブラウザ対応についてどう向き合っているか #builderscon
pastak
3
3.5k
150人のOB会の主催をやった話 #yapcfukuoka #yapcjapan
pastak
0
2.4k
Webアプリケーションで 60fpsを(極力)目指す
pastak
19
9.9k
Other Decks in Technology
See All in Technology
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
3
770
Algyan イベント振り返り
linyixian
0
190
スタートアップの技術顧問を3年間続けて発生した事と気付き
biwakonbu
0
150
小さな開発会社がWebサービスを作る理由
polidog
PRO
1
150
LLM とプロンプトエンジニアリング/チューターをビルドする / LLM and Prompt Engineering and Building Tutors
ks91
PRO
0
220
Databricks におけるデータエンジニアリング
databricksjapan
0
370
ChatGPT for IT Service Management (IT Pro)
dahatake
2
110
Signals Unleashed: The Full Guide
rainerhahnekamp
0
360
転移学習とドメイン適応の基礎
kmatsui
2
570
Aurora MySQL v3(MySQL8.0互換)の オンラインDDLの罠挙動を全バージョンで検証した
yutakikai
1
150
Garoon 開発チーム / Garoon development team
cybozuinsideout
PRO
2
2.9k
疲弊しない!AWSセキュリティ統制の考え方 #devio_osakaday1
masahirokawahara
6
5.9k
Featured
See All Featured
KATA
mclloyd
14
12k
Building a Modern Day E-commerce SEO Strategy
aleyda
16
6.3k
The Pragmatic Product Professional
lauravandoore
24
5.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
24
2.3k
The Power of CSS Pseudo Elements
geoffreycrofte
59
5k
For a Future-Friendly Web
brad_frost
171
8.9k
Ruby is Unlike a Banana
tanoku
96
10k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
115
18k
Navigating Team Friction
lara
177
13k
Faster Mobile Websites
deanohume
297
30k
A Philosophy of Restraint
colly
196
16k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
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ϲ݄ޙʹΞϧόΠτͰϚϯΨϏϡʔϫʔॻ͘͜ͱʹͳͬͨͷͰ͋ͬͨ