diff --git a/README.md b/README.md index 9df0cd9..5594684 100644 --- a/README.md +++ b/README.md @@ -1,68 +1,5 @@ -# Simple PWA -## Simple Progressive Web App (PWA) template +# Nora Looks For Bugs -### 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). +## TODO: -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! \ No newline at end of file +- Fix the rest of the PWA assets diff --git a/manifest.json b/manifest.json index 2db5cb9..7d1783f 100644 --- a/manifest.json +++ b/manifest.json @@ -1,62 +1,62 @@ { - "name": "Simple PWA", - "short_name": "Simple PWA", - "display": "standalone", - "start_url": "./?utm_source=pwa_install", - "scope": ".", - "theme_color": "#000", - "background_color": "#000", - "icons":[ - { - "src": "android-chrome-36x36.png", - "sizes": "36x36", - "type": "image/png" - }, - { - "src": "android-chrome-48x48.png", - "sizes": "48x48", - "type": "image/png" - }, - { - "src": "android-chrome-72x72.png", - "sizes": "72x72", - "type": "image/png" - }, - { - "src": "android-chrome-96x96.png", - "sizes": "96x96", - "type": "image/png" - }, - { - "src": "android-chrome-144x144.png", - "sizes": "144x144", - "type": "image/png" - }, - { - "src": "android-chrome-192x192.png", - "sizes": "192x192", - "type": "image/png" - }, - { - "src": "android-chrome-256x256.png", - "sizes": "256x256", - "type": "image/png" - }, - { - "src": "android-chrome-384x384.png", - "sizes": "384x384", - "type": "image/png" - }, - { - "src": "android-chrome-512x512.png", - "sizes": "512x512", - "type": "image/png" - }, - { - "src": "maskable_icon.png", - "sizes": "650x650", - "type": "image/png", - "purpose": "maskable" - } - ] -} \ No newline at end of file + "name": "Nora Looks For Bugs", + "short_name": "Nora Looks For Bugs", + "display": "standalone", + "start_url": "./?utm_source=pwa_install", + "scope": ".", + "theme_color": "#000", + "background_color": "#000", + "icons": [ + { + "src": "android-chrome-36x36.png", + "sizes": "36x36", + "type": "image/png" + }, + { + "src": "android-chrome-48x48.png", + "sizes": "48x48", + "type": "image/png" + }, + { + "src": "android-chrome-72x72.png", + "sizes": "72x72", + "type": "image/png" + }, + { + "src": "android-chrome-96x96.png", + "sizes": "96x96", + "type": "image/png" + }, + { + "src": "android-chrome-144x144.png", + "sizes": "144x144", + "type": "image/png" + }, + { + "src": "android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "android-chrome-256x256.png", + "sizes": "256x256", + "type": "image/png" + }, + { + "src": "android-chrome-384x384.png", + "sizes": "384x384", + "type": "image/png" + }, + { + "src": "android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + }, + { + "src": "maskable_icon.png", + "sizes": "650x650", + "type": "image/png", + "purpose": "maskable" + } + ] +} diff --git a/site.webmanifest b/site.webmanifest index 72f9ea2..0def71f 100644 --- a/site.webmanifest +++ b/site.webmanifest @@ -11,12 +11,6 @@ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" - }, - { - "purpose": "maskable", - "sizes": "512x512", - "src": "maskable_icon.png", - "type": "image/png" } ], "theme_color": "#ffffff",