Alibaba Cloud

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.

Characteristics of Progressive Web Apps

PWA are just 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 applicationcontent .
  • 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 – Is identifiable as an “application” thanks to 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 characteristics of PWA apps,lets look one of the ways to build.

VMWare AU/Asia Pacific

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.

App Shell Model for PWA
Image – App Shell Model for PWA

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 service worker is a script(java script) that browser runs in the background, separate from a web page that don’t need a web page or user interaction.

Some of the benefits of service workers

  • Capable of handling the push notification easily
  • Synchronise 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 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 Lighthouse tool.

Lighthouse Chrome Extension for auditing PWA sites
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 PWA Rocks site

Like this post? Don’t forget to share it!

Additional Resources

Summary
What are Progressive Web Apps (PWA) ?
Article Name
What are Progressive Web Apps (PWA) ?
Description
Progressive Web Apps (PWAs) are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications.
Author
Publisher Name
Upnxtblog
Publisher Logo