This is the PART 2 on Progressive Web Apps (PWAs). If you wanna learn more about why PWAs are so cool and powerdul, read PART 1 first.
PWA is once again a website that you can share to your home screen and use as an app. It can work offline due to caching and it looks and feels like a native app.
How will you ask? Let’s find out!
STEP 1. Build the backbone of your PWA
Create your index.html, style.css and app.js files just like you’d do for a normal website.
STEP 2. Add manifest.json
The manifest is a json file that file that informs the browser about your web app. It is used to specify how the app will look and behave on different devices, and also to enable that “Add to home screen” prompt.
Step 3. Create serviceWorker.js and register it in app.js
The next requirement is to register a service worker. Service workers are essentially scripts that handle network requests, manage the cache and send push notifications to your users. They are what makes PWAs feel like native apps!
STEP 4. Test your PWA
Now that you have your PWA all set and ready, use Google’s Lighthouse to see how well your app conforms to PWA standards.
This is a very short tutorial to give you an idea of how much (or little) effort it is to create a PWA. Basically, it is not more difficult than creating a normal website. For a very simple functional PWA, you just need to include two special files manifest.json and serviceWorker.js, ad an icon for the home screen and your’re good to go.