A Progressive Web App template built with vanilla JS

What makes this a PWA? -This template passes Google Chromes Lighthouse test, which goes through this checklist to determine if an app is a PWA.

web.dev pwa checklist

How to Start the Web App -A PWA must run on a server. The easiest way to do this is to clone this repo and in the same directory run a command to start a server. This one works great:

npx serve .

How to install

• PWAs unfortunately aren't universally supported, so first you need to be on a device and browser that allows them to be installed. Try Chrome or Edge for desktop.
• In Chrome or Edge for desktop, you will see an icon to install the app in the url bar. Click this and the installation process will start.

Features

• Web App Manifest: This describes the meta data for the application, such as what icon should be displayed once the PWA is installed as an app.
• Service Worker: This file has the code that makes the pwa run as a native app, such as caching the resources for offline use.
• App.js: JavaScript that registers the service worker and triggers the notifications.
• index.html: Has some tags in the head that are specific to pwas. These are needed to make sure the theme color and icons work on all devices that can install the pwa.
• icons: Have two icons that will show once the pwa is installed. These must be a certain size to pass the Lighthouse check. Use this website if you need to mask an icon: https://maskable.app/