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
PWA 與 Service Worker
Search
Anna Su
January 23, 2017
Technology
0
48
PWA 與 Service Worker
2017/1/23
@ F2E&RGBA Meetup
Anna Su
January 23, 2017
Tweet
Share
More Decks by Anna Su
See All by Anna Su
從 Styled System 看下一代 CSS 技術
annasu
2
2.1k
We need a better UI component library - Styled System
annasu
0
6k
What’s FullStory?
annasu
0
110
serverless - send email and update status
annasu
0
79
PWA 應用與價值
annasu
0
81
初探 DevOps 的世界
annasu
0
220
Why Redux-Observable?
annasu
0
46
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事
annasu
0
71
Other Decks in Technology
See All in Technology
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
220
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
140
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
180
AWSにおけるTrend Vision Oneの効果について
shimak
0
130
BtoBプロダクト開発の深層
16bitidol
0
340
PLaMoの事後学習を支える技術 / PFN LLMセミナー
pfn
PRO
9
3.8k
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
250
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
150
LLMアプリケーション開発におけるセキュリティリスクと対策 / LLM Application Security
flatt_security
7
1.9k
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
280
VCC 2025 Write-up
bata_24
0
180
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
173
14k
Bash Introduction
62gerente
615
210k
The Cult of Friendly URLs
andyhume
79
6.6k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
114
20k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Gamification - CAS2011
davidbonilla
81
5.5k
Become a Pro
speakerdeck
PRO
29
5.5k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Speed Design
sergeychernyshev
32
1.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Transcript
PWA & Service Worker Anna Su 1
Anna Su 獮ᒒૡ纷䒍 綮ਮ螸 PIXNET 2 About me
Why PWA? What's PWA? What's Service Workers Making A Service
Worker 3 Agenda
PWA 4 Why
5 What’s Wrong?
What’s Wrong with Web ? Slow mobile network User-unfriendly 6
What’s Wrong with Web ? Slow mobile network 7 53%
3s
What’s Wrong with Web ? User-unfriendly 8 Splash Screen push
notifications
What’s Wrong with App ? High cost Difficultly share 9
What’s Wrong with App ? High cost 10 iOS Windows
Android
What’s Wrong with App ? Difficultly share 11 from Alex
Russell in Chrome Dev Summit 2015 1 month 25 100+ App Web
What’s Wrong with App ? 12 Alex Russell in Chrome
Dev Summit 2015 ignite online & comScore
13
PWA 14 What’s Progressive Web App
15 Reliable Fast Engaging Reliable
What’s PWA ? Reliable 16
What’s PWA ? Fast 17
What’s PWA ? Engaging 18
Chrome Dev Summit 2014 [github] How does the PWA looks
like 19
20
Service Workers 21 What’s
22 What’s Service Workers ?
What’s Service Workers ? 23
24 What’s Service Workers ?
Service Workers Lifecycle 25
Making A Service Worker 26
27 Making A Service Workers design @Don
simple-pwa-demo PWA To-Do List with Vanilla JS (sw-precache) (sw-precache-webpack-plugin) PWA
To-Do List with React/Redux 28 @Octocat Making A Service Workers code review -Jerry Hong
Getting Started with Service Workers 29
Registering the Service Worker Setting up the Default Cache Clearing
Old Cache Handling Fetch Requests 30 Making A Service Workers
31 Register install activate fetch Making A Service Workers Register
Registering the Service Worker
Registering the Service Worker 32 <script> if ('serviceWorker' in navigator)
{ navigator.serviceWorker.register('/sw.js') .then(reg => console.log('SW registered!', reg)) .catch(err => console.log('Error!', err)); } </script> index.html <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(reg => console.log('SW registered!', reg)) .catch(err => console.log('Error!', err)); } </script> <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(reg => console.log('SW registered!', reg)) .catch(err => console.log('Error!', err)); } </script> <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(reg => console.log('SW registered!', reg)) .catch(err => console.log('Error!', err)); } </script> <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(reg => console.log('SW registered!', reg)) .catch(err => console.log('Error!', err)); } </script> <script> if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js') .then(reg => console.log('SW registered!', reg)) .catch(err => console.log('Error!', err)); } </script>
33 Register install activate fetch Making A Service Workers Register
Service Worker Lifecycle install activate fetch
Getting Started with Service Workers 34 // install self.addEventListener('install', event
=> { console.log('installing…'); }); // activate self.addEventListener('activate', event => { console.log('now ready to handle fetches!'); }); // fetch self.addEventListener('fetch', event => { console.log('now fetch!'); }); sw.js
35 Register install activate fetch Setting up the Default Cache
Making A Service Workers
Setting up the Default Cache 36 sw.js const filesToCache =
[ '/', '/assets/images/btn_check.png', '/assets/images/btn_del.png', '/assets/images/ic_add.png', '/assets/images/logo_todo.png', '/src/main.css', '/index.html' ]; const cacheName = 'todolist-v1';
Setting up the Default Cache 37 sw.js // install self.addEventListener('install',
event => { console.log('installing…'); event.waitUntil( caches.open(cacheName).then(cache => { // console.log('Caching app ok'); return cache.addAll(filesToCache); }) ); }); // install self.addEventListener('install', event => { console.log('installing…'); event.waitUntil( caches.open(cacheName).then(cache => { // console.log('Caching app ok'); return cache.addAll(filesToCache); }) ); }); // install self.addEventListener('install', event => { console.log('installing…'); event.waitUntil( caches.open(cacheName).then(cache => { // console.log('Caching app ok'); return cache.addAll(filesToCache); }) ); }); // install self.addEventListener('install', event => { console.log('installing…'); event.waitUntil( caches.open(cacheName).then(cache => { // console.log('Caching app ok'); return cache.addAll(filesToCache); }) ); }); // install self.addEventListener('install', event => { console.log('installing…'); event.waitUntil( caches.open(cacheName).then(cache => { // console.log('Caching app ok'); return cache.addAll(filesToCache); }) ); });
38 Register install activate fetch Clearing Old Cache Making A
Service Workers
` 39 // activate self.addEventListener('activate', event => { console.log('now ready
to handle fetches!'); event.waitUntil( caches.keys().then(function(cacheNames) { var promiseArr = cacheNames.map(function(item) { if (item !== cacheName) { // Delete that cached file return caches.delete(item); } }) return Promise.all(promiseArr); }) ); // end e.waitUntil }); sw.js // activate self.addEventListener('activate', event => { console.log('now ready to handle fetches!'); event.waitUntil( caches.keys().then(function(cacheNames) { var promiseArr = cacheNames.map(function(item) { if (item !== cacheName) { // Delete that cached file return caches.delete(item); } }) return Promise.all(promiseArr); }) ); // end e.waitUntil }); // activate self.addEventListener('activate', event => { console.log('now ready to handle fetches!'); event.waitUntil( caches.keys().then(function(cacheNames) { var promiseArr = cacheNames.map(function(item) { if (item !== cacheName) { // Delete that cached file return caches.delete(item); } }) return Promise.all(promiseArr); }) ); // end e.waitUntil }); // activate self.addEventListener('activate', event => { console.log('now ready to handle fetches!'); event.waitUntil( caches.keys().then(function(cacheNames) { var promiseArr = cacheNames.map(function(item) { if (item !== cacheName) { // Delete that cached file return caches.delete(item); } }) return Promise.all(promiseArr); }) ); // end e.waitUntil }); // activate self.addEventListener('activate', event => { console.log('now ready to handle fetches!'); event.waitUntil( caches.keys().then(function(cacheNames) { var promiseArr = cacheNames.map(function(item) { if (item !== cacheName) { // Delete that cached file return caches.delete(item); } }) return Promise.all(promiseArr); }) ); // end e.waitUntil });
40 Register install activate fetch Handling Fetch Requests Making A
Service Workers
41 <script> const list = document.getElementById('list'); // 矑茐咳蝑 request fetch('http://localhost:3000/people')
.then(res => { return res.json(); }) .then(json => { list.innerHTML = json .map(item => `<li>${item.name}</li>`) .join(''); }) </script> index.html Handling Fetch Requests
Handling Fetch Requests 42 self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request)
.then(function(response) { return response || fetch(event.request) .then(res => caches.open(dataCacheName) .then(function(cache) { cache.put(event.request, res.clone()); return res; }) ); }) ); }); sw.js self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(function(response) { return response || fetch(event.request) .then(res => caches.open(dataCacheName) .then(function(cache) { cache.put(event.request, res.clone()); return res; }) ); }) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(function(response) { return response || fetch(event.request) .then(res => caches.open(dataCacheName) .then(function(cache) { cache.put(event.request, res.clone()); return res; }) ); }) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(function(response) { return response || fetch(event.request) .then(res => caches.open(dataCacheName) .then(function(cache) { cache.put(event.request, res.clone()); return res; }) ); }) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(function(response) { return response || fetch(event.request) .then(res => caches.open(dataCacheName) .then(function(cache) { cache.put(event.request, res.clone()); return res; }) ); }) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(function(response) { return response || fetch(event.request) .then(res => caches.open(dataCacheName) .then(function(cache) { cache.put(event.request, res.clone()); return res; }) ); }) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(function(response) { return response || fetch(event.request) .then(res => caches.open(dataCacheName) .then(function(cache) { cache.put(event.request, res.clone()); return res; }) ); }) ); }); self.addEventListener('fetch', event => { event.respondWith( caches.match(event.request) .then(function(response) { return response || fetch(event.request) .then(res => caches.open(dataCacheName) .then(function(cache) { cache.put(event.request, res.clone()); return res; }) ); }) ); });
43
44
Learn more? 45
46
47
48
49
50
傶Ջ讕襑ᥝ PWA? Ջ讕ฎ PWA? Service Work 墋Օ Registering the Service
Worker Setting up the Default Cache Clearing Old Cache Handling Fetch Requests 䋿֢ PWA To-Do List - 氥纈盃旰Ԫ殻竃㻌 51 2017 iT 螸䒻盜裡Ո搴ᒍ
ref https://huangxuan.me/pwa-qcon2016/#/ https://medium.com/lets-grow-business/why- progressive-web-app-31dd11d9a925#.zb3d2m1jv https://igniteonline.com.au/why-progressive-web- apps-beat-native-apps-hands-down/ 52
ref images http://ninetailsfoxchan.deviantart.com/art/Sad- Png-by-NFC-304044918 http://mrmen.wikia.com/wiki/File:Mr._All- Goes_Wrong.PNG https://goo.gl/022j4n https://www.labnol.org/software/chrome-offline- dinosaur-game/28781/ 53
Thanks 眤蘛肔肯 54