Progressive Web Apps — Part II: Add offline support for a web application
In the first part I described how progressive web apps will change the way mobile applications are made. In this second part I will go into more details with working code samples for implementing offline support for an application.
With native mobile applications it’s easy to have your static assets bundled in the application package. This makes the application start faster and enables using the application when offline. Now, using the Service Worker API and Cache you can have this for web apps too and you have better control for updates compared to native mobile apps as you don’t have to distribute your changes through app stores.
A service worker is a javacript file that runs between your app and the browser / network. With the help of a service worker you can affect the way network request are made from your application.
The next part is an example of a service worker that will fetch all the application’s static assets, cache them and serve them from cache when the application requests them. After serving the cached asset, it will try to refresh it from server. This way the application will start faster, work offline and it will automatically be updated in the background.
Create a sw.js file (this is the service worker).
To register the service worker in the application, add:
And that’s it. I suggest reading the following to get to know the service worker features and limitations better:
