Progressive Web Application (PWA) A Beginner’s guide

What is PWA ?

  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

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

Application Shell Architecture

  • Reliable performance that is consistently fast
  • Native-like interactions
  • Economical use of data

Push Notification Architecture

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

Google Lighthouse

--

--

--

Fullstack software Architect | Tech Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to Install PyGame on PyCharm?

Getting started with GatsbyJS

👩🏻‍🍳 Render Props, Apollo and Formik: build and compose forms in React with ease 🏄🏾‍

Understanding How Node Releases Work in 2018.

Create a Product Rating System with MongoDB and Node.js

Data Manipulation Using RxJS Declarative Pattern in Angular

RxJS and Angular logo

Webpack Javascript Bundling for Both Front-end and Back-end (nodejs)

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
Abhishek Ankush

Abhishek Ankush

Fullstack software Architect | Tech Blogger

More from Medium

APIs and innerHTML

Console log in the browser

A Walkthrough for fetching API

Introduction to Koa JS

Introduction to Koa js