Change precaching URL's / Service Worker scope

Question

I'm trying to build a service worker using Workbox & Gulp that precaches specific assets, however, I'm running into an issue where the URL's being injected into the precache manifest are not valid.

I believe this is due to the scope of the service-worker, as it sits in the root directory and I want it to cache everything in the 'public' directory. I want my URL's to be public/assets/image_1.png but they are being added to the precache manifest as assets/image_1.png, and anything outside of the assets folder is being ignored.

I can correct the URL's by adding the service-worker.js into the public directory but then the service worker doesn't serve in the browser. I've tried manipulation the globPatterns in Gulp, but that throws a syntax error.

Has anyone run into this issue before? I'm new to service workers and haven't found any articles/GitHub pages/SO posts that could help me fix my issue so any help is greatly appreciated. Hopefully, this all made sense to someone.

Directory:

.
+-- gulpfile.js
+-- package.json
+-- service-worker.js
+-- index.php
+-- public
|   +-- style.css
|   +-- script.js
|   +-- assets
|       +-- image_1.png
|       +-- image_2.png
+-- pwa
|   +-- dev-service-worker.js

gulpfile.js

gulp.task('service-worker', () => {
    return workboxBuild.injectManifest({
        swSrc: 'pwa/dev-service-worker.js',
        swDest: 'service-worker.js',
        globDirectory: 'public',
        globPatterns: [
            '**\/*.{js,css,html,png,jpg,jpeg,woff2,ttf,eot,svg}',
        ]
    }).then(({count, size, warnings}) => {
        // Optionally, log any warnings and details.
        warnings.forEach(console.warn);
        console.log(`${count} files will be precached, totaling ${size} bytes.`);
    });
});

service-worker.js

try {

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

    const LOCATION_ORIGIN = self.location.origin;
    const PRECACHE_PREFIX = "test";
    const PRECACHE_NAME = "precache";
    const PRECACHE_SUFFIX = "v2";
    const WORKBOX_PRECACHE = `${PRECACHE_PREFIX}-${PRECACHE_NAME}-${PRECACHE_SUFFIX}`;

    const URL_RULES = {
        "page-required": [
            'public/'
        ],
        "page-denied": [
            "\/some", "\/denied", "/^\/urls/"
        ],
        "static-required": [
            /\.(?:js,css,html,png,jpg,jpeg,woff2,ttf,eot,svg)$/
        ],
        "static-denied": [
            "\/some", "\/denied", "/^\/urls/"
        ]
    };

    if(workbox) {
        workbox.setConfig({ debug: true });

        workbox.clientsClaim();
        workbox.skipWaiting();

        workbox.core.setCacheNameDetails({
            prefix: PRECACHE_PREFIX,
            suffix: PRECACHE_SUFFIX,
            precache: PRECACHE_NAME
        });

        workbox.precaching.precacheAndRoute([]);

        workbox.routing.registerRoute(matchPage, serveOfflinePage);

        workbox.routing.registerRoute(
            matchStaticResource,
            workbox.strategies.cacheFirst({
                cacheName: 'test-runtime-cache',
                plugins: [
                    new workbox.expiration.Plugin({
                        maxAgeSeconds: 1 * 24 * 60 * 60 // 1 day
                    })
                ]
            })
        );

        function matchPage({ url }) {
            return URL_RULES["page-required"].every(pattern => matchPattern(url.pathname, pattern))
            && !URL_RULES["page-denied"].some(pattern => matchPattern(url.pathname, pattern));
        }

        function serveOfflinePage({ url, event }) {
            return fetch(event.request)
            .then(response => {
                if (response.status === 401) {
                    self.registration.unregister()
                    .then(() => self.clients.matchAll())
                    .then(clients => {
                        clients.forEach(client => client.navigate(client.url))
                    })
                    .catch(error => console.log(`Unable to authenticate and/or reload: ${error}`))
                }
                return response;
            })
            .catch(error => {
                return caches.open(WORKBOX_PRECACHE)
                .then(cache => {
                    return cache.match('/offline.html')
                    .then(response => response)
                })
            });
        }

        function matchStaticResource({ url }) {
            return url.href.indexOf(LOCATION_ORIGIN) !== -1 &&
            URL_RULES["static-required"].every(pattern => matchPattern(url.pathname, pattern)) &&
            !URL_RULES["static-denied"].some(pattern => matchPattern(url.pathname, pattern));
        }

        function matchPattern(urlPath, pattern) {
            if (typeof pattern === "string") {
                return urlPath.indexOf(pattern) !== -1;
            } else if (pattern instanceof RegExp) {
                return pattern.test(urlPath);
            }
        }
    }

} catch(e) {
    // Prevent caching logic on fail (mainly protecting against importScripts() failure)
}

snack_overflow snack_overflow · Accepted Answer · 2019-12-10T09:27:00

The answer for me was setting more absolute paths in my Gulpfile. I added ./ for root and then gave my globPatterns a different path.

It's a simple fix in the end so I'll leave it here in case anyone else runs into a similar problem.

 swSrc: './pwa/dev-service-worker.js',
 swDest: './service-worker.js',
 globDirectory: 'public',
 globPatterns: [
     '**\/public\/**\/*.{js,css,html,png,jpg,jpeg,woff2,ttf,eot,svg}',
 ]

Change precaching URL's / Service Worker scope

1 Answers