Progressive Web Apps
Updated on
Last site update: 8 May 2024
Unfinished article
aka A2HS or Add to Home Screen
To turn your web site into a progressive web app you need 3 things:
- A set of icons for the home screen of different mobile devices
- A site manifest.json file with info about your ‘app’ linked from the
<head>of your site. - A service worker to do work like caching files etc.
The site also needs to have an https connection.
Icon set
You need icons for all different mobile devices and screen and resolution sizes.
- 192px x 192px
- 512px x 512px
Create an your icon and quickly get a wide range of icons made from PWA Builder stored into a zip and downloaded into your project.
Service Workers
These don’t have to be created manually. There is a JS library called Workbox that even has a CLI to set up your service workers
Here’s a good introductory vid on PWA’s by Fireship.io