Progressive Web App Google Code Lab

my notes from: https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0

What is a Progressive Web App?

A Progressive Web App is:

  • Progressive - Works for every user, regardless of browser choice because it's built with progressive enhancement as a core tenet.
  • Responsive - Fits any form factor: desktop, mobile, tablet, or whatever is next.
  • Connectivity independent - Enhanced with service workers to work offline or on low-quality networks.
  • App-like - Feels like an app, because the app shell model separates the application functionality from application content.
  • Fresh - Always up-to-date thanks to the service worker update process.
  • Safe - Served via HTTPS to prevent snooping and to ensure content hasn't been tampered with.
  • Discoverable - Is identifiable as an "application" thanks to W3C manifest and service worker registration scope, allowing search engines to find it.
  • Re-engageable - Makes re-engagement easy through features like push notifications.
  • Installable - Allows users to add apps they find most useful to their home screen without the hassle of an app store.
  • Linkable - Easily share the application via URL, does not require complex installation.

What is the app shell?

  1. app shell - is the minimal HTML, CSS, and Javascript that is required to power the user interface of a PWA

    • the first load should be quick and instantly "cached"
    • all subsequent loads, load files from the local device cache
  2. App Shell architecture separates hte core applicaiton infrastructure and UI from the data

    • the UI and infrastructure is cahced locally using a service worker, so on future loads, the app only needs to get data
  3. 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

Design the App Shell

Ask yourself:

  • What shall be displayed instantly?
  • What other UI components are critical to the app?
  • What support resources are required for the app shell?

Start with a fast first load

PWAs start fast and are readibly usable. They shall provide real data in the first load.

  1. Differentiate the first fun - use User Preferences and store them locally using IndexedDB or another fast storage medium

Use service workers to pre-cache the App Shell

References

Service Worker Overview

Debugging Service Workers code lab

  1. The Service Worker caches the app shell so that it is always available quickly and reliably

  2. Features provided by service workers can be considered progressive, only add them if supported by the browser

    • Example:
      • cache the app shell and data if user is offline
      • when service workers are not supported, the offline code is not called, and user gets basic experience
        -note: using feature detection to provide progressive enhancement has little overhead and it won't break in older browsers that do not support the feature
  3. Service worker functionality is only available on pages that are accessed via HTTPS

Steps:

  1. Register the service worker if it is available:
    • Tell browser to register the JavaScript file as the service worker
    • Create a JavaScript file containing that service worker
if ('serviceWorker' in navigator) {
    navigator.serviceWorker
             .register('./service-worker.js')
             .then(function() { console.log('Service Worker Registered'); });
  }
  1. The service worker then open the caches object and populates it with the assets necessary to load the App Shell
Progressive Web App Google Code Lab
Share this