PWA

What and Why

What

Definitions:

Unlike traditional applications, progressive web apps are a hybrid of regular web pages (or websites) and a mobile application. This new application model attempts to combine features offered by most modern browsers with the benefits of mobile experience.

Fast — Respond quickly to user interactions with silky smooth animations and no janky scrolling
Reliable — Load instantly and never show the downasaur, even in uncertain network conditions.
Engaging — Feel like a natural app on the device, with an immersive user experience.
- installable on home screen
- immersive full screen experience
- re-engage users with web push notifications

Why

✅ Worthy of being on the home screen
✅ Increased engagement
✅ Work reliably, no matter the network conditions
✅ Improved conversions

Core Concepts

App shell arch

The app "shell" is the minimal HTML, CSS and JavaScript required to power the user interface and when cached offline can ensure instant, reliably good performance to users on repeat visits.

Benefits:

Reliable performance that is consistently fast. Repeat visits are extremely quick. Static assets and the UI (e.g. HTML, JavaScript, images and CSS) are cached on the first visit so that they load instantly on repeat visits. Content may be cached on the first visit, but is typically loaded when it is needed.
Native-like interactions. By adopting the app shell model, you can create experiences with instant, native-application-like navigation and interactions, complete with offline support.
Economical use of data

Requirements:

Load fast
Use as little data as possible
Use static assets from a local cache
Separate content from navigation
Retrieve and display page-specific content (HTML, JSON, etc.)
Optionally, cache dynamic content

App Manifest

The web app manifest provides information about an application (such as its name, author, icon, and description) in a JSON text file

How to reference it in HTML page?

<link rel="manifest" href="/manifest.webmanifest">

Example:

{
  "name": "HackerWeb",
  "short_name": "HackerWeb",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#fff",
  "description": "A simply readable Hacker News app.",
  "icons": [{
    "src": "images/touch/homescreen48.png",
    "sizes": "48x48",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen72.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen96.png",
    "sizes": "96x96",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen144.png",
    "sizes": "144x144",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen168.png",
    "sizes": "168x168",
    "type": "image/png"
  }, {
    "src": "images/touch/homescreen192.png",
    "sizes": "192x192",
    "type": "image/png"
  }],
  "related_applications": [{
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
  }]
}

Splash screens

In Chrome 47 and later, a splash screen is displayed for sites launched from a homescreen. This splashscreen is auto-generated from properties in the web app manifest, specifically:

name
background_color
The icon in the icons array that is closest to 128dpi for the device.

Service Worker

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. The core feature is the ability to intercept and handle network requests, including programmatically managing a cache of responses.

The reason this is such an exciting API is that it allows you to support offline experiences, giving developers complete control over the experience.

Today, they already include features like push notifications and background sync. In the future, service workers might support other things like periodic sync or geofencing.

webpack plugins:

offline plugin https://github.com/NekR/offline-plugin/blob/master/docs/examples/SPA.md

Samples:

service worker samples

Checklist

https://developers.google.com/web/progressive-web-apps/checklist

Reference

PRPL pattern

PRPL is a web site architecture developed by Google for building websites and apps that work exceptionally well on smartphones and other devices with unreliable network connections.

Push critical resources for the initial URL route using and http/2.

asset type file name from (webpack plugin)

html index.html Html Webpack Plugin

css app.css Extract Text Plugin

js app.js, vendor.js Common Chunks Plugin
Render initial route.

render at technology Required tool

server runtime SSR ReactDOMServer API, Express(node) server

build time JAM Stack prerender spa plugin
static-site-generator-webpack-plugin

/login for unauthenticated user, /home for authenticated user.
Pre-cache remaining routes.

<link preload/> pages or views that linked from initial page (/home), our case /search, /claims, /provider maybe.
Lazy-load and create remaining routes on demand.

Code splitting and <link prefetch />

lxyad/intro.md

PWA