Simple PWA

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. These files collectively represent a reliable and installable web application. It's up to you to add functionality to make it capable.

Simple PWA is "offline-first", using a "cache falling back to the network" caching strategy, which means any files specified in sw.js will be cached, and therefore, accessible offline. Non-cached requests (including non-GET requests, as they cannot be cached), will not be accessible offline, and instead, will ping the network or fail if there is no network available. In sw.js, the value of cacheName should be changed whenever the app is updated in order to force the cache to update from the network.

• android-chrome-36x36.png Favicon, Android Chrome M39+ with 0.75 screen density
• android-chrome-48x48.png Favicon, Android Chrome M39+ with 1.0 screen density
• android-chrome-72x72.png Favicon, Android Chrome M39+ with 1.5 screen density
• android-chrome-96x96.png Favicon, Android Chrome M39+ with 2.0 screen density
• android-chrome-144x144.png Favicon, Android Chrome M39+ with 3.0 screen density
• android-chrome-192x192.png Favicon, Android Chrome M39+ with 4.0 screen density
• android-chrome-256x256.png Favicon, Android Chrome M47+ Splash screen with 1.5 screen density
• android-chrome-384x384.png Favicon, Android Chrome M47+ Splash screen with 3.0 screen density
• android-chrome-512x512.png Favicon, Android Chrome M47+ Splash screen with 4.0 screen density
• apple-touch-icon.png Favicon, Apple default
• apple-touch-icon-57x57.png Apple iPhone, Non-retina with iOS6 or prior
• apple-touch-icon-60x60.png Apple iPhone, Non-retina with iOS7
• apple-touch-icon-72x72.png Apple iPad, Non-retina with iOS6 or prior
• apple-touch-icon-76x76.png Apple iPad, Non-retina with iOS7
• apple-touch-icon-114x114.png Apple iPhone, Retina with iOS6 or prior
• apple-touch-icon-120x120.png Apple iPhone, Retina with iOS7
• apple-touch-icon-144x144.png Apple iPad, Retina with iOS6 or prior
• apple-touch-icon-152x152.png Apple iPad, Retina with iOS7
• apple-touch-icon-180x180.png Apple iPhone 6 Plus with iOS8
• browserconfig.xml IE11 icon configuration file
• favicon_config.json RealFaviconGenerator configuration file
• favicon.ico Favicon, IE and fallback for other browsers
• favicon.png Favicon generation source image
• favicon-16x16.png Favicon, default
• favicon-32x32.png Favicon, Safari on Mac OS
• index.html Main HTML file
• logo.png Logo
• main.js Main Javascript file
• manifest.json Manifest file
• maskable_icon.png Favicon, maskable
• mstile-70x70.png Favicon, Windows 8 / IE11
• mstile-144x144.png Favicon, Windows 8 / IE10
• mstile-150x150.png Favicon, Windows 8 / IE11
• mstile-310x150.png Favicon, Windows 8 / IE11
• mstile-310x310.png Favicon, Windows 8 / IE11
• README.md Readme file
• robots.txt Robots file
• safari-pinned-tab.svg Favicon, Safari pinned tab
• share.jpg Social media sharing
• sitemap.xml Sitemap file
• sw.js Service worker file
• style.css Main CSS file

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 your PWA by adding HTML, CSS, and Javascript.

Can I contribute?

YES! Contributions are welcome!