Sharing service worker script between different Vue apps. Code fragment of the `Vue 2 to Vue 3 migration tips` article

1-vue.config.js

// ... imports

/**
 * Configuration of the Foo frontend application.
 */
const FOO = {
    pwa: {
        name: 'Foo app',
        workboxPluginMode: 'InjectManifest', // use 'InjectManifest' if you want to have custom service worker config
        // See the full list of Workbox configuration options
        // [here](https://developer.chrome.com/docs/workbox/reference/workbox-build/#type-InjectManifestOptions)
        workboxOptions: {
            // ... other Workbox options
            swSrc: './src/foo/sw/service-worker.js',
            swDest: './service-worker.js',
        },
        // ... other PWA options
    },
    // ... other app options
};

/**
 * Configuration of the Bar application.
 */
const BAR = {
    pwa: {
        name: 'Bar app',
        workboxPluginMode: 'InjectManifest',
        workboxOptions: {
            // ... other Workbox options
            swSrc: './src/bar/sw/service-worker.js',
            swDest: './service-worker.js',
        },
        // ... other PWA options
    },
    // ... other app options
};

// ... other config definitions

2-foo-service-worker.js

import runServiceWorkerScript from '@common/sw/service-worker-script';

/**
 * Main service worker script of the Foo frontend app.
 */

/**
 * The version of the web app ready for deployment.
 *
 * @type {string}
 */
const appVersion = '1.0';

// Do not remove 'self.__WB_MANIFEST'.
// It is replaced with actual precache manifest by 'workbox-webpack-plugin' at compile time.
// https://developer.chrome.com/docs/workbox/migration/migrate-from-v4/#default-precache-manifest-replacement-point
runServiceWorkerScript(appVersion, self.__WB_MANIFEST);

3-bar-service-worker.js

import runServiceWorkerScript from '@common/sw/service-worker-script';

/**
 * Main service worker script of the Bar frontend app.
 * 
 * <p>See how this and previous SW scripts share the same codebase, but define own versions.
 */

/**
 * The version of the web app ready for deployment.
 *
 * @type {string}
 */
const appVersion = '2.64';

runServiceWorkerScript(appVersion, self.__WB_MANIFEST);

4-service-worker-script.js

import enableWorkboxCaching from '@common/sw/workbox-caching';

/**
 * Runs service worker script as if it is deployed and executes in background,
 * in the `ServiceWorkerGlobalScope`.
 *
 * @param {string} appVersion                     the version of the web app
 * @param {Array<PrecacheEntry>} precacheManifest the files to cache
 */
export default function runServiceWorkerScript(appVersion, precacheManifest) {

    /**
     * Executes when a new service worker starts installing.
     *
     * <p>Holds the service worker in the 'installing' phase, so that web app cannot trigger
     * its `updated` event handler, until service worker updates the web app version.
     */
    self.addEventListener('install', event => {
        event.waitUntil(
            // update here the current app version to the provided `appVersion` value if it changes
        );
    });

    /**
     * Executes when a service worker receives a message from the web app via
     * `postMessage(message)`.
     *
     * <p>On `SKIP_WAITING` request, forces the installed service worker to take over
     * the old service worker and become 'active'.
     */
    self.addEventListener('message', async (event) => {
        if (!event.data) {
            return;
        }
        if (event.data.type === 'SKIP_WAITING') {
            await self.skipWaiting();
        }
    });

    /**
     * Executes when a new service worker becomes active for this web app.
     *
     * <p>Marks content as `up-to-date` to signalise that the web app is updated.
     * Holds the service worker in the 'activating' phase, so that it cannot control the page,
     * until fully updates.
     *
     * <p>If it is the first-time installation, claims clients (pages) of this web app
     * as controlled by this service worker, thus triggering reload on all pages.
     */
    self.addEventListener('activate', event => {
        event.waitUntil(
            // mark the conent as up-to-date and then
            clients.claim(); // reloads all pages, so the first SW could take power immediately.
        );
    });

    enableWorkboxCaching(precacheManifest);
}

5-workbox-caching.js

import {setCacheNameDetails} from 'workbox-core';
import {cleanupOutdatedCaches, precacheAndRoute} from 'workbox-precaching';
import {registerRoute} from 'workbox-routing';

/**
 * This script sets up caching of deployed files mentioned in the provided precache manifest using
 * Workbox libraries.
 *
 * <p>The minimum required major version of Workbox libraries must be '6.x'.
 * The libraries should be installed manually in 'package.json' file, or configured via
 * Vue CLI PWA plugin in the 'pwa' property of the 'vue.config.js' file.
 *
 * <p>The script should be executed in the Web Workers environment.
 *
 * @param {Array<PrecacheEntry>} precacheManifest the files to cache
 *
 * @see {@link https://developer.chrome.com/docs/workbox/reference/workbox-precaching/#type-PrecacheEntry|PrecacheEntry}.
 */
export default function enableWorkboxCaching(precacheManifest) {

    setCacheNameDetails(...);

    /**
     * The precacheAndRoute() method efficiently caches and responds to
     * requests for URLs in the manifest.
     * See https://goo.gl/S9QRab
     */
    precacheAndRoute(precacheManifest, {});

    cleanupOutdatedCaches();

    registerRoute(
       ...
    );
}