pwa

intro.md

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

• https://en.wikipedia.org/wiki/Progressive_Web_Apps
• https://developers.google.com/web/progressive-web-apps/
• https://medium.com/@deepusnath/4-points-to-keep-in-mind-before-introducing-progressive-web-apps-pwa-to-your-team-8dc66bcf6011

project.md

Features

• Add to home screen
• Install banner
• Offline support
• App shell
• Push notifications?
• Background sync?
• Server side rendering (SEO + improve First Meaningful Paint(FMP))

Project

Workon Branch: https://github.com/itriage/employer_web_client/tree/pwa

prpl.md

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 />

References:

• https://developers.google.com/web/fundamentals/performance/prpl-pattern/
• https://www.gatsbyjs.org/docs/prpl-pattern/