Snippets for kick-starting your Progressive Web App (PWA).
All required template files are in /htdocs
.
- Create PNG icons with 192×192 pixels and 512×512 pixels and put them in your application root directory.
- Run
./setup.sh
to customize your snippets to your application's settings or customize your settings manually (see below). - Copy
manifest.json
to your application root directory. - Copy
sw.js
to the same folder asmanifest.json
. - Copy HTML from
index.html
's<head />
to your template's<head />
. In case you are using AMP pages, copy HTML fromamp.html
's<head />
to your template's<head />
. - Copy HTML from
index.html
's<script />
to your template's footer section. In case you are using AMP pages, copy HTML fromamp.html
's<amp-install-serviceworker />
to your template's footer section.
- Add the URLs of your PNG icons under
icons
. - Change the
name
,description
andshort_name
to match your site's settings. Remember to use less than 13 characters forshort_name
. - Change
theme_color
settings.
For more information see the documentation on manifest.json
at MDN and the documentation on manifest.json
at Google.
- Change icon URLs to match your PNG icon URLs.
- Change
theme-color
to match your theme color.
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 the safe zone for Android 8+ icons
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
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
- 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.
Author: Frank Boës
Copyright & license: See LICENSE.txt