diff --git a/img/forest.webp b/img/forest.webp new file mode 100644 index 0000000..4494a7f Binary files /dev/null and b/img/forest.webp differ diff --git a/index.html b/index.html index 2530642..744839d 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,8 @@ - Simple PWA - + Nora Looks for Bugs + @@ -46,27 +46,30 @@ /> - + + - - + - - + + - - - @@ -83,654 +86,5 @@ - -
-
- -

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

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

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 -

-
-
- - - +