The building blocks of Progressive Web Apps

Progressive Web Apps (PWAs) are websites built using web technologies but that act and feel like an app. They take advantage of the latest technologies to combine the best of web and mobile apps, like allowing users to install web apps to their home screen,
receive push notifications and even work offline.

In this presentation we will explore what PWAs, why they are so important, and we will explain how to build one using WordPress.

Transcript

1. Progressive Web Apps & Service Workers Leonardo Losoviz https://getpop.org
2. Progressive Web Apps A PWA takes advantage of the latest technologies to combine the best of web and mobile apps. Think of it as a website built using web technologies but that acts and feels like an app. Browsers allow users to install web apps to their home screen, receive push notifications and even work offline.
3. Why PWAs? On average, an app loses 20% of its users for every step between the user’s first contact with the app and the user starting to use the app. A user must first find the app in an app store, download it, install it and then, finally, open it. With a PWA, users are able to immediately start using it. When the user returns to the app, the app asks to upgrade to a full-screen experience.
4. Why PWAs? If you are not in the top 0.1% of apps in the app store, you are not getting significant benefit from being there.
5. Characteristics of a PWA 1. Progressive 2. Discoverable 3. Linkable 4. Responsive 5. App-like 6. Connectivity-independent 7. Re-engageable 8. Installable 9. Fresh 10. Safe
6. Characteristics of a PWA 1. Progressive A progressive web app must work on any device and enhance progressively, taking advantage of any features available on the user’s device and browser.
7. Characteristics of a PWA 2. Discoverable Because a progressive web app is a website, it should be discoverable in search engines. This is a major advantage over native applications, which still lag behind websites in searchability.
8. Characteristics of a PWA 3. Linkable As another characteristic inherited from websites, a well-designed website should use the URI to indicate the current state of the application. This will enable the web app to retain or reload its state when the user bookmarks or shares the app’s URL.
9. Characteristics of a PWA 4. Responsive A progressive web app’s UI must fit the device’s form factor and screen size.
10. Characteristics of a PWA 5. App-like A progressive web app should look like a native app and be built on the application shell model, with minimal page refreshes.
11. Characteristics of a PWA 6. Connectivity-independent It should work in areas of low connectivity or offline.
12. Characteristics of a PWA 7. Re-engageable Mobile app users are more likely to reuse their apps, and progressive web apps are intended to achieve the same goals through features such as push notifications.
13. Characteristics of a PWA 8. Installable A progressive web app can be installed on the device’s home screen, making it readily available.
14. Characteristics of a PWA 9. Fresh When new content is published and the user is connected to the Internet, that content should be made available in the app.
15. Characteristics of a PWA 10. Safe Because a progressive web app has a more intimate user experience and because all network requests can be intercepted through service workers, it is imperative that the app be hosted over HTTPS to prevent man-in-the-middle attacks.
16. Web App Manifest A web app manifest file is a simple JSON file, which allows to: run the web app in full-screen mode as a standalone application show an icon that will get displayed when the app is installed on the device assign a theme and background color to the app.
17. Web App Manifest { "short_name": "Arrivals", "name": "Arrivals at Sky High", "description": "Progressive web application demonstration", "icons": [ { "src": "launcher-icon.png", "sizes": "48x48", "type": "image/png" }, { "src": "launcher-icon-96.png", "sizes": "96x96", "type": "image/png" }, { "src": "launcher-icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "launcher-icon-256.png", "sizes": "256x256", "type": "image/png" } ], "start_url": "./?utm_source=web_app_manifest", "display": "standalone", "orientation": "portrait", "theme_color": "#29BDBB", "background_color": "#29BDBB" } It is referenced in <head> <link rel="manifest" href="./manifest.json">
18. Web App Manifest Chrome on Android will proactively suggest that the user install the web app, via a web app install banner, after the user visited twice, with at least five minutes between each visit.
19. Service Workers A service worker is a script that stands between your website and the network, giving you, among other things, the ability to intercept network requests and respond to them in different ways. Service workers enable the app to work offline
20. Service Workers SWs are event-driven scripts, written in JavaScript They have access to domain-wide events, including network fetches With them, we can cache all static resources
22. Service Workers SWs run in a separate thread, and are not tied to any specific tab they can be brought to life in the background to handle push notifications or background sync They are assigned a URL scope when they are created, and they can intercept and rewrite any requests in this scope. http://example.com/my-site/sw.js can intercept requests made to /my- site/ or lower, but not to http://example.com/
23. Service Workers The service worker API makes heavy use of Promises A promise represents the eventual result of an asynchronous operation, even if the actual value won’t be known until the operation completes some time in the future. getAnAnswerToADifficultQuestionSomewhereFarAway() .then(answer => { console.log('I got the ${answer}!'); }) .catch(reason => { console.log('I tried to figure it out but couldn't because ${reason}'); }); event.respondWith( fetch(request) .then(response => addToCache(cacheKey, request, response)) .catch(() => fetchFromCache(event)) .catch(() => offlineResponse(opts)) );
24. Service Workers // Register the service worker if available. if ('serviceWorker' in navigator) { navigator.serviceWorker.register('./sw.js').then(function(reg) { console.log('Successfully registered service worker', reg); }).catch(function(err) { console.warn('Error whilst registering service worker', err); }); } var cacheName = 'v1:static'; // During the installation phase, you'll usually want to cache static assets. self.addEventListener('install', function(e) { // Once the service worker is installed, go ahead and fetch the resources to make this work offline. e.waitUntil( caches.open(cacheName).then(function(cache) { return cache.addAll([ './', './css/style.css', './js/build/script.min.js', './js/build/vendor.min.js', './css/fonts/roboto.woff', './offline.html' ]).then(function() { self.skipWaiting(); }); }) ); }); // when the browser fetches a URL… self.addEventListener('fetch', function(event) { // … either respond with the cached object or go ahead and fetch the actual URL event.respondWith( caches.match(event.request).then(function(response) { if (response) { // retrieve from cache return response; } // fetch as normal return fetch(event.request); }) ); });
25. SW Cookbook Cache only Network only Cache, falling back to network Cache & network race Network falling back to cache Cache then network Generic fallback ServiceWorker-side templating https://jakearchibald.com/2014/offline-cookbook/
26. Example SW file https://getpop.org/wp-content/pop-serviceworkers/getpop/service-worker.js
27. Thanks! Questions? Leonardo Losoviz leo@getpop.org https://getpop.org https://github.com/leoloso/PoP