Simple Progressive Web App (PWA) template

What is this?

Simple PWA is a Progressive Web App template that provides the minimum file structure needed to create a PWA—a reliable and installable web application. It's up to you to build upon it, to make it capable.

Simple PWA is "offline-first", using a "cache first" caching strategy, which means on load, two asynchronous requests are kicked off—one to the cache, and one to the network. If there's a cached version available, it is used, but the updated version is fetched and stored for the next load. To force the cache to update from the network, change the value of cacheName in sw.js.

How do I use it?

  1. Clone the repository from GitHub.
  2. Create all favicon images using RealFaviconGenerator and replace existing images with generated images.

    If you're able to install the CLI version of RealFaviconGenerator, favicon_config.json contains all settings to generate these images using the following command from the project's root directory. The real-favicon tool generates images from favicon.png, so replace favicon.png prior to running this command. The resulting favicon_data.json and site.webmanifest can be discarded.

    real-favicon generate favicon_config.json favicon_data.json .

  3. Create new 650x650 maskable icon using Maskable.app and replace maskable_icon.png.
  4. Create new black vector icon using Manytools' colorize images tool and replace safari-pinned-tab.svg.
  5. Create new 1200x630 share image and replace share.jpg.
  6. Build upon the PWA by adding HTML, CSS, and Javascript.

Where can I find other PWAs?

Looking for inspiration? Check out these PWA directories:

Can I contribute?

Want to help improve this? Contributions are welcome! ➡️ GitHub