The document discusses progressive web applications (PWAs) and the integration of service workers for improved user experiences resembling native applications. It outlines the lifecycle of service workers, caching strategies, and provides code examples for implementing caching and fetch event handling. Additional resources and tools for developers are also mentioned to assist in creating effective PWAs.

1. REAL WORLD LESSONS IN
PROGRESSIVE WEB
APPLICATION/SERVICE
WORKER CACHING
How Developers Can Build Web Sites With Native App User Experience
and the Natural Advantages the Web Offers Businesses and Customers

2. http://bit.ly/2j3sAlG
@chrislove
chris@love2dev.com
www.love2dev.com
CHRIS LOVE

3. http://bit.ly/2j3sAlG
@chrislove
chris@love2dev.com
www.love2dev.com
CHRIS LOVE

4. RESOURCES
Slide URL slideshare – https://slideshare.com/docluv
Source Code – https://github.com/docluv

5. PROGRESSIVE WEB APPLICATION COURSE
Videos
E-book
Checklists
Reference Source Code
Build Scripts

6. PUBLIC LOGO
Presentation Title Can Be Placed Here 6
 We Made a PWA Logo
 Creative Common License!
 https://github.com/docluv/pwa-logo

7. Presentation Title Can Be Placed Here 7
LIFE CYCLE
SERVICE WORKER

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
Presentation Title Can Be Placed Here 8

10. Web
ServerWeb Page
Service
Worker
Cache
2
1

11. Web
ServerWeb Page
Service
Worker
Cache
2

12. REGISTRATION
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js')
.then(function(registration) {
// Registration was successful
})
.catch(function(err) {
// registration failed :(
});
}
Presentation Title Can Be Placed Here 12

13. INSTALL
self.addEventListener('install', function (e) {
//do something
});
Presentation Title Can Be Placed Here 13

14. ACTIVATE
self.addEventListener('activate', function (event) {
console.log('Service Worker activating.');
});
Presentation Title Can Be Placed Here 14

15. ACTIVATE
self.addEventListener('install', function (e) {
e.waitUntil(…}));
self.skipWaiting();
});
Presentation Title Can Be Placed Here 15

17. THE PROXY SERVER IN YOUR
POCKET
SERVICE WORKER

18. CLASSIC WEB CLIENT-SERVER
Presentation Title Can Be Placed Here 18
Web
ServerWeb Page

19. ADD SERVICE WORKER
Presentation Title Can Be Placed Here 19
Web
ServerWeb Page
Service Worker

20. Presentation Title Can Be Placed Here 20
Web
ServerWeb Page
Service Worker

21. Presentation Title Can Be Placed Here 21
Web
ServerWeb Page
Service Worker
Cache

22. SERVICE WORKER CACHE
Presentation Title Can Be Placed Here 22
Persist Files with Response Headers
Limited by Device Resources
Available Online & Offline

23. self.addEventListener('install', function (e) {
e.waitUntil(
caches.open(cacheName).then(function (cache) {
return cache.addAll(filesToCache)
.catch(function (error) {
console.log(error);
});
})
);
});
Presentation Title Can Be Placed Here 23

24. 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);
})
);
});

25. Web
ServerWeb Page
Service Worker
CacheIndexDB

26. Presentation Title Can Be Placed Here 26
THE CACHE STRATEGIES
SERVICE WORKER

27. Web Page
Service Worker

28. Web Page
Service Worker
Cache

29. OFFLINE COOKBOOK
Presentation Title Can Be Placed Here 29
JAKE ARCHIBALD
Chrome Team
https://jakearchibald.com/2014/
offline-cookbook/

31. 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
]); }) ); });

33. 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 );
})
);
});

35. 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);
})
);
})
);
});

37. 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);
});
});
});

39. 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;
});
});
})
);
});

41. 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;
}) }) ); });

44. 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
]); }) ); });

46. 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));
});

48. self.addEventListener('fetch', function(event) {
event.respondWith(fetch(event.request));
// or simply don't call event.respondWith, which
// will result in default browser behavior
});

50. self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request)
.then(function(response) {
return response || fetch(event.request);
})
);
});

52. self.addEventListener('fetch', function(event) {
event.respondWith(
promiseAny([
caches.match(event.request),
fetch(event.request)
])
);
});

54. self.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request).catch(
function() { return
caches.match(event.request);
})
);
});

56. 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;
});
})
);
});

58. 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');
})
);
});

61. CACHE TOOLS
SERVICE WORKER

62. SERVICE WORKER TOOLS
Presentation Title Can Be Placed Here 62
 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