├── main.js ├── logo.png ├── favicon.ico ├── favicon.png ├── share.jpg ├── mstile-70x70.png ├── favicon-16x16.png ├── favicon-32x32.png ├── maskable_icon.png ├── mstile-144x144.png ├── mstile-150x150.png ├── mstile-310x150.png ├── mstile-310x310.png ├── apple-touch-icon.png ├── android-chrome-144x144.png ├── android-chrome-192x192.png ├── android-chrome-256x256.png ├── android-chrome-36x36.png ├── android-chrome-384x384.png ├── android-chrome-48x48.png ├── android-chrome-512x512.png ├── android-chrome-72x72.png ├── android-chrome-96x96.png ├── apple-touch-icon-57x57.png ├── apple-touch-icon-60x60.png ├── apple-touch-icon-72x72.png ├── apple-touch-icon-76x76.png ├── robots.txt ├── apple-touch-icon-114x114.png ├── apple-touch-icon-120x120.png ├── apple-touch-icon-144x144.png ├── apple-touch-icon-152x152.png ├── apple-touch-icon-180x180.png ├── .github └── FUNDING.yml ├── sitemap.xml ├── browserconfig.xml ├── style.css ├── favicon_config.json ├── manifest.json ├── sw.js ├── README.md ├── index.html └── safari-pinned-tab.svg /main.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/logo.png -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/favicon.ico -------------------------------------------------------------------------------- /favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/favicon.png -------------------------------------------------------------------------------- /share.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/share.jpg -------------------------------------------------------------------------------- /mstile-70x70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/mstile-70x70.png -------------------------------------------------------------------------------- /favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/favicon-16x16.png -------------------------------------------------------------------------------- /favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/favicon-32x32.png -------------------------------------------------------------------------------- /maskable_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/maskable_icon.png -------------------------------------------------------------------------------- /mstile-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/mstile-144x144.png -------------------------------------------------------------------------------- /mstile-150x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/mstile-150x150.png -------------------------------------------------------------------------------- /mstile-310x150.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/mstile-310x150.png -------------------------------------------------------------------------------- /mstile-310x310.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/mstile-310x310.png -------------------------------------------------------------------------------- /apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/apple-touch-icon.png -------------------------------------------------------------------------------- /android-chrome-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/android-chrome-144x144.png -------------------------------------------------------------------------------- /android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/android-chrome-192x192.png -------------------------------------------------------------------------------- /android-chrome-256x256.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/android-chrome-256x256.png -------------------------------------------------------------------------------- /android-chrome-36x36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/android-chrome-36x36.png -------------------------------------------------------------------------------- /android-chrome-384x384.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/android-chrome-384x384.png -------------------------------------------------------------------------------- /android-chrome-48x48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/android-chrome-48x48.png -------------------------------------------------------------------------------- /android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/android-chrome-512x512.png -------------------------------------------------------------------------------- /android-chrome-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/android-chrome-72x72.png -------------------------------------------------------------------------------- /android-chrome-96x96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/android-chrome-96x96.png -------------------------------------------------------------------------------- /apple-touch-icon-57x57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/apple-touch-icon-57x57.png -------------------------------------------------------------------------------- /apple-touch-icon-60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/apple-touch-icon-60x60.png -------------------------------------------------------------------------------- /apple-touch-icon-72x72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/apple-touch-icon-72x72.png -------------------------------------------------------------------------------- /apple-touch-icon-76x76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/apple-touch-icon-76x76.png -------------------------------------------------------------------------------- /robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: /.git 3 | Allow: / 4 | 5 | Sitemap: https://simplepwa.com/sitemap.xml -------------------------------------------------------------------------------- /apple-touch-icon-114x114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/apple-touch-icon-114x114.png -------------------------------------------------------------------------------- /apple-touch-icon-120x120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/apple-touch-icon-120x120.png -------------------------------------------------------------------------------- /apple-touch-icon-144x144.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/apple-touch-icon-144x144.png -------------------------------------------------------------------------------- /apple-touch-icon-152x152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/apple-touch-icon-152x152.png -------------------------------------------------------------------------------- /apple-touch-icon-180x180.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nikkifurls/simplepwa/HEAD/apple-touch-icon-180x180.png -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [nikkifurls] 4 | patreon: nicolefurlan 5 | custom: ["https://nicolefurlan.com", "https://www.paypal.com/donate?hosted_button_id=M7MMF3EWQTLKG"] -------------------------------------------------------------------------------- /sitemap.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | https://simplepwa.com/ 7 | 2020-08-22 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /browserconfig.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | #000000 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | background-color: black; 3 | color: white; 4 | font-family: helvetica, arial, sans-serif; 5 | font-size: 14px; 6 | line-height: 1.5; 7 | margin: 0; 8 | padding: 0; 9 | } 10 | 11 | .container { 12 | margin: 0 auto; 13 | max-width: 768px; 14 | padding: 20px 5%; 15 | } 16 | 17 | section { 18 | background-color: #171717; 19 | } 20 | 21 | h1, h2 { 22 | line-height: 1; 23 | text-transform: uppercase; 24 | } 25 | 26 | h2 { 27 | margin-top: 40px; 28 | } 29 | 30 | h2:first-of-type { 31 | margin-top: 20px; 32 | } 33 | 34 | .logo { 35 | display: block; 36 | } 37 | 38 | img { 39 | height: auto; 40 | max-width: 100%; 41 | } 42 | 43 | .logo img { 44 | width: 500px; 45 | } 46 | 47 | @media all and (max-width: 768px) { 48 | .logo img { 49 | width: 450px; 50 | } 51 | } 52 | 53 | @media all and (max-width: 479px) { 54 | .logo img { 55 | width: 350px; 56 | } 57 | } 58 | 59 | .icon.heart { 60 | color: lightcoral; 61 | } 62 | 63 | a { 64 | color: aquamarine; 65 | font-weight: bold; 66 | } 67 | 68 | a:hover, a:active { 69 | color: mediumaquamarine; 70 | } 71 | 72 | a code { 73 | color: black; 74 | } 75 | 76 | code { 77 | background-color: aquamarine; 78 | color: black; 79 | font-family: monospace; 80 | padding: 1px; 81 | user-select: all; 82 | } 83 | 84 | code.image { 85 | background-color: lightyellow; 86 | } -------------------------------------------------------------------------------- /favicon_config.json: -------------------------------------------------------------------------------- 1 | { 2 | "masterPicture": "favicon.png", 3 | "iconsPath": "/", 4 | "design": { 5 | "ios": { 6 | "pictureAspect": "backgroundAndMargin", 7 | "backgroundColor": "#000000", 8 | "margin": "18%", 9 | "assets": { 10 | "ios6AndPriorIcons": true, 11 | "ios7AndLaterIcons": true, 12 | "precomposedIcons": false, 13 | "declareOnlyDefaultIcon": true 14 | } 15 | }, 16 | "desktopBrowser": { 17 | "design": "raw" 18 | }, 19 | "windows": { 20 | "pictureAspect": "noChange", 21 | "backgroundColor": "#000000", 22 | "onConflict": "override", 23 | "assets": { 24 | "windows80Ie10Tile": false, 25 | "windows10Ie11EdgeTiles": { 26 | "small": false, 27 | "medium": true, 28 | "big": false, 29 | "rectangle": false 30 | } 31 | } 32 | }, 33 | "androidChrome": { 34 | "pictureAspect": "noChange", 35 | "themeColor": "#000000", 36 | "manifest": { 37 | "display": "standalone", 38 | "orientation": "notSet", 39 | "onConflict": "override", 40 | "declared": true 41 | }, 42 | "assets": { 43 | "legacyIcon": false, 44 | "lowResolutionIcons": true 45 | } 46 | }, 47 | "safariPinnedTab": { 48 | "pictureAspect": "blackAndWhite", 49 | "threshold": 89.21875, 50 | "themeColor": "#000000" 51 | } 52 | }, 53 | "settings": { 54 | "compression": 2, 55 | "scalingAlgorithm": "Mitchell", 56 | "errorOnImageTooSmall": false, 57 | "readmeFile": false, 58 | "htmlCodeFile": false, 59 | "usePathAsIs": false 60 | } 61 | } -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Simple PWA", 3 | "short_name": "Simple PWA", 4 | "display": "standalone", 5 | "start_url": "./?utm_source=pwa_install", 6 | "scope": ".", 7 | "theme_color": "#000", 8 | "background_color": "#000", 9 | "icons":[ 10 | { 11 | "src": "android-chrome-36x36.png", 12 | "sizes": "36x36", 13 | "type": "image/png" 14 | }, 15 | { 16 | "src": "android-chrome-48x48.png", 17 | "sizes": "48x48", 18 | "type": "image/png" 19 | }, 20 | { 21 | "src": "android-chrome-72x72.png", 22 | "sizes": "72x72", 23 | "type": "image/png" 24 | }, 25 | { 26 | "src": "android-chrome-96x96.png", 27 | "sizes": "96x96", 28 | "type": "image/png" 29 | }, 30 | { 31 | "src": "android-chrome-144x144.png", 32 | "sizes": "144x144", 33 | "type": "image/png" 34 | }, 35 | { 36 | "src": "android-chrome-192x192.png", 37 | "sizes": "192x192", 38 | "type": "image/png" 39 | }, 40 | { 41 | "src": "android-chrome-256x256.png", 42 | "sizes": "256x256", 43 | "type": "image/png" 44 | }, 45 | { 46 | "src": "android-chrome-384x384.png", 47 | "sizes": "384x384", 48 | "type": "image/png" 49 | }, 50 | { 51 | "src": "android-chrome-512x512.png", 52 | "sizes": "512x512", 53 | "type": "image/png" 54 | }, 55 | { 56 | "src": "maskable_icon.png", 57 | "sizes": "650x650", 58 | "type": "image/png", 59 | "purpose": "maskable" 60 | } 61 | ] 62 | } -------------------------------------------------------------------------------- /sw.js: -------------------------------------------------------------------------------- 1 | const cacheName = "cache1"; // Change value to force update 2 | 3 | self.addEventListener("install", event => { 4 | // Kick out the old service worker 5 | self.skipWaiting(); 6 | 7 | event.waitUntil( 8 | caches.open(cacheName).then(cache => { 9 | return cache.addAll([ 10 | "/", 11 | "android-chrome-36x36.png", // Favicon, Android Chrome M39+ with 0.75 screen density 12 | "android-chrome-48x48.png", // Favicon, Android Chrome M39+ with 1.0 screen density 13 | "android-chrome-72x72.png", // Favicon, Android Chrome M39+ with 1.5 screen density 14 | "android-chrome-96x96.png", // Favicon, Android Chrome M39+ with 2.0 screen density 15 | "android-chrome-144x144.png", // Favicon, Android Chrome M39+ with 3.0 screen density 16 | "android-chrome-192x192.png", // Favicon, Android Chrome M39+ with 4.0 screen density 17 | "android-chrome-256x256.png", // Favicon, Android Chrome M47+ Splash screen with 1.5 screen density 18 | "android-chrome-384x384.png", // Favicon, Android Chrome M47+ Splash screen with 3.0 screen density 19 | "android-chrome-512x512.png", // Favicon, Android Chrome M47+ Splash screen with 4.0 screen density 20 | "apple-touch-icon.png", // Favicon, Apple default 21 | "apple-touch-icon-57x57.png", // Apple iPhone, Non-retina with iOS6 or prior 22 | "apple-touch-icon-60x60.png", // Apple iPhone, Non-retina with iOS7 23 | "apple-touch-icon-72x72.png", // Apple iPad, Non-retina with iOS6 or prior 24 | "apple-touch-icon-76x76.png", // Apple iPad, Non-retina with iOS7 25 | "apple-touch-icon-114x114.png", // Apple iPhone, Retina with iOS6 or prior 26 | "apple-touch-icon-120x120.png", // Apple iPhone, Retina with iOS7 27 | "apple-touch-icon-144x144.png", // Apple iPad, Retina with iOS6 or prior 28 | "apple-touch-icon-152x152.png", // Apple iPad, Retina with iOS7 29 | "apple-touch-icon-180x180.png", // Apple iPhone 6 Plus with iOS8 30 | "browserconfig.xml", // IE11 icon configuration file 31 | "favicon.ico", // Favicon, IE and fallback for other browsers 32 | "favicon-16x16.png", // Favicon, default 33 | "favicon-32x32.png", // Favicon, Safari on Mac OS 34 | "index.html", // Main HTML file 35 | "logo.png", // Logo 36 | "main.js", // Main Javascript file 37 | "manifest.json", // Manifest file 38 | "maskable_icon.png", // Favicon, maskable https://web.dev/maskable-icon 39 | "mstile-70x70.png", // Favicon, Windows 8 / IE11 40 | "mstile-144x144.png", // Favicon, Windows 8 / IE10 41 | "mstile-150x150.png", // Favicon, Windows 8 / IE11 42 | "mstile-310x150.png", // Favicon, Windows 8 / IE11 43 | "mstile-310x310.png", // Favicon, Windows 8 / IE11 44 | "safari-pinned-tab.svg", // Favicon, Safari pinned tab 45 | "share.jpg", // Social media sharing 46 | "style.css", // Main CSS file 47 | ]); 48 | }) 49 | ); 50 | }); 51 | 52 | self.addEventListener("activate", event => { 53 | // Delete any non-current cache 54 | event.waitUntil( 55 | caches.keys().then(keys => { 56 | Promise.all( 57 | keys.map(key => { 58 | if (![cacheName].includes(key)) { 59 | return caches.delete(key); 60 | } 61 | }) 62 | ) 63 | }) 64 | ); 65 | }); 66 | 67 | // Offline-first, cache-first strategy 68 | // Kick off two asynchronous requests, one to the cache and one to the network 69 | // If there's a cached version available, use it, but fetch an update for next time. 70 | // Gets data on screen as quickly as possible, then updates once the network has returned the latest data. 71 | self.addEventListener("fetch", event => { 72 | event.respondWith( 73 | caches.open(cacheName).then(cache => { 74 | return cache.match(event.request).then(response => { 75 | return response || fetch(event.request).then(networkResponse => { 76 | cache.put(event.request, networkResponse.clone()); 77 | return networkResponse; 78 | }); 79 | }) 80 | }) 81 | ); 82 | }); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Simple PWA 2 | ## Simple Progressive Web App (PWA) template 3 | 4 | ### What is this? 5 | 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](https://web.dev/what-are-pwas/#reliable) and [installable](https://web.dev/what-are-pwas/#installable) web application. It's up to you to add functionality to make it [capable](https://web.dev/what-are-pwas/#capable). 6 | 7 | Simple PWA is "offline-first", using a ["cache falling back to the network"](https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker#cache_falling_back_to_the_network) caching strategy, which means any files specified in [`sw.js`](https://github.com/nikkifurls/simple-pwa/blob/master/sw.js#L10-L46) 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`](https://github.com/nikkifurls/simple-pwa/blob/master/sw.js), the value of [`cacheName`](https://github.com/nikkifurls/simple-pwa/blob/master/sw.js#L1) should be changed whenever the app is updated in order to force the cache to update from the network. 8 | 9 | - `android-chrome-36x36.png` Favicon, Android Chrome M39+ with 0.75 screen density 10 | - `android-chrome-48x48.png` Favicon, Android Chrome M39+ with 1.0 screen density 11 | - `android-chrome-72x72.png` Favicon, Android Chrome M39+ with 1.5 screen density 12 | - `android-chrome-96x96.png` Favicon, Android Chrome M39+ with 2.0 screen density 13 | - `android-chrome-144x144.png` Favicon, Android Chrome M39+ with 3.0 screen density 14 | - `android-chrome-192x192.png` Favicon, Android Chrome M39+ with 4.0 screen density 15 | - `android-chrome-256x256.png` Favicon, Android Chrome M47+ Splash screen with 1.5 screen density 16 | - `android-chrome-384x384.png` Favicon, Android Chrome M47+ Splash screen with 3.0 screen density 17 | - `android-chrome-512x512.png` Favicon, Android Chrome M47+ Splash screen with 4.0 screen density 18 | - `apple-touch-icon.png` Favicon, Apple default 19 | - `apple-touch-icon-57x57.png` Apple iPhone, Non-retina with iOS6 or prior 20 | - `apple-touch-icon-60x60.png` Apple iPhone, Non-retina with iOS7 21 | - `apple-touch-icon-72x72.png` Apple iPad, Non-retina with iOS6 or prior 22 | - `apple-touch-icon-76x76.png` Apple iPad, Non-retina with iOS7 23 | - `apple-touch-icon-114x114.png` Apple iPhone, Retina with iOS6 or prior 24 | - `apple-touch-icon-120x120.png` Apple iPhone, Retina with iOS7 25 | - `apple-touch-icon-144x144.png` Apple iPad, Retina with iOS6 or prior 26 | - `apple-touch-icon-152x152.png` Apple iPad, Retina with iOS7 27 | - `apple-touch-icon-180x180.png` Apple iPhone 6 Plus with iOS8 28 | - `browserconfig.xml` IE11 icon configuration file 29 | - `favicon_config.json` RealFaviconGenerator configuration file 30 | - `favicon.ico` Favicon, IE and fallback for other browsers 31 | - `favicon.png` Favicon generation source image 32 | - `favicon-16x16.png` Favicon, default 33 | - `favicon-32x32.png` Favicon, Safari on Mac OS 34 | - `index.html` Main HTML file 35 | - `logo.png` Logo 36 | - `main.js` Main Javascript file 37 | - `manifest.json` Manifest file 38 | - `maskable_icon.png` Favicon, [maskable](https://web.dev/maskable-icon) 39 | - `mstile-70x70.png` Favicon, Windows 8 / IE11 40 | - `mstile-144x144.png` Favicon, Windows 8 / IE10 41 | - `mstile-150x150.png` Favicon, Windows 8 / IE11 42 | - `mstile-310x150.png` Favicon, Windows 8 / IE11 43 | - `mstile-310x310.png` Favicon, Windows 8 / IE11 44 | - `README.md` Readme file 45 | - `robots.txt` Robots file 46 | - `safari-pinned-tab.svg` Favicon, Safari pinned tab 47 | - `share.jpg` Social media sharing 48 | - `sitemap.xml` Sitemap file 49 | - `sw.js` Service worker file 50 | - `style.css` Main CSS file 51 | 52 | ### How do I use it? 53 | 54 | 1. Clone the repository from [GitHub](https://github.com/nikkifurls/simple-pwa). 55 | 2. Create all favicon images using [RealFaviconGenerator](https://realfavicongenerator.net) and replace existing images with generated images. 56 | 57 | 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: 58 | 59 | `real-favicon generate favicon_config.json favicon_data.json .` 60 | 61 | 3. Create new 650x650 maskable icon using [Maskable.app](https://maskable.app) and replace `maskable_icon.png`. 62 | 4. Create new black vector icon using [`Manytools' colorize images tool`](http://manytools.org/image/colorize-filter) and replace [`safari-pinned-tab.svg`](https://github.com/nikkifurls/simple-pwa/blob/master/safari-pinned-tab.svg). 63 | 5. Create new 1200x630 share image and replace `share.jpg`. 64 | 6. Build your PWA by adding HTML, CSS, and Javascript. 65 | 66 | ### Can I contribute? 67 | 68 | YES! Contributions are welcome! -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Simple PWA 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 54 | 55 | 56 | 57 | 58 | 59 |
60 |
61 | 64 |

Simple Progressive Web App (PWA) template

65 |
66 |
67 | 68 |
69 |
70 |

What is this?

71 |

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. 72 |

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.

73 | 201 |

How do I use it?

202 |
    203 |
  1. Clone the repository from GitHub.
    2. 204 |
  2. Create all favicon images using RealFaviconGenerator and replace existing images with generated images. 205 |

    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.

    206 |

    real-favicon generate favicon_config.json favicon_data.json .

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

Where can I find other PWAs?

214 |

Looking for inspiration? Check out these PWA directories:

215 | 221 |

Can I contribute?

222 |

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

223 |
224 |
225 | 226 | 231 | 232 | 233 | 234 | 235 | -------------------------------------------------------------------------------- /safari-pinned-tab.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | --------------------------------------------------------------------------------