Basically, a PWA is a website that, when visited on a mobile phone, can be saved on the user's device and thus feels and behaves just as a Native application. There is a loading screen, you get to remove the chrome UI ,and, should the connection drop, it still displays content. Best of all it boosts user engagement : if Android's Chrome browser (not sure about other mobile browsers) detects that the website is a PWA, it prompts the user to save it on its device's homescreen using the icon of your choice.
Why is it important?
PWA are good for your client's business. Alibaba, the Chinese Amazon, notices a 48% increase in user engagement thanks to the browser's prompt to "install" the website (source).
This makes the effort totally worth fighting for !
manifest.json that specifies how the website should behave as an installed application.
These were made by me using the same technique described here.
Many more examples are available here : pwa.rocks
Turning a website into a PWA may sound complicated (Service workers whaaaat ?), but it's not that difficult.
1. requirement: https instead of http
The hardest part is that it will only work on a website running on a secure domain (behind https:// instead of http://).
These are usually very hard to set up manually, but thanksfully, if you have your own server, you can use letsencrypt to make that super easy and automatic. And... FREE.
2.1 lighthouse test
- the lighthouse test is an automated test created and maintained by Google that test websites against three criteria : Progressive, Performance, Accessibility. It gives a score in percent for each, and advises on how to solve each issue. It's a great learning tool.
- the UpUp.js library
realfavicongenerator.net takes care of the visual layer of your PWA. It generates the manifest.json file mentioned above, alongside all the versions of your icons necessary when saving the website onto any mobile device, and an html snippet to add to your page's
ADVISE: although RFG offers you to put your assets in a subfolder, it will make it a lot harder to enable the PWA. So, keep it simple and put all images and manifest in the root folder of your website.
2.3 service workers, via upup.js
Just do the quick UpUp tutorial and you're good to go.
- Use Realfavicongenerator and generate the html and image code. Add them to your website code.
- Publish on your https domain.
- Do the lighthouse test.
- Analyse results.
- Fix each issue one by one.
- Go back to 3, rince and repeat.
- Iterate until you get as close to 100 everywhere, and 100 in "Progressive".
- Test on your mobile phone and see what happens. With chance, on Android you'll see a popup at the bottom, inviting you to save the website onto your phone homescreen!
Deeper into the rabbit hole...
You can find all the information you need on PWA in this book:
That's it! Happy PWA-ing!