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
38
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
2k
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
73
PWA 應用與價值
annasu
0
78
初探 DevOps 的世界
annasu
0
210
Why Redux-Observable?
annasu
0
42
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事
annasu
0
68
Other Decks in Technology
See All in Technology
Model Mondays S2E03: SLMs & Reasoning
nitya
0
240
Github Copilot エージェントモードで試してみた
ochtum
0
140
解析の定理証明実践@Lean 4
dec9ue
1
210
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
2.3k
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
1
1.7k
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
3
620
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
180
Core Audio tapを使ったリアルタイム音声処理のお話
yuta0306
0
160
ハッカソン by 生成AIハッカソンvol.05
1ftseabass
PRO
0
150
KubeCon + CloudNativeCon Japan 2025 に行ってきた! & containerd の新機能紹介
honahuku
0
120
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
520
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
160
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
A Modern Web Designer's Workflow
chriscoyier
694
190k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Designing for humans not robots
tammielis
253
25k
Become a Pro
speakerdeck
PRO
28
5.4k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
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