0

I'm trying to configure workbox-build to create a service worker (generateSW) or inject a manifest (injectManifest) to an existing service worker based on a list of predefined URLs instead of a pattern match in order to preCache specific resources on app load.

not like this:

const { generateSW } = require('workbox-build');

const swDest = 'app/cache-sw.js';
generateSW({
    globDirectory: "app/",
    globPatterns: [
        "**/*.{html,js,png,css,json,txt,ico,config}"
    ]
    swDest
}).then(({ count, size }) => {
    console.log(`Generated ${swDest}, which will precache ${count} files, totaling ${size} bytes.`);
});

but something like this:

const { generateSW } = require('workbox-build');

const swDest = 'app/cache-sw.js';
generateSW({
    globDirectory: "app/",
    manifestURLs: [
        "/index.html",
        "/favicon.ico",
        "/info.txt",
        ...
    ],
    swDest
}).then(({ count, size }) => {
    console.log(`Generated ${swDest}, which will precache ${count} files, totaling ${size} bytes.`);
});

So that the auto-generated service worker contains a manifest similar to something like this:

[
        {
            "url": "/index.html",
            "revision": "487659b6e9c542e7cd8227e0e9d0bed1"
        },
        {
            "url": "/favicon.ico",
            "revision": "29459c5d9c542e7cd8227e0e9d0if83"
        },
        {
            "url": "/info.txt",
            "revision": "73932c5d9c542e7cd8227e0e9z7el19"
        },
        ...
]

And the revision gets updated during build when a resource changes so that the cache is invalidated in the browser on next load.

Thanks in advance!

Dalton Mangrum
  • 1
  • 1

1 Answers1

0

A glob pattern without any wildcards should match literal filenames. You should be able to accomplish what you describe by using those filenames as the values passed to globPatterns:

const { generateSW } = require('workbox-build');

const swDest = 'app/cache-sw.js';
generateSW({
    globDirectory: "app/",
    globPatterns: [
        "index.html",
        "favicon.ico",
        "info.txt",
        ...
    ]
    swDest
}).then(({ count, size }) => {
    console.log(`Generated ${swDest}, which will precache ${count} files, totaling ${size} bytes.`);
});
Jeff Posnick
  • 53,580
  • 14
  • 141
  • 167
  • Hi Jeff, is it possible to lazy load the precache (workbox.precache.precache) or update it in the SW lifecycle after the SW is activated? That way we could post a message to the service worker on app load telling it which manifest to load? To put things in perspective we have 2 apps (different file manifests) running under a single domain. Thanks! – Dalton Mangrum Oct 26 '20 at 15:45
  • Your best bet would be to generate `sw1.js` and `sw2.js`, each with different manifests, and then call `navigator.serviceWorker.register()` with the URL of the appropriate service worker file, depending on whatever runtime conditions you have. You can check `navigator.serviceWorker.controller` inside your code to check if there is already a SW registered (for repeat visitors), and there's no need to register one again once that's done once. – Jeff Posnick Oct 26 '20 at 19:00