Easy Service Workers with Workbox

Written by on

Workbox is a really easy way to add a service worker to a Single Page App, this article looks at adding offline capability to a Laravel and Vue SPA we've built previously but steps taken are easily transferable to any SPA.

Previously we looked at creating a simple Single Page Application with Laravel and Vue Router - We’ll be using this example to explore Service Workers with Workbox. If you’d like to look at our simple SPA you can find it here.

Workbox is an easy way to add a service worker to any SPA. Please note that to test your service worker you will need a secure server, if you are using Valet you can achieve this simply by going to your terminal and running:

valet secure

Once you’re sunning on a secure server we’ll need to install Workbox - In your terminal cd to your SPA directory and run:

npm install workbox-cli --save-dev

Now that Workbox is installed we can run it locally with npx which we will use to run workbox wizard which will scan our files and ask us a number of questions. Now in your terminal run:

npx workbox wizard

 "What is the root of your web app?", if you’re following along with our SPA then choose “public”. To keep this tutorial simple we’ll use the default options for the remaining questions. We can edit these options later.

You should now have a workbox-config.js file in the root of your SPA that looks something like this:

module.exports = {
    "globDirectory": "public/",
        "globPatterns": [
        "**/*.{css,ico,eot,svg,ttf,woff,woff2,php,js,json,txt,config}"
    ],
    "swDest": "public/sw.js"
};

Now we’re going to generate our sw.js file by running:

workbox generateSW

This will generate the files that the Service Worker will cache - However at the moment we may have a list of files we want to cache but our browser is not aware of them so we need to register our Service Worker. If you’re following along with the SPA we built previously then open resources > assets > js bootstap.js in your text editor and add the following:

if ('serviceWorker' in navigator) {
    window.addEventListener('load', () => {
        navigator.serviceWorker.register('/sw.js');
    });
}

The easiest way to see if your Service Worker is working is by opening DevTools in Google Chrome and clicking on the "Application" Tab - Here you should see something like this:

Our service worker is running! However if we were to check the “Offline” box and mimic our App being offline everything breaks! Which is not what we want!

In our case because we’re using an index.php to serve our Application we need to take more control of our Service Worker. In our public folder we’re going to make a new file called src-sw.js and add the following:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.0.0/workbox-sw.js');

workbox.precaching.precacheAndRoute([]);

workbox.routing.registerNavigationRoute('/index.php');

This will tell our Service Worker that all routes go through our index.php file. Next we’re going to open up our workbox-config.js file and add:

swSrc: "public/src-sw.js",

 Above:

swDest: "public/sw.js"

Now open the terminal and run: 

npx workbox injectManifest

Now when we go back to our app in the Chrome and open up DevTools beneath the “Application” tab we can check the “Offline” box to mimic our App being offline with the Service worker running refreshing the page now our App will still run*, despite being offline. 

*You may need to clear your cache.

 And there we have it, our simple Laravel and Vue SPA now has offline capabilities giving a much more native experience when the user has poor or no internet connection.

  • Javascript
  • Service Workers
  • Workbox
  • Single Page Application