Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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 WindowsAndroid
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 EngagingReliable
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
...
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...
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')
...
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…');...
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....
Setting up the Default Cache
37
sw.js
// install
self.addEventListener('install', event => {
console.log('installing…');
e...
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...
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 => {
...
Handling Fetch Requests
42
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(...
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 Reque...
ref
https://huangxuan.me/pwa-qcon2016/#/
https://medium.com/lets-grow-business/why-
progressive-web-app-31dd11d9a925#.zb3d...
ref images
http://ninetailsfoxchan.deviantart.com/art/Sad-
Png-by-NFC-304044918
http://mrmen.wikia.com/wiki/File:Mr._All-
...
Thanks
54
Nächste SlideShare
Wird geladen in …5
×

PWA 與 Service Worker

4.304 Aufrufe

Veröffentlicht am

2017/01/23【F2E&RGBA Meetup】所分享的內容

簡介:
PWA (Progressive Web App) 是 Google 在 2015 年所提出的概念,2016 年我們開始看到許多 PWA 應用像是 The Washington Post、Flipkart、Gmail、AliExpress、Wikipedia、Flipboard、Booking 等實務案例,本次分享將介紹 PWA 與 HTML5 Offline API 搭配 Service Worker,讓我們的網站在離線的時候還能夠進行瀏覽,打造出更好的用戶體驗。

活動網址:
http://f2e.kktix.cc/events/f2e6-56d17c-0f9e5b-3997b7-a9203f-d684fd-886f38

Veröffentlicht in: Technologie
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

PWA 與 Service Worker

  1. 1. PWA & Service Worker Anna Su 1
  2. 2. Anna Su PIXNET 2 About me
  3. 3. Why PWA? What's PWA? What's Service Workers Making A Service Worker 3 Agenda
  4. 4. PWA 4 Why
  5. 5. 5 What’s Wrong?
  6. 6. What’s Wrong with Web ? Slow mobile network User-unfriendly 6
  7. 7. What’s Wrong with Web ? Slow mobile network 7 53% 3s
  8. 8. What’s Wrong with Web ? User-unfriendly 8 Splash Screen push notifications
  9. 9. What’s Wrong with App ? High cost Difficultly share 9
  10. 10. What’s Wrong with App ? High cost 10 iOS WindowsAndroid
  11. 11. What’s Wrong with App ? Difficultly share 11 from Alex Russell in Chrome Dev Summit 2015 1 month 25 100+ App Web
  12. 12. What’s Wrong with App ? 12 Alex Russell in Chrome Dev Summit 2015 ignite online & comScore
  13. 13. 13
  14. 14. PWA 14 What’s Progressive Web App
  15. 15. 15 Reliable Fast EngagingReliable
  16. 16. What’s PWA ? Reliable 16
  17. 17. What’s PWA ? Fast 17
  18. 18. What’s PWA ? Engaging 18
  19. 19. Chrome Dev Summit 2014 [github] How does the PWA looks like 19
  20. 20. 20
  21. 21. Service Workers 21 What’s
  22. 22. 22 What’s Service Workers ?
  23. 23. What’s Service Workers ? 23
  24. 24. 24 What’s Service Workers ?
  25. 25. Service Workers Lifecycle 25
  26. 26. Making A Service Worker 26
  27. 27. 27 Making A Service Workers design @Don
  28. 28. 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
  29. 29. Getting Started with Service Workers 29
  30. 30. Registering the Service Worker Setting up the Default Cache Clearing Old Cache Handling Fetch Requests 30 Making A Service Workers
  31. 31. 31 Register install activate fetch Making A Service Workers Register Registering the Service Worker
  32. 32. 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. 33. 33 Register install activate fetch Making A Service Workers Register Service Worker Lifecycle install activate fetch
  34. 34. 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. 35. 35 Register install activate fetch Setting up the Default Cache Making A Service Workers
  36. 36. 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';
  37. 37. 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. 38. 38 Register install activate fetch Clearing Old Cache Making A Service Workers
  39. 39. ` 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. 40. 40 Register install activate fetch Handling Fetch Requests Making A Service Workers
  41. 41. 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
  42. 42. 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. 43. 43
  44. 44. 44
  45. 45. Learn more? 45
  46. 46. 46
  47. 47. 47
  48. 48. 48
  49. 49. 49
  50. 50. 50
  51. 51. 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
  52. 52. 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
  53. 53. 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
  54. 54. Thanks 54

×