How to use injectManifest in Workbox with Parcel-bundler?

1

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

  1. 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 are different versions of the same file but I want only the latest version

  1. I tried using parcel-plugin-sw-cache but couldn’t figure out how to use it due to insufficient documentation.