Progressive Web Application (PWA) A Beginner’s guide

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. Progressive and Responsive: Every User, Every Browser, Every Device
  2. Connectivity Independent: Offline and low quality network mode
  3. App like experience: App style navigation and easy home screen launch
  4. Fast & Fresh Data: Always up-to-date
  5. Device Hardware access: Camera and geolocation api access
  6. Linkable and Discoverable: Sharing possible with URL & indexed by SEO
  7. 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 different threads from the main JavaScript that empowers your app
  2. Runs in its own global context
  3. Designed to be fully asynchronous; therefore, it doesn’t have access to things such as synchronous XHR and Local Storage
  4. Runs in worker context — thus, it doesn’t have access to DOM
  5. Runs HTTPS-Only in production, in addition to Localhost for development
  6. Runs in 1:1 scope, meaning there can be only one Service Worker per scope
  7. Can be terminated any time
  1. Register — when the user navigates to the website, by calling the register() function , the browser detects the Service Worker JavaScript file; therefore, it downloads, parses, and the execution phase begins
  2. 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.
  3. 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
  4. 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.

  • Reliable performance that is consistently fast
  • 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
  1. Serve over HTTPS (this was one of the PWA core concepts and required for Service Worker).

Debugging and Measurement tools

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

Google Lighthouse

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store