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.
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
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
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.
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
Like this post? Don’t forget to share it!