Lesson 11 - PWA Features

The project has built-in PWA support as a result of the template being built on top of the Vue CLI PWA template.

Manifest

The index.html references the manifest.json in a <link> tag:

<link rel="manifest" href="./static/manifest.json">

From the Google PWA site:

"The Web App Manifest allows you to control how your app appears and how it's launched. You can specify home screen icons, the page to load when the app is launched, screen orientation, and even whether or not to show the browser chrome."

The Stockpile manifest includes the name to be displayed on the home screen as well as the icons, theme color, and other display configuration.

Cross Browser Support

PWAs aren't just for Chrome on Android. The index.html contains other UI Customizations for browsers like Apple's Safari Mobile and Microsoft's Edge. Edge in particular has been very interested in implementing the PWA standards. Apple and iOS have less support, no service workers for example, but that is what the "P" in PWA is all about. Progressive enhancement when it is available. Apps like Stockpile can still be added to the home screen on iOS and can still have a very app-like experience.

PWA Best Practices

There are a few best practices when building an app that will also be served as a PWA. One way to ensure you have covered the basics is to go over the Exemplary Progressive Web App Checklist.

Service worker support

The Service Worker for Stockpile is generated by the sw-precache-webpack-plugin and injected into the index.html at build time. There are two different generated service workers. One is a placeholder for development builds, the other is a caching service worker generated for production builds. Only the production service worker actually caches any of the application.

Building/testing for dev’t vs production workflow

In order to test the service worker, you must test using the phonegap serve command, a node server commad like http-server www, or deploy to an https URL with Firebase or something similar. It is important to note that the sw-precache-webpack-plugin is currently used and does not work with the webpack dev server invoked by npm run dev.

Lighthouse

Testing the performance and quality of your PWA is done using Lighthouse.

Resources

Edit this page on GitHub