How to use injectManifest in Workbox with Parcel-bundler? - reactjs

Question

I am building a service worker for my PWA with Workbox.
service-worker.js
import { registerRoute } from 'workbox-routing';
import { NetworkFirst } from 'workbox-strategies';
import { CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';
import * as googleAnalytics from 'workbox-google-analytics';
import { precacheAndRoute } from 'workbox-precaching';
googleAnalytics.initialize();
registerRoute(
({ request }) => request.destination === 'script',
new NetworkFirst()
);
registerRoute(
// Cache style resources, i.e. CSS files.
({ request }) => request.destination === 'style',
// Use cache but update in the background.
new StaleWhileRevalidate({
// Use a custom cache name.
cacheName: 'css-cache',
})
);
registerRoute(
// Cache image files.
({ request }) => request.destination === 'image',
// Use the cache if it's available.
new CacheFirst({
// Use a custom cache name.
cacheName: 'image-cache',
plugins: [
new ExpirationPlugin({
// Cache for a maximum of a week.
maxAgeSeconds: 7 * 24 * 60 * 60,
}),
],
})
);
precacheAndRoute(self.__WB_MANIFEST);
if (process.env.NODE_ENV !== 'production') {
console.log('This is a dev-only log message!');
}
Is there a way that Parcel injects only the latest version of files in the service worker after each build?
My Attempts
I tried using workbox-build in a node script but each time I ran npm run build, it added all the versions of the file present in the dist/ folder.
service-worker.js (when I used a Node script)
// code skipped for brevity
precacheAndRoute([
{"revision":"78416d1f083fa1a898d17e20d741a462","url":"Share.332aebe4.js"},{"revision":"413f2ed8c0dcd51e3c01855ac307f6d2","url":"Share.77f580e5.js"},{"revision":"c95daa634502ca4a38e1822e7460688e","url":"style.0f60499b.css"},{"revision":"7f4b6e94999540101a2a7e5b4226080e","url":"style.78032849.css"}])
They were different versions of the same file but I want only the latest version
I tried using parcel-plugin-sw-cache but couldn't figure out how to use it due to insufficient documentation.

Answer 1

parcel-plugin-sw-cache works when you change
precacheAndRoute(self.__WB_MANIFEST);
to
precacheAndRoute([]);
Also, when you're using injectManifest method, you need to provide "swSrc": "service-worker.js" in package.json (according to documentation)