Question

我使用create react构建了一个app，默认情况下包含一个服务工作者。我想让应用程序在任何人输入给定的URL时运行，除非他们转到/ blog /，它提供一组静态内容。我在应用程序中使用react router来捕获不同的URL。

我有nginx设置服务/博客/如果有人访问/博客/没有首先访问react应用程序，它可以正常工作。但是，因为服务工作者的范围是./，所以当有人访问/ blog /以外的任何URL时，应用程序会加载服务工作者。从那时起，服务工作者绕过与服务器的连接，并且/ blog /加载react应用程序而不是静态内容。

除了/ blog /之外，有没有办法让服务工作者加载所有网址？

Answer 1

因此，考虑到您尚未发布与服务工作者相关的任何代码，您可以考虑在if的代码块中添加一个简单的fetch条件

此代码块应该已经存在于您的服务工作者中。只需添加条件

self.addEventListener( 'fetch', function ( event ) {

    if ( event.request.url.match( '^.*(\/blog\/).*$' ) ) {
        return false;
    }
     // OR

    if ( event.request.url.indexOf( '/blog/' ) !== -1 ) {
        return false;
    }
    //    **** rest of your service worker code ****

注意您可以使用正则表达式或原型方法indexOf。按照你的心血来潮。

以上内容会指示您的服务工作人员，当网址与/blog/

匹配时，不执行任何操作

Answer 2

尝试使用sw-precache library覆盖运行缓存策略的当前 service-worker.js 文件。最重要的部分是设置配置文件（我将在下面粘贴与create-react-app一起使用的文件）。

安装yarn sw-precache
创建并指定配置文件，该文件指示不缓存哪些URL
修改构建脚本命令以确保sw-precache运行并覆盖构建输出目录中的默认service-worker.js文件

我将配置文件命名为 sw-precache-config.js ，并在 package.json 的构建脚本命令中指定了它。该文件的内容如下。要特别注意的部分是 runtimeCaching 键/选项。 "build": "NODE_ENV=development react-scripts build && sw-precache --config=sw-precache-config.js"

配置文件： sw-precache-config.js

module.exports = {
    staticFileGlobs: [
        'build/*.html',
        'build/manifest.json',
        'build/static/**/!(*map*)',
    ],
    staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/],
    swFilePath: './build/service-worker.js',
    stripPrefix: 'build/',
    runtimeCaching: [
        {
            urlPattern: /dont_cache_me1/,
            handler: 'networkOnly'
        }, {
            urlPattern: /dont_cache_me2/,
            handler: 'networkOnly'
        }
    ]
}

Answer 3

如果您正在使用或愿意使用customize-cra，则解决方案非常简单。

将其放入您的config-overrides.js：

const { adjustWorkbox, override } = require("customize-cra");

module.exports = override(
  adjustWorkbox(wb => 
    Object.assign(wb, {
      navigateFallbackWhitelist: [
        ...(wb.navigateFallbackWhitelist || []),
        /^\/blog(\/.*)?/,
      ],
     })
   )
);

请注意，在最新的workbox documentation中，该选项被称为navigationFallback Allow list而不是navigationFallback White list。因此，根据您使用的CRA /工作箱的版本，您可能需要更改选项名称。

regexp /^/blog(/.*)?/匹配/ blog，/ blog /，/ blog / abc123等。

Answer 4

将黑名单的URL的另一种方法，即从缓存中排除URL，可以使用Workbox来实现：

workbox.routing.registerNavigationRoute("/index.html", {
  blacklist: [/^\/api/,/^\/admin/],
});

上面的示例针对registerNavigationRoute进行了演示，其中所有路由都被缓存并映射到index.html中，但以/api或/admin开头的任何URL除外。

Answer 5

以下是最新的CRA版本对我们有用的内容：

// serviceWorker.js

window.addEventListener('load', () => {
  if (isAdminRoute()) {
    console.info('unregistering service worker for admin route')
    unregister()
    console.info('reloading')
    window.location.reload()
    return false
  }

我们排除了服务器工作人员在/admin下的所有路由，因为我们在管理区域中使用了其他应用程序。您当然可以根据需要进行更改，这是文件底部的功能：

function isAdminRoute() {
  return window.location.pathname.startsWith('/admin')
}

Answer 6

以下是您在 2021 年的做法：

import {NavigationRoute, registerRoute} from 'workbox-routing';

const navigationRoute = new NavigationRoute(handler, {
  allowlist: [
    new RegExp('/blog/'),
  ],
  denylist: [
    new RegExp('/blog/restricted/'),
  ],
});
registerRoute(navigationRoute);

https://developers.google.com/web/tools/workbox/modules/workbox-routing#how_to_register_a_navigation_route

Answer 7

更新（新的工作解决方案）在 Create React App 的最后一个主要版本（版本 4.x.x）中，您可以轻松地实现您的自定义 worker-service.js 而不会流血。 customize worker-service

<块引用>

从 Create React App 4 开始，您可以通过创建自己的 src/service-worker.js 文件或自定义由 cra-template-pwa（或cra-template-pwa-typescript) 模板。您可以使用 Workbox 项目中的其他模块、添加推送通知库或删除一些默认缓存逻辑。

如果您当前使用的是旧版本，则必须将 React 脚本升级到版本 4。

将服务工作者设置为仅排除某些URL

7 个答案: