Progressive Web Apps

Progressive Web Apps (or PWAs) is a modern web capabilities that combine all the goodness of the web and the top-notch of native app features. While native mobile apps provide the highest quality UX, they come with friction for users. One of the biggest differences between PWAs and native mobile apps is that it does not require the hassle of requiring an app marketplace (App Store, Google Play, etc.) to access, they just rely on the mobile web browser.

Key principles

Below are listed 10 key principles a web application should observe to be considered a Progressive Web App:

Progressive: Work for every user, regardless of browser choice, has a basic level on older browsers, but fully-functional on the latest ones.

Discoverable: Are identifiable as “applications” thanks to W3C manifests and service worker registration scope allowing search engines to find them.

Re-engageable: Make re-engagement easy through features like push notifications.

Installable: Allow users to “keep” apps they find most useful on their home screen without the hassle of an app store.

Linkable: Easily shared via a URL and do not require complex installation.

PWA vs. Native Mobile App

As showing below the superficial difference between Progressive Web Apps and Native apps has to do with the way the end user accesses them.

Progressive Web Apps were conceived as a way to sidestep, or even eliminate, a lot of the headaches associated with native app development. However native apps still more robust and can be written for any use.

First steps toward building a PWA

Google

This codelab, will walk you through creating your own Progressive Web App, including the design considerations, as well as implementation details, to ensure that your app meets the above key principles of a Progressive Web App.

MDN

Progressive web app structure. This architecture allows a website to benefit the most from all the PWA features — it caches the app shell and manages the dynamic content in a way that greatly improves the performance.

Tools and resources

The tools and resources listed below, will help you build and publish a standout Progressive Web App and speedup the process:

To see PWAs in action, you can refer to PWA.rocks for examples under several categories, this will help you visualize what your future PWA could look like.

Measuring completeness with Lighthouse, it is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

Application Shell Architecture, is a comprehensive Progressive Web App starting point that covers both client and server-side portions of the model and there’s quite a lot going on there, it will take some time to familiarise yourself with the codebase.