![Page 1: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/1.jpg)
REAL WORLD LESSONS IN PROGRESSIVE WEB APPLICATION/SERVICE WORKER CACHINGHow Developers Can Build Web Sites With Native App User Experience and the Natural Advantages the Web Offers Businesses and Customers
![Page 4: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/4.jpg)
RESOURCES
Slide URL slideshare – https://slideshare.com/docluv
Source Code – https://github.com/docluv
![Page 5: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/5.jpg)
PROGRESSIVE WEB APPLICATION COURSE
VideosE-bookChecklistsReference Source CodeBuild Scripts
$97LimitedTime!
![Page 6: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/6.jpg)
Presentation Title Can Be Placed Here 6
PUBLIC LOGO
We Made a PWA Logo Creative Common License! https://github.com/docluv/pwa-logo
![Page 7: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/7.jpg)
Presentation Title Can Be Placed Here 7
LIFE CYCLE
SERVICE WORKER
![Page 8: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/8.jpg)
Presentation Title Can Be Placed Here 8
LIFE CYCLE Lives Separate From Page Must Register Service Worker The Service Worker is Installed It is not Immediately Active
Can be Forced Active Upon Install Activated After All Current References Terminated Now Controls All New Instances of Site
![Page 9: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/9.jpg)
![Page 10: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/10.jpg)
Web Server
Web Page
Service Worker
Cache
2
1
![Page 11: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/11.jpg)
Web Server
Web Page
Service Worker
Cache
2
![Page 12: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/12.jpg)
Presentation Title Can Be Placed Here 12
REGISTRATIONif ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw.js')
.then(function(registration) { // Registration was successful })
.catch(function(err) { // registration failed :( }); }
![Page 13: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/13.jpg)
Presentation Title Can Be Placed Here 13
INSTALL
self.addEventListener('install', function (e) {
//do something
});
![Page 14: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/14.jpg)
Presentation Title Can Be Placed Here 14
ACTIVATE
self.addEventListener('activate', function (event) { console.log('Service Worker activating.');});
![Page 15: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/15.jpg)
Presentation Title Can Be Placed Here 15
ACTIVATEself.addEventListener('install', function (e) {
e.waitUntil(…})); self.skipWaiting();});
![Page 16: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/16.jpg)
![Page 17: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/17.jpg)
THE PROXY SERVER IN YOUR POCKET
SERVICE WORKER
![Page 18: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/18.jpg)
Presentation Title Can Be Placed Here 18
CLASSIC WEB CLIENT-SERVER
Web Server
Web Page
![Page 19: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/19.jpg)
Presentation Title Can Be Placed Here 19
ADD SERVICE WORKER
Web ServerWeb Page
Service Worker
![Page 20: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/20.jpg)
Presentation Title Can Be Placed Here 20
Web ServerWeb
Page
Service Worker
![Page 21: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/21.jpg)
Presentation Title Can Be Placed Here 21
Web ServerWeb
Page
Service Worker
Cache
![Page 22: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/22.jpg)
Presentation Title Can Be Placed Here 22
SERVICE WORKER CACHE
Persist Files with Response HeadersLimited by Device ResourcesAvailable Online & Offline
![Page 23: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/23.jpg)
Presentation Title Can Be Placed Here 23
self.addEventListener('install', function (e) {
e.waitUntil( caches.open(cacheName).then(function (cache) {
return cache.addAll(filesToCache).catch(function (error) { console.log(error);
}); }) );});
![Page 24: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/24.jpg)
Presentation Title Can Be Placed Here 24
self.addEventListener('fetch', function (event) {
//intercept fetch request (any request from the UI thread for a file or API) and return from cache or get from server & cache it event.respondWith(
caches.match(event.request).then(function (resp) {
return resp || fetchAsset(event);
})
);
});
![Page 25: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/25.jpg)
Web ServerWeb
Page
Service Worker
CacheIndexDB
![Page 26: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/26.jpg)
Presentation Title Can Be Placed Here 26
THE CACHE STRATEGIES
SERVICE WORKER
![Page 27: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/27.jpg)
Web Page
Service Worker
![Page 28: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/28.jpg)
Web Page
Service Worker
Cache
![Page 29: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/29.jpg)
Presentation Title Can Be Placed Here 29
OFFLINE COOKBOOK
JAKE ARCHIBALDChrome Team
https://jakearchibald.com/2014/offline-cookbook/
![Page 30: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/30.jpg)
![Page 31: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/31.jpg)
self.addEventListener('install', function(event) { event.waitUntil( caches.open('mysite-static-
v3').then(function(cache) {
return cache.addAll([ '/css/whatever-v3.css',
'/css/imgs/sprites-v6.png', '/css/fonts/whatever-v8.woff', '/js/all-min-v4.js' // etc
]); }) ); });
![Page 32: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/32.jpg)
![Page 33: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/33.jpg)
self.addEventListener('install', function(event) { event.waitUntil(
caches.open('mygame-core-v1').then(function(cache) {
cache.addAll( // levels 11-20 ); return cache.addAll(
// core assets & levels 1-10 ); })
); });
![Page 34: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/34.jpg)
![Page 35: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/35.jpg)
self.addEventListener('activate', function(event) { event.waitUntil( caches.keys()
.then(function(cacheNames) { return Promise.all(
cacheNames.filter(function(cacheName) { // Return true if you want to remove this cache, // but remember that caches are shared across // the whole origin })
.map(function(cacheName) { return caches.delete(cacheName);
}) );
}) );
});
![Page 36: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/36.jpg)
![Page 37: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/37.jpg)
document.querySelector('.cache-article').addEventListener('click', function(event) {
event.preventDefault(); var id = this.dataset.articleId; caches.open('mysite-article-' + id)
.then(function(cache) { fetch('/get-article-urls?id=' +
id).then(function(response) { response.json();
}).then(function(urls) { cache.addAll(urls); });
}); });
![Page 38: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/38.jpg)
![Page 39: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/39.jpg)
self.addEventListener('fetch', function(event) { event.respondWith(
caches.open('mysite-dynamic').then(function(cache) {
return cache.match(event.request).then(function (response) {
return response || fetch(event.request).then(function(response) {
cache.put(event.request, response.clone()); return response;
}); });
}) );
});
![Page 40: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/40.jpg)
![Page 41: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/41.jpg)
self.addEventListener('fetch', function(event) { event.respondWith(
caches.open('mysite-dynamic').then(function(cache) {
return cache.match(event.request).then(function(response) {
var fetchPromise = fetch(event.request).then(function(networkResponse) {
cache.put(event.request, networkResponse.clone());
return networkResponse; }) return response || fetchPromise;
}) }) ); });
![Page 42: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/42.jpg)
![Page 43: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/43.jpg)
![Page 44: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/44.jpg)
self.addEventListener('install', function(event) { event.waitUntil( caches.open('mysite-static-
v3').then(function(cache) {
return cache.addAll([ '/css/whatever-v3.css',
'/css/imgs/sprites-v6.png', '/css/fonts/whatever-v8.woff', '/js/all-min-v4.js' // etc
]); }) ); });
![Page 45: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/45.jpg)
![Page 46: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/46.jpg)
self.addEventListener('fetch', function(event) { // If a match isn't found in the cache, the
response // will look like a connection error
event.respondWith(caches.match(event.request)); });
![Page 47: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/47.jpg)
![Page 48: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/48.jpg)
self.addEventListener('fetch', function(event) { event.respondWith(fetch(event.request));
// or simply don't call event.respondWith, which
// will result in default browser behavior });
![Page 49: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/49.jpg)
![Page 50: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/50.jpg)
self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request)
.then(function(response) { return response ||
fetch(event.request); })
); });
![Page 51: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/51.jpg)
![Page 52: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/52.jpg)
self.addEventListener('fetch', function(event) { event.respondWith(
promiseAny([ caches.match(event.request),
fetch(event.request) ])
); });
![Page 53: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/53.jpg)
![Page 54: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/54.jpg)
self.addEventListener('fetch', function(event) { event.respondWith( fetch(event.request).catch(
function() { return caches.match(event.request); })
); });
![Page 55: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/55.jpg)
![Page 56: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/56.jpg)
self.addEventListener('fetch', function(event) {event.respondWith(
caches.open('mysite-dynamic').then(function(cache) {
return fetch(event.request).then(function(response) {
cache.put(event.request, response.clone());
return response; });
}) );
});
![Page 57: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/57.jpg)
![Page 58: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/58.jpg)
self.addEventListener('fetch', function(event) {
event.respondWith(caches.match(event.request)
.then(function(response) { return response ||
fetch(event.request);}).catch(function() {
return caches.match('/offline.html');
}) );
});
![Page 59: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/59.jpg)
![Page 60: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/60.jpg)
![Page 61: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/61.jpg)
CACHE TOOLS
SERVICE WORKER
![Page 62: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/62.jpg)
Presentation Title Can Be Placed Here 62
SERVICE WORKER TOOLS
sw_precache A node module to generate service worker code that
will precache specific resources so they work offline. https://github.com/googlechrome/sw-precache
sw_toolbox A collection of service worker tools for offlining
runtime requests https://github.com/GoogleChrome/sw-toolbox
![Page 63: Real World Lessons in Progressive Web Application & Service Worker Caching](https://reader036.vdocuments.us/reader036/viewer/2022062523/58e8ed371a28ab1f248b49dd/html5/thumbnails/63.jpg)