This document discusses progressive web apps (PWAs). It explains that PWAs are websites that behave like native mobile apps through features such as working offline, push notifications, and loading quickly. It provides steps for migrating an existing website to a PWA, including adding HTTPS, caching assets, adding to the home screen, and using service workers to handle offline states. It also covers caching strategies, the web app manifest, and using service workers to cache assets, handle push notifications, and more. The document aims to explain the key concepts and technologies that power PWAs.

2. PWA Power!
Gabriele Falasca

3. PWA Power – Gabriele Falasca

4. PWA Power – Gabriele Falasca
WHAT IS PWA?

5. PWA Power – Gabriele Falasca
Migrate an existing webapp to pwa
1. HTTPS
2. THINK ABOUT CACHING
3. ADD TO HOMESCREEN
4. USE API YOU NEED
5. ENJOY

6. PWA Power – Gabriele Falasca
App shell model
CACHING STRATEGIES

7. PWA Power – Gabriele Falasca
SSR vs CSR

8. PWA Power – 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 Power – 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
DYNAMIC CONTENT

10. PWA Power – Gabriele Falasca
SSR caching strategies
1. CACHE CSS JS AND ASSETS
2. IF THE APP HAS A STATIC PAGE CACHE IT TOO
3. JS CAN HANDLE OFFLINE STATE

11. PWA Power – Gabriele Falasca
CSR caching strategies
1. CACHE CSS, JS, TEMPLATE AND ASSETS
2. CACHE DATA USING CACHE API OR INDEXEDDB
(i prefer IndexedDB)
3. DETECT OFFLINE STATE THROUGH JAVASCRIPT

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

13. PWA Power – Gabriele Falasca
Different Caching strategies
1. CACHE FIRST, NETWORK FALLBACK
2. NETWORK FIRST, CACHE FALLBACK
3. CACHE-NETWORK RACE*

14. PWA Power – Gabriele Falasca
Web App Manifest
manifest.json:
{
"short_name": "MyCoolPWA",
"name": "My Cool PWA",
"icons": [
{
"src": "launcher-icon-1x.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "launcher-icon-2x.png",
"type": "image/png",
"sizes": "96x96"
},
{
"src": "launcher-icon-4x.png",
"type": "image/png",
"sizes": "192x192"
}
],
"start_url": "index.html"
}

15. PWA Power – Gabriele Falasca
Tell the browser about your manifest
<link rel="manifest" href="/manifest.json">

16. PWA Power – Gabriele Falasca
Service Workers

17. PWA Power – Gabriele Falasca
Service Workers
Service workers essentially act as proxy servers that sit between
web applications, the browser, and the network (when available).
They are intended, among other things, to enable the creation of
effective offline experiences, intercept network requests and take
appropriate action based on whether the network is available, and
update assets residing on the server. They will also allow access to
push notifications and background sync APIs
(source: https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API)

18. PWA Power – Gabriele Falasca
Register a service worker for your application
ServiceWorkerContainer.register(scriptURL, options)
.then(function(ServiceWorkerRegistrationObject) {
…
// do some stuff
…
});

19. PWA Power – Gabriele Falasca
What you can do with Service Worker?
1. CACHING THINGS
2. REGISTER FOR PUSH NOTIFICATION
3. USE WEB PAYMENT API
4. AND MANY MANY MORE…

20. PWA Power – Gabriele Falasca
Compatibility

21. PWA Power – Gabriele Falasca
Service Worker

22. PWA Power – Gabriele Falasca
Web App Manifest

23. PWA Power – Gabriele Falasca
Cache API

24. PWA Power – Gabriele Falasca
Questions?

25. PWA Power – Gabriele Falasca
Thank You!