How to Build a PWA in Vanilla JavaScript

The article starts a three-part series on building a Progressive Web App with the Web Push API and cron-schedule. In this first part, it covers the front end, the web app manifest, the service worker, and a simple Express setup, using only JavaScript.

Reading notes

#

• The app is meant to remind the author to take pills every day, even when the browser is not open.
• A manifest is generated for the app and placed in a public folder with icons and basic metadata.
• The example app is called Temporas.
• The page registers a service worker from index.html.
• The service worker caches index.html and manifest.json during install.
• Fetch requests are intercepted so cached files are served when available.
• The app is served through Express instead of opening public/index.html directly.
• The server uses body-parser for JSON and serves the public folder as static content.
• Running the app from localhost lets it keep working from the service worker cache after the server is stopped.
• The author recommends disabling service worker caching while developing new features.
• Lighthouse is suggested for testing the PWA.
• The app must be served over HTTPS to count as a PWA and to be installable.