Introduction

Progressive Web Apps are the experiences combining best of both worlds - web and apps. They require no installation and are useful to users from the first browser visit.

AppShell Architecture

The Application Shell Model architecture is one of the most common ways to build Progressive Web Apps. It separates the shell of UI and the data. Refer the below example.

wikipedia

What is App Shell?

The app's shell is the minimal HTML, CSS, and JavaScript that is required to create the skeleton UI of a PWA and is one of the components that ensures reliably good performance. Its first load should be quick and immediately cached. "Cached" means that the shell files are loaded only once over the network and then saved to the local device. Every time the user opens PWA, the app loads the shell files from the local device's cache, which results in lightning-fast startup times.

156b5e3cc8373d55

App shell architecture separates the core application template UI from the data. All of the UI and template is cached locally using a Service Worker so that on subsequent loads, the PWA only needs to retrieve the necessary data, instead of having to load everything.

Service Worker (SW)

Service Worker is a script that browser runs in the background which includes features like Periodical Background Sync and Push-Notification.

Lifecycle

  1. Install: We register the SW in page's JS, which causes the browser to install SW in the background and caches static assets.
  2. Activation: Handle old caches
  3. Fetch: To receive fetch events for the scope of service worker in case of network request from the page
  4. Terminate: To save the memory

sw-lifecycle

Web App Manifest

Defines the behaviour of your Web Application and includes app name, short_name, start_url, icons, background color, display, orientation, scope, theme_color.

devtools-manifest

What are PWA?

  1. Progressive: Works for all the users, regardless of browser choice and easily shareable via URL using Web App Manifest
  2. Web: responsive, served via HTTPS, works offline using AppShell Architecture
  3. App: Feels like an app, supports Push Notifications, installable to the home screen using Service Workers

Demo

Please find my experimentations on PWA https://www.vcillusion.co.in/PhilatelyLovers/
Here, I consumed Philately APIs from https://data.gov.in/ and used Material Design from https://getmdl.io/.