How to obtain maximum performance from your Progressive web app In this talk i want to explain what PWA is and how to obtain maximum performance for your project focusing on the caching strategies, use cases when you can prefer your caching data vs use cases when it's better to try to fetch your data first.

2. PWA CACHING STRATEGIES
Gabriele Falasca
@gabrycaos
gabriele.falasca@sourcesense.com

3. PWA Caching Strategies – Gabriele Falasca
BREAKING NEWS!
Google announced that PWA can be distributed
through Play Store!!!

4. PWA Caching Strategies – Gabriele Falasca
WHAT IS PWA?

5. PWA Caching Strategies – Gabriele Falasca

6. PWA Caching Strategies – Gabriele Falasca
Migrate an existing webapp to pwa
1. HTTPS
2. THINK ABOUT CACHING
3. SERVICE WORKER
4. ADD TO HOMESCREEN
5. USE THE APIs YOU NEED
6. ENJOY

7. PWA Caching Strategies – Gabriele Falasca
SSR vs CSR recap

8. PWA Caching Strategies – Gabriele Falasca
SSR – Server Side Rendering
1. SERVER RETURNS A COMPLETE STATIC PAGE
2. PAGE LOADS REMOTE CSS, JS AND ASSETS
3. EVERY ACTION ON THE PAGE CAUSES A BROWSER
RELOAD

9. PWA Caching Strategies – Gabriele Falasca
CSR – CLIENT Side Rendering
1. SERVER RETURNS AN EMPTY PAGE (TEMPLATE)
2. JS MAKES REQUESTS TO GET PAGE CONTENT
3. EVERY ACTION ON THE PAGE RELOAD ONLY THE
DYNAMIC CONTENT

10. PWA Caching Strategies – Gabriele Falasca
SSR caching strategies
1. CACHE CSS JS AND ASSETS
2. IF THE APP HAS A STATIC PAGE, CACHE IT
TOO

11. PWA Caching Strategies – Gabriele Falasca
CSR caching strategies
1. CACHE CSS, JS, TEMPLATE AND ASSETS
2. CACHE DATA USING CACHE API OR INDEXEDDB
3. DETECT OFFLINE STATE THROUGH
JAVASCRIPT

12. PWA Caching Strategies – Gabriele Falasca
Detect offline state - JS
if(navigator.offline)
OR
navigator.addEventListener(‘offline’, …)
navigator.addEventListener(‘online’, …)

13. PWA Caching Strategies – Gabriele Falasca
SERVICE WORKERS

14. PWA Caching Strategies – Gabriele Falasca
What you can do with Service Workers?
1. CACHING THINGS
2. REGISTER FOR PUSH NOTIFICATION
3. USE VARIOUS API
4. AND MANY MANY MORE…

15. PWA Caching Strategies – Gabriele Falasca
App shell model
CACHING STRATEGIES

16. PWA Caching Strategies – Gabriele Falasca
CACHING STRATEGIES
When to cache resources?

17. PWA Caching Strategies – Gabriele Falasca
WHEN TO CACHE RESOURCES?
on install
self.addEventListener('install', function (event) {
event.waitUntil(
caches.open(CACHE_NAME).then(function (cache) {
console.log('caching App shell');
return cache.addAll([
'/static/js/main.chunk.js',
...pokemonImagesArray(),
]);
})
);
});
Ideal for: CSS, images, fonts, JS, templates… basically anything you'd consider static to that
"version" of your site.

18. PWA Caching Strategies – Gabriele Falasca
WHEN TO CACHE RESOURCES?
on activate
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);
})
);
})
);
});
Ideal for: Clean-up & migration, or when you have to change your IndexedDb schema
YES, THERE IS A DB ALSO ON FRONTEND!

19. PWA Caching Strategies – Gabriele Falasca
WHEN TO CACHE RESOURCES?
on user interaction
document.querySelector(‘#cache-this!').addEventListener('click',
function(event) {
event.preventDefault();
var id = this.someDataset.articleId;
caches.open('mysite-article-' + id).then(function(cache) {
fetch('/get-article-urls?id=' + id).then(function(response) {
// /get-article-urls returns a JSON-encoded array of
// resource URLs that a given article depends on
return response.json();
}).then(function(urls) {
cache.addAll(urls);
});
});
});
Ideal for: “Read later”
Cache API is available not only in service workers!

