Progressive Web Apps — Part II: Add offline support for a web application

Jun 5, 2017, 2:57 PM

In part 1, 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.

PWA-2-blogikuva.jpg

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:

Progressive Web Apps – Part 1: the new way of making mobile apps

This article was originally posted on Medium

Sauli.png

THE AUTHOR

Sauli Ketola is a Software Architect at Nitor. Sauli is specialized in agile software development methodologies and test automation. He has wide-ranging experience in systems design and application development in the financial services sector. Occasionally, you might catch this enthusiastic hockey spectator on a run, dreaming of completing a full marathon.