Skip to content

Latest commit

 

History

History
79 lines (55 loc) · 3.44 KB

README.md

File metadata and controls

79 lines (55 loc) · 3.44 KB
Raw

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 <amp-install-serviceworker /> to your template's footer section.

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:

You may want to use ImageMagick to convert your images to rectangular icons…

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

…or circular icons:

# @see http://www.imagemagick.org/Usage/thumbnails/#rounded
for SIZE in "192x192" "512x512"; do
  convert original.png -resize "${SIZE}^" -gravity center -crop ${SIZE}+0+0 \
  -alpha set \( +clone -distort DePolar 0 -virtual-pixel HorizontalTile -background None -distort Polar 0 \) \
  -compose Dst_In -composite -trim \
  +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