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
オフラインWebアプリの仕組み
Search
Yosuke Onoue
April 14, 2018
Technology
1
650
オフラインWebアプリの仕組み
Ionic Meetup Nagoya #1のLT発表資料です。
Yosuke Onoue
April 14, 2018
Tweet
Share
More Decks by Yosuke Onoue
See All by Yosuke Onoue
ネットワーク可視化の世界
likr
7
6.5k
Think About Front-end Web Development with Rust
likr
2
530
Yewにおけるoff-the-main-thread
likr
1
760
行政事業レビューデータの可視化 / Visualization of Japan's National Budget with JUDGIT!
likr
1
230
モダンJavaScript再入門 / Re-introduction to Modern JavaScript
likr
24
11k
Web-based Data Visualization with Rust and WebAssembly
likr
4
5.8k
Introduction to Graph Drawing
likr
0
500
20190707Ionic_Meetup.pdf
likr
0
440
About the end of the web
likr
2
530
Other Decks in Technology
See All in Technology
OPENLOGI Company Profile
hr01
0
67k
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
14k
LangSmith×Webhook連携で実現するプロンプトドリブンCI/CD
sergicalsix
1
210
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
360
生まれ変わった AWS Security Hub (Preview) を紹介 #reInforce_osaka / reInforce New Security Hub
masahirokawahara
0
440
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
yoshikiiida
1
15k
MUITにおける開発プロセスモダナイズの取り組みと開発生産性可視化の取り組みについて / Modernize the Development Process and Visualize Development Productivity at MUIT
muit
1
15k
asken AI勉強会(Android)
tadashi_sato
0
180
AI専用のリンターを作る #yumemi_patch
bengo4com
5
4.1k
怖くない!はじめてのClaude Code
shinya337
0
380
品質と速度の両立:生成AI時代の品質保証アプローチ
odasho
1
220
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
910
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
4 Signs Your Business is Dying
shpigford
184
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Cult of Friendly URLs
andyhume
79
6.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Why Our Code Smells
bkeepers
PRO
337
57k
Documentation Writing (for coders)
carmenintech
72
4.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Transcript
ΦϑϥΠϯ8FCΞϓϦͷΈ ͓ͷ͏͑ *POJD.FFUVQ/BHPZB ݄ ͜ͷεϥΠυͷ63- IUUQCJUMZ*4Z1
ࣗݾհ w ඌ্༸հ :PTVLF0OPVF w ຊେֶจཧֶ෦ใՊֶՊॿڭ w ՄࢹԽɺ࠷దԽɺΞϧΰϦζϜͷݚڀ w
*POJDΞϯν w ϚΠϒʔϜ w -JHIUIPVTFͰຬΛࢦ͢
8FCαΠτ ωοτ͕ͳͯ͘ ݟΕΔ࣌
ΦϑϥΠϯ8FCΞϓϦ w ωοτ͕͍ɺෆ௨ͳॴͰ͑Δ8FCΞϓϦ w Լɺτϯωϧͷதɺաૄɺൃల్্ࠃɺӉɺʜ w 1SPHSFTTJWF8FC"QQT 18" ͷཁ݅ͷҰͭ w
18"$IFDLMJTU IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWFXFCBQQTDIFDLMJTU w -JHIUIPVTF IUUQTDISPNFHPPHMFDPNXFCTUPSFEFUBJMMJHIUIPVTFCMJQNEDPOMLQJOFGFIONKBNNGKQNQCKL w ࡞ͬͨ w IUUQTFHSJEKQ
ΦϑϥΠϯ8FCΞϓϦΛࢧ͑Δٕज़ w ϒϥβετϨʔδ w 8FC4UPSBHF TFTTJPO4UPSBHFMPDBM4UPSBHF w *OEFYFE%# w
ΦϑϥΠϯΩϟογϡ w 4FSWJDF8PSLFS $BDIF"1* w ͦͷଞ w /BWJHBUPS0O-JOF w #BDLHSPVOE4ZOD
ΦϑϥΠϯ8FCΞϓϦΛࢧ͑Δٕज़ w ϒϥβετϨʔδ w 8FC4UPSBHF TFTTJPO4UPSBHFMPDBM4UPSBHF w *OEFYFE%# w
ΦϑϥΠϯΩϟογϡ w 4FSWJDF8PSLFS $BDIF"1* w ͦͷଞ w /BWJHBUPS0O-JOF w #BDLHSPVOE4ZOD
"QQ4IFMMΞʔΩςΫνϟͷస 8FCϖʔδ )5.-$44+4 αʔόʔαΠυ ΫϥΠΞϯταΠυ %# ίϯςϯπ )5.-$44+4 Ωϟογϡ ैདྷͷ8FCΞϓϦ
"QQ4IFMM 5FNQMBUF 8FCϖʔδ Precache Runtime Cache
4FSWJDF8PSLFS w ωοτϫʔΫϦΫΤετͷϑοΫॲཧ w ΦϑϥΠϯΩϟογϡ w 1SFDBDIF3VOUJNF$BDIF w ϓογϡ௨ w
#BDLHSPVOE4ZOD w ʜ
4FSWJDF8PSLFSʹΑΔΩϟογϡ ίϯςϯπ )5.-$44+4 Ωϟογϡ 8FCϖʔδ Precache Runtime Cache Ωϟογϡ w
1SFDBDIF w 8FCΞϓϦʹඞཁͳϑΝΠϧΛ 4FSWJDF8PSLFSొ࣌ʹΩϟογϡ w 3VOUJNF$BDIF w ίϯςϯπɺը૾ΛඞཁʹԠͯ͡Ωϟογϡ
4FSWJDF8PSLFSΛॻ͘ w ੜ w :PVS'JSTU1SPHSFTTJWF8FC"QQ IUUQTEFWFMPQFSTHPPHMFDPNXFCGVOEBNFOUBMTDPEFMBCTZPVSpSTUQXBQQ w TXQSFBDBDIFTXUPPMT w
8FCΞϓϦͷΦϑϥΠϯԽʹඞཁͳॲཧͷఏڙ w 8PSLCPY w TXQSFDBDIFTXUPPMTΛΑΓ͍͘͢ߴػೳʹ
8PSLCPY IUUQTEFWFMPQFSTHPPHMFDPNXFCUPPMTXPSLCPY
4FSWJDF8PSLFSͷੜ w XPSLCPYDMJ w XPSLCPYίϚϯυ w XPSLCPYCVJME w /PEFKTHVMQ͔Βར༻ w
XPSLCPYXFCQBDLQMVHJO w XFCQBDLϓϥάΠϯ w XBUDIɺ8FCQBDL%FW4FSWFSରԠ
4FSWJDF8PSLFSͷੜ w XPSLCPYDMJ w XPSLCPYίϚϯυ w XPSLCPYCVJME w /PEFKTHVMQ͔Βར༻ w
XPSLCPYXFCQBDLQMVHJO w XFCQBDLϓϥάΠϯ w XBUDIɺ8FCQBDL%FW4FSWFSରԠ
XPSLCPYXFCQBDLQMVHJO const WorkboxPlugin = require('workbox-webpack-plugin') module.exports = { plugins: [
new WorkboxPlugin.GenerateSW({ swDest: 'sw.js', globDirectory: './public', globPatterns: [ '*.{html,css,js}' ], globIgnores: [ '_redirects', 'bundle.js', 'sw.js' ], navigateFallback: '/index.html' }) ] }
4FSWJDF8PSLFSͷొ if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then((registration) => {
}).catch(() => { }) }
·ͱΊ w 8FCΞϓϦΦϑϥΠϯͰಈ࣌͘ w ͜Ε·Ͱͷ8FCͷৗࣝɺΞϓϦͷৗࣝΛݟͦ͏ w *POJD͚͕ͩ18"ͷબࢶͰͳ͍ w 8PSLCPY͍͍ͧ