PWA Kata

Step One - Get this deployed on Now - Realtime Global Deployments

An introduction in building your first PWA web app. Shall we start?

We need to be able to deploy our app to a domain with https so we can test our PWA application. Also its nice just to see the expierence work on a phone. You will need to start deploying your app from step three.

Setting up an account is free. Each time you deploy the url is a different url so copy the one thats in the commanline once you've ran npm run deploy.

Step Two - Build a manifest.json

A manifest is the first thing you need to do when building a PWA. When the user adds your website to the homescreen of their device, the manifest communicates to the device telling them how the website should display & what icon should be shown to the user on the homescreen/splash page. How to build a web app manifest

In the example above it tells you to save the file as a .webmaniefest you can use .json too which is what we are using in this example.

Step Three - Offline Page

We now have a manifest in place! Now lets get started on building an offline page. What I want you to do is cache '/offline/', 'main.js', 'style.css', 'pwa-lighthouse'. Once done, disconnect your wifi to check if your service worker redirects you to your offline page. Create a simple offline page

Once done turn off your wifi to continue (make sure you have turned off the mobile data too.)