Lesson 11 - PWA Features
index.html references the manifest.json in a
<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.
Testing the performance and quality of your PWA is done using Lighthouse.
- Progressive Web Apps - Google developers
- Vue CLI Webpack Template Docs
- Vue CLI PWA Template Docs
- Exemplary Progressive Web App Checklist
- Cross Platform PWA Workshop