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.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
510
20190707Ionic_Meetup.pdf
likr
0
440
About the end of the web
likr
2
530
Other Decks in Technology
See All in Technology
オブザーバビリティプラットフォーム開発におけるオブザーバビリティとの向き合い / Hatena Engineer Seminar #34 オブザーバビリティの実現と運用編
arthur1
0
270
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
12
2.3k
Perlアプリケーションで トレースを実装するまでの 工夫と苦労話
masayoshi
1
330
AI コードレビューが面倒すぎるのでテスト駆動開発で解決しようとして読んだら、根本的に俺の勘違いだった
mutsumix
0
140
AIエージェントを支える設計
tkikuchi1002
12
2.9k
経理出身PdMがAIプロダクト開発を_ハンズオンで学んだ話.pdf
shunsukenarita
1
280
Unson OS|48時間で「売れるか」を判定する AI 市場検証プラットフォーム
unson
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
210
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
810
ファインディにおける Dataform ブランチ戦略
hiracky16
0
250
【2025 Japan AWS Jr. Champions Ignition】点から線、線から面へ〜僕たちが起こすコラボレーション・ムーブメント〜
amixedcolor
1
110
Datasets for Critical Operations by Dataform
kimujun
0
150
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Automating Front-end Workflow
addyosmani
1370
200k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
730
Agile that works and the tools we love
rasmusluckow
329
21k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
KATA
mclloyd
31
14k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Statistics for Hackers
jakevdp
799
220k
Thoughts on Productivity
jonyablonski
69
4.8k
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͍͍ͧ