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
660
オフライン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.6k
Think About Front-end Web Development with Rust
likr
2
540
Yewにおけるoff-the-main-thread
likr
1
770
行政事業レビューデータの可視化 / 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
510
20190707Ionic_Meetup.pdf
likr
0
450
About the end of the web
likr
2
530
Other Decks in Technology
See All in Technology
あなたの知らない OneDrive
murachiakira
0
190
Amazon Bedrock AgentCore でプロモーション用動画生成エージェントを開発する
nasuvitz
6
340
PFEM Online Feature Flag @ newmo
shinyaishitobi
2
260
人を動かすことについて考える
ichimichi
2
230
GCASアップデート(202506-202508)
techniczna
0
230
[OCI Technical Deep Dive] OCIで生成AIを活用するためのソリューション解説(2025年8月5日開催)
oracle4engineer
PRO
0
130
React Server ComponentsでAPI不要の開発体験
polidog
PRO
1
360
R-SCoRe: Revisiting Scene Coordinate Regression for Robust Large-Scale Visual Localization
takmin
0
330
GitHub Copilot coding agent を推したい / AIDD Nagoya #1
tnir
0
200
Telemetry APIから学ぶGoogle Cloud ObservabilityとOpenTelemetryの現在 / getting-started-telemetry-api-with-google-cloud
k6s4i53rx
0
170
ウォンテッドリーのアラート設計と Datadog 移行での知見
donkomura
0
250
.NET開発者のためのAzureの概要
tomokusaba
0
190
Featured
See All Featured
BBQ
matthewcrist
89
9.8k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Site-Speed That Sticks
csswizardry
10
780
How to train your dragon (web standard)
notwaldorf
96
6.2k
A better future with KSS
kneath
239
17k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Automating Front-end Workflow
addyosmani
1370
200k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
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͍͍ͧ