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
6k
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
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
290
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
160
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
180
Adapty_東京AI祭ハッカソン2025ピッチスライド
shinoyamada
0
270
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
200
ユーザーの声とAI検証で進める、プロダクトディスカバリー
sansantech
PRO
1
130
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
720
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
450
Vibe Coding Year in Review. From Karpathy to Real-World Agents by Niels Rolland, CEO Paatch
vcoisne
0
120
Reflections of AI: A Trilogy in Four Parts (GOTO; Copenhagen 2025)
ondfisk
0
110
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
150
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
330
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Mobile First: as difficult as doing things right
swwweet
224
10k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Side Projects
sachag
455
43k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
30
2.7k
Typedesign – Prime Four
hannesfritz
42
2.8k
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