caching - Exclude path from workbox routing

Question

I have a custom service worker built with Workbox. This is used on a WordPress site, and it keeps causing issues in the back-end when updates occur (with core or plugins). I'd like to configure my code such that when the user is on a /wp-admin page, the service worker does not serve cached files. Because I can't check window.location, I'm having trouble figuring out how to do this.

To be clear, I don't necessarily want to exclude /wp-admin scripts from caching, I specifically want to stop cached files from being served when the user is on a /wp-admin page. This will 99% of the time be one in the same, but for the hypothetical situation where the user is on the front-end and a wp-admin script is served, I would want that script to be served from cache.

My script is below. How can I achieve my goal?

import { clientsClaim, skipWaiting } from "workbox-core";
import { ExpirationPlugin } from "workbox-expiration";
import { precacheAndRoute } from "workbox-precaching";
import { registerRoute, setCatchHandler } from "workbox-routing";
import { CacheFirst, NetworkFirst } from "workbox-strategies";

skipWaiting();
clientsClaim();

/**
 * Precache "offline" page
 */
precacheAndRoute([
    {
        url: "/offline/",
        revision: __VERSION__,
    },
]);

/**
 * Return "offline" page when visiting pages offline that haven't been cached
 */
setCatchHandler(() => {
    return caches.match("/offline/");
});

/**
 * Cache WordPress content
 */
registerRoute(
    ({ url }) => {
        return (url.pathname && !url.pathname.match(/^/(wp-admin|wp-content|wp-includes|wp-json|wp-login)/) && url.pathname.match(//$/));
    },
    new NetworkFirst({
        cacheName: "clpl-content-cache",
        plugins: [
            new ExpirationPlugin({
                maxAgeSeconds: 7 * 24 * 60 * 60,
            }),
        ],
    })
);

/**
 * Cache CSS files
 */
registerRoute(
    ({ url }) => {
        return (url.pathname && url.pathname.match(/.css$/) && !url.pathname.match(/wp-admin|wp-includes|wp-json/));
    },
    new CacheFirst({
        cacheName: "clpl-css-cache",
        plugins: [
            new ExpirationPlugin({
                maxAgeSeconds: 7 * 24 * 60 * 60,
            }),
        ],
    })
);

/**
 * Cache JS files
 */
registerRoute(
    ({ url }) => {
        return (url.pathname && url.pathname.match(/.js$/) && !url.pathname.match(/wp-admin|wp-includes|wp-json/) && !url.pathname.match(/redirection/));
    },
    new CacheFirst({
        cacheName: "clpl-js-cache",
        plugins: [
            new ExpirationPlugin({
                maxAgeSeconds: 7 * 24 * 60 * 60,
            }),
        ],
    })
);

/**
 * Cache image files
 */
registerRoute(
    ({ url }) => {
        return (url.pathname && url.pathname.match(/.gif|jpeg|jpg|png|svg|webp$/) && !url.pathname.match(/wp-admin|wp-includes|wp-json/));
    },
    new CacheFirst({
        cacheName: "clpl-image-cache",
        plugins: [
            new ExpirationPlugin({
                maxAgeSeconds: 7 * 24 * 60 * 60,
            }),
        ],
    })
);

/**
 * Cache font files
 */
registerRoute(
    ({ url }) => {
        return (url.pathname && url.pathname.match(/.otf|ttf|woff|woff2$/) && !url.pathname.match(/wp-admin|wp-includes|wp-json/));
    },
    new CacheFirst({
        cacheName: "clpl-font-cache",
        plugins: [
            new ExpirationPlugin({
                maxAgeSeconds: 7 * 24 * 60 * 60,
            }),
        ],
    })
);

question from:https://stackoverflow.com/questions/65941140/exclude-path-from-workbox-routing

Answer 1

Waitting for answers