Template commit

README.md

@@ -0,0 +1,68 @@
+# 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](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).
+
+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.
+
+- `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](https://web.dev/maskable-icon)
+- `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](https://github.com/nikkifurls/simple-pwa).
+2. Create all favicon images using [RealFaviconGenerator](https://realfavicongenerator.net) 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](https://maskable.app) and replace `maskable_icon.png`.
+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).
+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!

browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/mstile-70x70.png"/>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <square310x310logo src="/mstile-310x310.png"/>
+            <wide310x150logo src="/mstile-310x150.png"/>
+            <TileColor>#000000</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

favicon_config.json

@@ -0,0 +1,61 @@
+{
+	"masterPicture": "favicon.png",
+	"iconsPath": "/",
+	"design": {
+		"ios": {
+			"pictureAspect": "backgroundAndMargin",
+			"backgroundColor": "#000000",
+			"margin": "18%",
+			"assets": {
+				"ios6AndPriorIcons": true,
+				"ios7AndLaterIcons": true,
+				"precomposedIcons": false,
+				"declareOnlyDefaultIcon": true
+			}
+		},
+		"desktopBrowser": {
+			"design": "raw"
+		},
+		"windows": {
+			"pictureAspect": "noChange",
+			"backgroundColor": "#000000",
+			"onConflict": "override",
+			"assets": {
+				"windows80Ie10Tile": false,
+				"windows10Ie11EdgeTiles": {
+					"small": false,
+					"medium": true,
+					"big": false,
+					"rectangle": false
+				}
+			}
+		},
+		"androidChrome": {
+			"pictureAspect": "noChange",
+			"themeColor": "#000000",
+			"manifest": {
+				"display": "standalone",
+				"orientation": "notSet",
+				"onConflict": "override",
+				"declared": true
+			},
+			"assets": {
+				"legacyIcon": false,
+				"lowResolutionIcons": true
+			}
+		},
+		"safariPinnedTab": {
+			"pictureAspect": "blackAndWhite",
+			"threshold": 89.21875,
+			"themeColor": "#000000"
+		}
+	},
+	"settings": {
+		"compression": 2,
+		"scalingAlgorithm": "Mitchell",
+		"errorOnImageTooSmall": false,
+		"readmeFile": false,
+		"htmlCodeFile": false,
+		"usePathAsIs": false
+	}
+}