👩💻 Simple PWA is a Progressive Web App template that provides the minimum file structure needed to create a PWA
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 densityandroid-chrome-48x48.png
Favicon, Android Chrome M39+ with 1.0 screen densityandroid-chrome-72x72.png
Favicon, Android Chrome M39+ with 1.5 screen densityandroid-chrome-96x96.png
Favicon, Android Chrome M39+ with 2.0 screen densityandroid-chrome-144x144.png
Favicon, Android Chrome M39+ with 3.0 screen densityandroid-chrome-192x192.png
Favicon, Android Chrome M39+ with 4.0 screen densityandroid-chrome-256x256.png
Favicon, Android Chrome M47+ Splash screen with 1.5 screen densityandroid-chrome-384x384.png
Favicon, Android Chrome M47+ Splash screen with 3.0 screen densityandroid-chrome-512x512.png
Favicon, Android Chrome M47+ Splash screen with 4.0 screen densityapple-touch-icon.png
Favicon, Apple defaultapple-touch-icon-57x57.png
Apple iPhone, Non-retina with iOS6 or priorapple-touch-icon-60x60.png
Apple iPhone, Non-retina with iOS7apple-touch-icon-72x72.png
Apple iPad, Non-retina with iOS6 or priorapple-touch-icon-76x76.png
Apple iPad, Non-retina with iOS7apple-touch-icon-114x114.png
Apple iPhone, Retina with iOS6 or priorapple-touch-icon-120x120.png
Apple iPhone, Retina with iOS7apple-touch-icon-144x144.png
Apple iPad, Retina with iOS6 or priorapple-touch-icon-152x152.png
Apple iPad, Retina with iOS7apple-touch-icon-180x180.png
Apple iPhone 6 Plus with iOS8browserconfig.xml
IE11 icon configuration filefavicon_config.json
RealFaviconGenerator configuration filefavicon.ico
Favicon, IE and fallback for other browsersfavicon.png
Favicon generation source imagefavicon-16x16.png
Favicon, defaultfavicon-32x32.png
Favicon, Safari on Mac OSindex.html
Main HTML filelogo.png
Logomain.js
Main Javascript filemanifest.json
Manifest filemaskable_icon.png
Favicon, maskable
mstile-70x70.png
Favicon, Windows 8 / IE11mstile-144x144.png
Favicon, Windows 8 / IE10mstile-150x150.png
Favicon, Windows 8 / IE11mstile-310x150.png
Favicon, Windows 8 / IE11mstile-310x310.png
Favicon, Windows 8 / IE11README.md
Readme filerobots.txt
Robots filesafari-pinned-tab.svg
Favicon, Safari pinned tabshare.jpg
Social media sharingsitemap.xml
Sitemap filesw.js
Service worker filestyle.css
Main CSS fileClone the repository from GitHub.
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 .
Create new 650x650 maskable icon using Maskable.app and replace maskable_icon.png
.
Create new black vector icon using Manytools' colorize images tool
and replace safari-pinned-tab.svg
.
Create new 1200x630 share image and replace share.jpg
.
Build your PWA by adding HTML, CSS, and Javascript.
YES! Contributions are welcome!