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
49
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
6.1k
What’s FullStory?
annasu
0
120
serverless - send email and update status
annasu
0
79
PWA 應用與價值
annasu
0
81
初探 DevOps 的世界
annasu
0
220
Why Redux-Observable?
annasu
0
47
2016 PIXNET HACKATHON Lightning talk - 做網站不是只有一個人的事
annasu
0
71
Other Decks in Technology
See All in Technology
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
120
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
390
Sansan Engineering Unit 紹介資料
sansan33
PRO
1
3k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
200
RDS の負荷が高い場合に AWS で取りうる具体策 N 連発/a-series-of-specific-countermeasures-available-on-aws-when-rds-is-under-high-load
emiki
3
2.1k
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
200
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
350
アイテムレビュー機能導入からの学びと改善
zozotech
PRO
0
170
Introduction to Bill One Development Engineer
sansan33
PRO
0
300
Introduction to Sansan Meishi Maker Development Engineer
sansan33
PRO
0
310
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.6k
Featured
See All Featured
The Language of Interfaces
destraynor
162
25k
What's in a price? How to price your products and services
michaelherold
246
12k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Navigating Team Friction
lara
190
15k
Making Projects Easy
brettharned
120
6.4k
Done Done
chrislema
185
16k
How STYLIGHT went responsive
nonsquared
100
5.8k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
115
20k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
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