diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..9bf4d12 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,4 @@ +{ + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true +} diff --git a/android-chrome-192x192.png b/android-chrome-192x192.png index d9ad329..b370ce3 100644 Binary files a/android-chrome-192x192.png and b/android-chrome-192x192.png differ diff --git a/android-chrome-512x512.png b/android-chrome-512x512.png index ee12c2b..dff4a0c 100644 Binary files a/android-chrome-512x512.png and b/android-chrome-512x512.png differ diff --git a/apple-touch-icon.png b/apple-touch-icon.png index 1e39b0e..447cd04 100644 Binary files a/apple-touch-icon.png and b/apple-touch-icon.png differ diff --git a/browserconfig.xml b/browserconfig.xml index a816a20..b3930d0 100644 --- a/browserconfig.xml +++ b/browserconfig.xml @@ -2,11 +2,8 @@ - - - - #000000 + #da532c diff --git a/favicon-16x16.png b/favicon-16x16.png index 9b87e6e..e6046d5 100644 Binary files a/favicon-16x16.png and b/favicon-16x16.png differ diff --git a/favicon-32x32.png b/favicon-32x32.png index ccde164..896e6de 100644 Binary files a/favicon-32x32.png and b/favicon-32x32.png differ diff --git a/favicon.ico b/favicon.ico index 8280837..52ccf06 100644 Binary files a/favicon.ico and b/favicon.ico differ diff --git a/index.html b/index.html index 7f946c8..2530642 100644 --- a/index.html +++ b/index.html @@ -1,234 +1,736 @@ - - + + + + + + Simple PWA + + - - - - Simple PWA - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + - - + + + + + + + + + + + + + + + + + + + - - - - + + - + + + + -
-
- -

Simple Progressive Web App (PWA) template

-
-
+ +
+
+ +

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—a reliable and installable web application. It's up to you to build upon it, to make it capable. -

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.

- -

How do I use it?

-
    -
  1. Clone the repository from GitHub.
    2. -
  2. 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 .

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

Where can I find other PWAs?

-

Looking for inspiration? Check out these PWA directories:

- -

Can I contribute?

-

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

-
-
+
+
+

What is this?

+

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

+

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

+ +

How do I use it?

+
    +
  1. + Clone the repository from + GitHub. +
    2. +
  2. + 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 + . +

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

Where can I find other PWAs?

+

Looking for inspiration? Check out these PWA directories:

+ +

Can I contribute?

+

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

+
+
- - - - - + + + diff --git a/maskable_icon.png b/maskable_icon.png index dd3828b..4a56baa 100644 Binary files a/maskable_icon.png and b/maskable_icon.png differ diff --git a/mstile-150x150.png b/mstile-150x150.png index d54af1b..fe489d2 100644 Binary files a/mstile-150x150.png and b/mstile-150x150.png differ diff --git a/safari-pinned-tab.svg b/safari-pinned-tab.svg index fde0bb1..0a230a1 100644 --- a/safari-pinned-tab.svg +++ b/safari-pinned-tab.svg @@ -1,18 +1,74 @@ - - - - - - - - - - - - - + + + + +Created by potrace 1.14, written by Peter Selinger 2001-2017 + + + + diff --git a/site.webmanifest b/site.webmanifest new file mode 100644 index 0000000..72f9ea2 --- /dev/null +++ b/site.webmanifest @@ -0,0 +1,25 @@ +{ + "name": "Nora Looks For Bugs", + "short_name": "Nora Looks For Bugs", + "icons": [ + { + "src": "/android-chrome-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/android-chrome-512x512.png", + "sizes": "512x512", + "type": "image/png" + }, + { + "purpose": "maskable", + "sizes": "512x512", + "src": "maskable_icon.png", + "type": "image/png" + } + ], + "theme_color": "#ffffff", + "background_color": "#ffffff", + "display": "standalone" +}