20. PWA Caching Strategies – Gabriele Falasca
WHEN TO CACHE RESOURCES?
on network response
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.open(CACHE_NAME).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;
});
});
})
);
});
Ideal for: To allow for efficient memory usage, you can only read a response/request's body once.
.clone() is used to create additional copies that can be read separately.

21. PWA Caching Strategies – Gabriele Falasca
WHEN TO CACHE RESOURCES?
on push message
self.addEventListener('push', function(event) {
if (event.data.text() == 'new-email') {
event.waitUntil(
caches.open(CACHE_NAME).then(function(cache) {
return fetch('/inbox.json').then(function(response) {
cache.put('/inbox.json', response.clone());
return response.json();
});
}).then(function(emails) {
registration.showNotification("New email", {
body: "From " + emails[0].from.name
tag: "new-email"
});
})
);
}
});

22. PWA Caching Strategies – Gabriele Falasca
WHEN TO CACHE RESOURCES?
on background sync
self.addEventListener('sync', function(event) {
if (event.id == 'update-leaderboard') {
event.waitUntil(
caches.open(CACHE_NAME).then(function(cache) {
return cache.add('/leaderboard.json');
})
);
}
});
Ideal for: Content relating to a notification, such as a chat message, a breaking news story, or an email. Also
infrequently changing content that benefits from immediate sync, such as a todo list update or a calendar
alteration.

23. PWA Caching Strategies – Gabriele Falasca
WHEN TO CACHE RESOURCES?
stale-while-revalidate
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.open(CACHE_NAME).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;
})
})
);
});
If there's a cached version available, use it, but fetch an update for next time.
Ideal for: Frequently updating resources where having the very latest version is non-essential. Like avatars.

24. PWA Caching Strategies – Gabriele Falasca
CACHING STRATEGIES
Responding to requests

25. PWA Caching Strategies – Gabriele Falasca
RESPONDING TO REQUESTS
network only
self.addEventListener('fetch', function(event) {
event.respondWith(fetch(event.request));
// or simply don't call event.respondWith, which
// will result in default browser behaviour
});
Ideal for: Every non-GET request :)

26. PWA Caching Strategies – Gabriele Falasca
RESPONDING TO REQUESTS
cache, network fallback
self.addEventListener('fetch', function(event) {
event.respondWith(
caches.match(event.request).then(function(response) {
return response || fetch(event.request);
})
);
});
Ideal for: If you're building offline-first, this is how you'll handle the majority of requests. Other patterns will be
exceptions based on the incoming request.

27. PWA Caching Strategies – Gabriele Falasca
RESPONDING TO REQUESTS
network, cache fallback
self.addEventListener('fetch', function(event) {
event.respondWith(
fetch(event.request).catch(function() {
return caches.match(event.request);
})
);
});
Ideal for: A quick-fix for resources that update frequently, outside of the "version" of the site. E.g. articles, avatars,
social media timelines, game leader boards

28. PWA Caching Strategies – Gabriele Falasca
RESPONDING TO REQUESTS
cache, then network
// IN THE PAGE
var networkDataReceived = false;
startSpinner();
// fetch fresh data
var networkUpdate = fetch('/data.json').then(function(response) {
return response.json();
}).then(function(data) {
networkDataReceived = true;
updatePage(data);
});
// fetch cached data
caches.match('/data.json').then(function(response) {
if (!response) throw Error("No data");
return response.json();
}).then(function(data) {
// don't overwrite newer network data
if (!networkDataReceived) {
updatePage(data);
}
}).catch(function() {
// we didn't get cached data, the network is our last hope:
return networkUpdate;
}).catch(showErrorMessage).then(stopSpinner);

29. PWA Caching Strategies – Gabriele Falasca
RESPONDING TO REQUESTS
cache, then network
// IN THE SERVICE WORKER
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;
});
})
);
});
Ideal for: Content that updates frequently. E.g. articles, social media timelines, game leaderboards.

30. PWA Caching Strategies – Gabriele Falasca
RESPONDING TO REQUESTS
Other strategies
Cache and Network race
Generic fallback

31. PWA Caching Strategies – Gabriele Falasca
Questions?

32. PWA Caching Strategies – Gabriele Falasca
Thank You!