-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f5c4a67
commit 068a9fe
Showing
3 changed files
with
64 additions
and
133 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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! | ||
| - Fix the rest of the PWA assets |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } | ||
| ] | ||
| } | ||
| "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" | ||
| } | ||
| ] | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters