Build a PWA using Workbox

MPyK
MPyK in The Web Tub
Jan 23 · 6 min read
Image courtesy of Workbox

Let’s get started

Lets being by creating an empty PWA app using Monaca CLI.

Why Workbox?

When previewing the launched app, from the above section, you will notice that it shows This is a PWA template for Monaca App and that it is already PWA-compliant. What makes it PWA-compliant is that the app already equips the manifest.jsonand service-worker.js.

Non-Workbox vs Workbox

To explain the differences between non-Workbox and Workbox, we are going to compare by coding. Let’s say we want to implement a caching strategy in which the latest resources is not vital to the current application state. Simply put, if there’s a cached version available which will be loaded first while it fetches the latest version and saves it to cache for next time usage (see the picture below for more detail).

Stale-while-revalidate Cache Strategy — Image courtesy of Workbox
Then…
…Now

Start Coding

Now that you are convinced and have no questions. Let’s actually start coding.

Obtain the apiKey

First, we will be implementing a simple feature that fetched a list of headline articles when the app is loaded. We will be using NewsApi, so let’s quickly create a free account and obtain the authentication key (apiKey).

Fetching the news

  1. Open the main.js file under the www/script directory and write the following code:
fetch the news articles
index.html
style.css
No offline support

Offline support using Workbox

Next, we will implement caching strategies and offline support for our News App.

Workbox CLI

Since we are going to use Workbox API, let’s first get started by installing Workbox CLI as devDependencies by running the following command.

Service worker source file
  • Image: any files (requests) ending with png|svg|jpg|jpeg is cached for one week.
  • News API: any requests containing https://newsapi.org/v2/top-headlines is cached for 30 minutes.
  • StaleWhileRevalidate strategy to cache runtime News API response.

Go Offline

Finally, to compile and generate the service worker file, we need to run npx workbox injectManifest workbox-config.js. Also, we need to run npm run dev to view the app. To save us some time, let’s create a few simple npm scripts that will generate the service worker and launch the app.

Offline support

Conclusion

In this tutorial, we’ve seen how to use Workbox to configure Service Worker for precaching, runtime caching strategies, and offline support. Workbox provides the best approach for implementing production-ready code with little effort. It helps us to configure service worker properly so that the app is fast and reliable. If you’re a fan of PWA and haven’t tried Workbox yet, I strongly suggest you try at least once. I am sure Workbox will grow on you as it did for me. Hope you find this useful and gives you more reasons to develop PWAs.

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.

Thanks to Erisu.

MPyK

Written by

MPyK

Just a simple programmer

The Web Tub

Pushing the web current through hybrid mobile and PWA technology. Presented by the Monaca and Onsen UI team.