从工作箱路由中排除路径

问题描述

我有一个使用 WorkBox 构建的自定义 Service Worker。这在 wordpress 站点上使用，并且在发生更新（使用核心或插件）时会不断在后端引起问题。我想配置我的代码，以便当用户在 /wp-admin 页面上时，Service Worker 不提供缓存文件。因为我无法检查 window.location，所以我无法弄清楚如何执行此操作。

明确地说，我不一定要从缓存中排除 /wp-admin 脚本，我特别希望在用户位于 /wp-admin 页面时停止提供缓存文件。这在 99% 的情况下都是相同的，但对于用户在前端并提供 wp-admin 脚本的假设情况，我希望从缓存中提供该脚本。

我的脚本如下。我怎样才能实现我的目标？

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",})
);

/**
 * 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",})
);

/**
 * 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",})
);

/**
 * 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",})
);

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

service-worker workbox