ahuguetvives@bol.com
What are progressive web apps?
Progressive - Work for every user, regardless of browser choice because they’re built with progressive enhancement as a core tenet.
Responsive - Fit any form factor: desktop, mobile, tablet, or whatever is next.
Connectivity independent - Enhanced with service workers to work offline or on low quality networks.
App-like - Feel like an app to the user with app-style interactions and navigation because they’re built on the app shell model.
Fresh - Always up-to-date thanks to the service worker update process.
Safe - Served via HTTPS to prevent snooping and ensure content hasn’t been tampered with.
Discoverable - Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.
Re-engageable - Make re-engagement easy through features like push notifications.
Installable - Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.
Linkable - Easily share via URL and not require complex installation.
=
HTML
JS
CSS
Memory Cache
Kept until the end of the navigation
(sometimes less)
Memory Cache
Kept until the end of the navigation
(sometimes less)
HTTP Cache
(disk cache)
HTTP cache headers
(max-age,
immutable,
etc)
Memory Cache
Kept until the end of the navigation
(sometimes less)
HTTP Cache
(disk cache)
HTTP cache headers
(max-age,
immutable,
etc)
Push Cache
(HTTP/2 cache)
~ 5 min
(Chrome)
"Nothing" is the worse content you can leave your users with.
A network interceptor in the browser !
Remember:
Memory Cache
HTTP Cache
(disk cache)
Push Cache
(HTTP/2 cache)
Memory Cache
HTTP Cache
(disk cache)
Push Cache
(HTTP/2 cache)
IndexedDB
Structured Data
Cache Storage
URL addressable
Fast 3G network
(100–500 ms delay, 400ms round-trip)
10.17 seconds
10.17 seconds + ~ 10 seconds S.W.
0.6 seconds + ~1 second checking S.W.
Lifecycle events:
<script>
'use strict';
self.addEventListener('install', function(event) {
console.log('install');
});
self.addEventListener('activate', function(event) {
console.log('activate');
});
self.addEventListener('fetch', function(event) {
console.log('fetch:', event.request.url);
});
</script>
HTML
JS
CSS
Fonts
Ideal for: download only the necessary assets.
HTML
JS
CSS
Core assets
Fonts
Ideal for: download only the necessary assets.
HTML
JS
CSS
Core assets
Fonts
Ideal for: download only the necessary assets.
Ideal for: reuse cached resources managed by someone else.
It is possible to share resources that were cached by another service worker or script.
Any response type:
- HTML
- Img
- Video
Ideal for: don't break the layout and / or inform the user.
404 ERROR
Ideal for: cache only the necessary assets and learn the user preferences.
Memory Cache
HTTP Cache
(disk cache)
Push Cache
(HTTP/2 cache)
❤️ Margherita Farina