Change precaching URL's / Service Worker scope - service-worker

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)
}

Answer 1

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}',
]