Search code examples
vue.jsprogressive-web-appsworkbox

Using Workbox via a local copy, without a CDN

I have a small device that serves a webpage using Nginx in a local network. I'm developing the webpage using Vue and I need that once a person got connected to the server and visited the page, on disconnection, the page needs to work as normal

I'm currently using Workbox plugin and I get this code:

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

importScripts(
  "/precache-manifest.b62cf508e2c3da8c27f2635f7aab384a.js"
);

The problem is that it goes to the internet to download that file and I will not have an internet connection.

I tried downloading this file, but inside goes to the internet again.

Is there a way to get this to work in an offline environment?

Solution

  • You can follow the guidance in the workbox-sw docs to download a local copy of the bundled Workbox runtime libraries, and modify your service worker script to use those.

    Running:

    $ npx [email protected] copyLibraries /path/to/dir

    from the command line will download a local copy of the runtime to the specified directory (replace /path/to/dir with the desired location).

    You can then modify your service worker script so that it reads:

    importScripts("/path/to/dir/workbox-v4.3.1/workbox-sw.js");

workbox.setConfig({
  modulePathPrefix: '/path/to/dir/workbox-v4.3.1/'
});

importScripts(
  "/precache-manifest.b62cf508e2c3da8c27f2635f7aab384a.js"
);