Snippets for kick-starting your PWA
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
htdocs Addd description to generator Sep 28, 2018
.editorconfig Initial commit Sep 26, 2018
.gitattributes Fix line endings Sep 27, 2018
.gitignore Move genereated files to special directory Sep 28, 2018
LICENSE.txt Initial commit Sep 26, 2018
README.md Add icon guide Dec 13, 2018
setup.sh Addd description to generator Sep 28, 2018

README.md

PWA Starter Kit

Snippets for kick-starting your Progressive Web App (PWA).

Instructions

All required template files are in /htdocs.

  1. Create PNG icons with 192×192 pixels and 512×512 pixels and put them in your application root directory.
  2. Run ./setup.sh to customize your snippets to your application's settings or customize your settings manually (see below).
  3. Copy manifest.json to your application root directory.
  4. Copy sw.js to the same folder as manifest.json.
  5. Copy HTML from index.html's <head /> to your template's <head />. In case you are using AMP pages, copy HTML from amp.html's <head /> to your template's <head />.
  6. Copy HTML from index.html's <script /> to your template's footer section. In case you are using AMP pages, copy HTML from amp.html's <head /> to your template's <head />.

Manually changing values in manifest.json

  1. Add the URLs of your PNG icons under icons.
  2. Change the name, description and short_name to match your site's settings. Remember to use less than 13 characters for short_name.
  3. Change theme_color settings.

For more information see the documentation on manifest.json at MDN and the documentation on manifest.json at Google.

Manually changing values in HTML snippets

  1. Change icon URLs to match your PNG icon URLs.
  2. Change theme-color to match your theme color.

Designing your own icons

If you are designing icons for your PWA you should consider the following guidelines:

  • Use PNG images
  • At least supply sizes 192×192 pixels and 512×512 pixels
  • You might want to consider circular icons on transparent background for Android 8+.

You may want to use ImageMagick to convert your images:

for SIZE in "192x192" "512x512"; do
  convert original.png -resize "${SIZE}^" -gravity center -crop ${SIZE}+0+0 +repage favicon-${SIZE}.png
done

Validation

Before relasing your PWA to the open public you should at least test the following cases:

  • Open "Chrome Desktop > Inspector (F12) > Audits" and run a "PWA audit"
  • Open Firefox Mobile and check if "Add to homescreen" (A2HS) shows up

More ressources

  • PWA Builder generates the snippets for you and validates your manifest.json.
  • Google's Workbox is a very simple way to build caching strategies.
  • PWA.rocks has some nice examples of PWAs.

Legal stuff

Author: Frank Boës

Copyright & license: See LICENSE.txt