In recent years, novel means of improving user experience have emerged. One very powerful approach is to create web applications that act more like desktop applications. We usually call these Progressive Web Applications (PWAs).
For instance, PWAs can do the following:
- Function even if the user is disconnected from the network
- Make use of push notifications (that is, desktop-like notifications even if the application is closed)
- Access native features usually reserved for native applications (for example, GPS positions, device orientation, and more)
The core idea of PWAs is to provide progressive enhancement to end users. Here are some examples of what this means in practice:
- If users are online, the save functionality of a PWA will be available to them. If they are not, then the application can persist modifications locally and wait until the network is reachable again, at which point the data will be synchronized automatically.
- Users automatically get an up-to-date version of the application when they go online.
- Users can install the application on their desktop or mobile devices just as if it was a native one.
Modern web APIs, such as those that we have previously mentioned, make these scenarios possible (for example, web application manifests, service workers, web workers, IndexedDB, LocalStorage, SessionStorage, and more).
Of course, creating a PWA requires more upfront effort, but the benefits for end users are important. Also, as we'll see shortly, modern web frameworks can also help and make this easier. Angular, which is the main subject of this chapter, has great support for PWAs: https://angular.io/guide/service-worker-intro.
An interesting tool to mention here is Lighthouse, developed by Google. Lighthouse allows you to automate a series of quality audits for modern web applications, including multiple ones for PWAs: