If you think about native apps and web apps in terms of capabilities and reach, native apps represent the best of capabilities whereas web apps represent the best of reach. So where do Progressive Web Apps fit in? Progressive Web Apps (PWA) are built and enhanced with modern APIs to deliver native-like capabilities, reliability, and installability while reaching anyone, anywhere, on any device with a single codebase. At their heart, Progressive Web Apps are just web applications. Using progressive enhancement, new capabilities are enabled in modern browsers. Using service workers and a web app manifest, your web application becomes reliable and installable. If the new capabilities aren't available, users still get the core experience.
You can read more about it in the following link: https://web.dev/what-are-pwas/
In order to build a PWA we need to do two things.
A brief introduction:
Service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don't need a web page or user interaction. Today, they already include features like push notifications and background sync. In the future, service workers might support other things like periodic sync or geofencing. The core feature discussed in this tutorial is the ability to intercept and handle network requests, including programmatically managing a cache of responses.
You can read more about it in the following link.
I highly recommend you to read two things about Service Workers
1. How the Service Workers life cycle works.
2. Which prerequisites we need to have in order to work with Services Workers.
Google documentation is pretty well explained, so I prefer to link to it instead of writing the same thing again.
Service Workers Life cycle: Life cycle
Service Workers Prerequisites: Prerequisites
To start we are going to create two pages. index.html
Create the css/styles.css stylesheet by copying the code from this Github Gist: css/styles.css
in your prefered terminal window, run the following command:
then we are going to modify the js/main.js file with the following code:
After registering/installing the service worker we are going to modify the service-worker.js file in order to add the cache into it.
Fetch the resources from the cache once they are present, in order to do that add this code to the service-worker.js file
Delete unused caches
This file should be created on the root folder. To do that we can run the following command on the terminal:
I'll write a brief description of each key of the manifest.json. If you want to read more details please check the following URL: https://web.dev/add-manifest/
Once we have the manfiest.webmanifest file then we need to link this file and add some required tags in our index.html and about.html pages.
Ready to get started? Use the form below or give us a call to meet our team and discuss your project and business goals.
We can’t wait to meet you!