Progressive Web Application (PWA) A Beginner’s guide

Progressive Web Apps(PWA) could be next big thing for Mobile web development. Introduced by Google in 2015, PWA have shown great potential using best of capabilities from Native apps and Mobile web applications providing a massive win for the application’s user experience.

What is PWA ?

A PWA is a mobile web application build with common web technologies including HTML, CSS and JavaScript with capabilities like working offline, Push notification, Device Hardware access, easy access from Native apps.

  1. Connectivity Independent: Offline and low quality network mode
  2. App like experience: App style navigation and easy home screen launch
  3. Fast & Fresh Data: Always up-to-date
  4. Device Hardware access: Camera and geolocation api access
  5. Linkable and Discoverable: Sharing possible with URL & indexed by SEO
  6. Engaging: Push-notification support for user engagement
Feature Comparison between PWA, Native App & Responsive web application

Core Building Blocks for PWA

  1. Service Workers: For Offline Support
  2. Web App Manifest file: For Home screen access
  3. Application Shell Architecture: For different screen/device support
  4. Push Notification: For keeping user engaged

Service Workers: The Brain of PWA

A service worker is an event-driven worker registered against an origin and a path. It takes the form of a JavaScript file that can control the web-page/site that it is associated with, intercepting and modifying navigation and resource requests, and caching resources in a very granular fashion to give you complete control over how your app behaves in certain situations helping the application to work offline or in low network.

Web page make a request service worker intercepts the same and check if the response is already avaiable in cache and respond
Service worker Placement
  1. Runs in its own global context
  2. Designed to be fully asynchronous; therefore, it doesn’t have access to things such as synchronous XHR and Local Storage
  3. Runs in worker context — thus, it doesn’t have access to DOM
  4. Runs HTTPS-Only in production, in addition to Localhost for development
  5. Runs in 1:1 scope, meaning there can be only one Service Worker per scope
  6. Can be terminated any time
  1. Install — This is the best place to precache all of the static assets. Keep in mind that an install event happens only the first time after registration.
  2. Activate — This event activates the newly registered Service worker and start using the same for the application. This is also the good time to clean up old caches and other things associated with the previous version of your service worker
  3. Idle — once install and activate events are completed with no errors, Service Worker will be effective. However, if it fails during installation, activation, or is replaced by a new one, it remains redundant and does not affect the app
Service worker Lifecycle

Web App Manifest file

Web App Manifest file helps the web application to enable the functionality of add to Home screen. This is a JSON text file following Web App Manifest specification that provides information about an application such as its name, author, icons, and description. This file enables an application to be installed by a user on their device and allows us to modify the theme, URL that should be opened, splash screen, icons on home page etc. Below are few important attributes from the same:

Application Shell Architecture

An 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.

  • Native-like interactions
  • Economical use of data

Push Notification Architecture

A notification is a message that pops up on the user’s device. Notifications can be triggered locally by an open application, or they can be “pushed” from the server to the user even when the app is not running. They allow your users to opt-in to timely updates and allow you to effectively re-engage users with customized content.

Push notification examples
Push Notification Subscription
Offline mode support

Debugging and Measurement tools

Debugging of PWA application can be done with below two good tools:

Google Lighthouse

Fullstack software Architect | Tech Blogger