What are Progressive Web Apps (PWA) ?

In simple terms, Progressive Web Apps are useful to users from the very first visit in a browser tab, no install required. As the user progressively builds a relationship with the app over time, it becomes more and more powerful. It loads quickly, even on low bandwidth networks, sends relevant push notifications, has an icon on the home screen, and loads as a top-level, full-screen experience.

In this post, we can see how PWA can help us to deliver amazing user experiences on the web.

Quick Snapshot

Characteristics of Progressive Web Apps
App Shell Model
PWA Checklist
Additional Resources

Characteristics of Progressive Web Apps

PWA is just an enhancement of existing web technology. As such, they do not require any separate bundling or distribution. Deployment of a progressive web app is as it would be for any other web page.

Progressive – Works for every user, regardless of browser choice because it’s built with progressive enhancement as a core tenet.
Responsive – Fits any form factor: desktop, mobile, tablet, or whatever is next.
Connectivity independent – Enhanced with service workers to work offline or on low-quality networks.
App-like – Feels like an app, because the app shell model separates the application functionality from application content.
Fresh – Always up-to-date thanks to the service worker update process.
Safe – Served via HTTPS to prevent snooping and to ensure content hasn’t been tampered with.
Discoverable – This is identifiable as an “application” thanks to the W3C manifest and service worker registration scope, allowing search engines to find it.
Re-engageable – Makes re-engagement easy through features like push notifications.
Installable – Allows users to add apps they find most useful to their home screen without the hassle of an app store.
Linkable – Easily share the application via URL, does not require complex installation.

Now that we know the characteristics of PWA apps, let’s look at one of the ways to build.

App Shell Model

Application shell (or app shell) architecture is one way to build a Progressive Web App that reliably and instantly loads on your users’ screens, similar to what you see in native applications. The main app “shell” is the minimal HTML, CSS, and JavaScript that are required for the user interface is cached offline so that it can ensure instant, reliably good performance to users on repeat visits. This means the application shell is not loaded from the network every time the user visits. Only the necessary content is needed from the network.

To cache the shell you can use a service worker to get the application running. Next, the dynamic content loads for each page using JavaScript. Basically, the service worker is a script(java script) that the browser runs in the background, separate from a web page that doesn’t need a web page or user interaction.

Some of the benefits of service workers

Capable of handling the push notification easily
Synchronize data in the background
Capable of responding to the resource requests originate elsewhere
Receive centralized updates

PWA Checklist

To help teams create the best possible experiences Google has put together the PWA checklist which breaks down all the things it takes to be a PWA. To automatically verify PWA Checklist items and for testing sites, you can use the Lighthouse tool.

Image – Lighthouse Chrome Extension for auditing PWA sites

Lighthouse is an open-source, automated tool for improving the performance, quality, and correctness of your web apps.

When auditing a page, Lighthouse runs a barrage of tests against the page, and then generates a report on how well the page did. From here you can use the failing tests as indicators on what you can do to improve your app.

To experience how PWA looks like, you can visit the PWA Rocks site