Progressive Web Apps (PWA) - Offline, Fast and Mobile App UX
PWAs are regular websites with powerful features added bit by bit as needed, enabling us to progressively enhance our regular websites, with resources and data saved on the device. PWAs offer the user speed, reliability and an enhanced user experience. Think supercharged websites using HTML5!
All modern browsers support Service Workers, Cache API and IndexedDB, enabling us to offer offline, near instant pages and able to store large quantities of data in IndexedDB as well as a range of assets.
Many modern browsers also support features such as installable apps to home screen, BackgroundSync to complete form submissions when the device is back online, even when the browser is closed.
Starting with the most basic HTML page – “Hello World” – we will incrementally add a range of PWA features:
Create an installable Web App with the ‘Add to Homescreen’ feature.
We will learn how to store assets in the browser with the Cache API enabling pages and images to be served locally.
We will develop a number of caching strategies so we can fine tune when we serve assets from the device and when we get them from the server.
We will learn how to use the browser’s own asynchronous, transactional database – IndexedDB – so that we can store data to use in our site.
With BackgroundSync, we can enable forms to be submitted even if offline as this API will send form data when back online. This can happen even if the browser is closed.
The Notifications API will enable us to send device level notifications to the user, for example when an offline form is finally sent, even after the user has closed the browser.
We will learn how to create communication to and from the Service Worker and web page.
The combination of these technologies, allows us to create, in effect, a device level web server and database which will provide very fast sites with offline capability.
The course material contains all code and is built up in stages, as well as having all the final code for each lesson included. This means you have a boilerplate PWA to deploy from the very start!
You will have access to all the slides but more importantly, a course e-book that I have developed containing detailed information on PWAs, supplied in pdf as well as word format so that you can add your own notes.
A local web server or IDE web server is sufficient. I will be using VSCode. I will work with Google Chrome as it has the most features present but you can work in any browser you want, although you may not necessarily be able to use implement all the features covered in the workshop.
An understanding of the Fetch API and being comfortable with using Promises will be an advantage. The level of JavaScript needed is intermediate – there is not a lot of coding, but rather a strong emphasis on understanding how to use standard code snippets.
If you have your own pages and APIs, you can develop this through the day so that you have your own production ready PWA by the end of the day.
Craig is freelance trainer and architect tbased in Brighton, UK and attends many local Web Development meetings. With a previous career in business and accounting, as well as having run his own non-IT business, Craig can speak both technical and business. He believes that technology serves the user, not the other way around, so the user experience is paramount.
He has given talks and workshops at events and is interested in Web Components, Progressive Web Apps, React, WordPress and JavaScript with a strong interest in pages that are ‘instant’ and/or offline capable.