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

Question

我使用create react构建了一个app,默认情况下包含一个服务工作者.我想要运行的应用程序随时有人进入,除了当他们去/博客/,它是服务于一组静态内容给定的URL.我在应用程序中使用react路由器来捕获不同的URL.

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

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

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

这是在最新的 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 3

另一种方法黑名单网址，即排除他们从缓存中投放广告，当你使用针线可以实现registerNavigationRoute：

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

上面的示例针对SPA演示了此方法，在该SPA中，所有路由都被缓存并映射到其中，index.html除了以/api或开头的任何URL /admin。