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
How Community Opened Global Doors
hiroramos4
PRO
1
130
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
570
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
280
"サービスチーム" での技術選定 / Making Technology Decisions for the Service Team
kaminashi
1
200
OpenHands🤲にContributeしてみた
kotauchisunsun
1
480
Model Mondays S2E03: SLMs & Reasoning
nitya
0
220
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
320
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
300
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
290
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
230
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
990
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.2k
Featured
See All Featured
Fireside Chat
paigeccino
37
3.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
A Tale of Four Properties
chriscoyier
160
23k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
How GitHub (no longer) Works
holman
314
140k
GitHub's CSS Performance
jonrohan
1031
460k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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