如何要求服务工作者忽略与 Polymer 中特定 URL 模式匹配的请求？

Question

我的应用程序是基于 Polymer v2 and uses the Firebase Auth service for authentication. Actually, I use the login-fire 元素构建的。为了在移动设备上获得更好的体验，我选择使用重定向登录。

在 DevTool 的 "network" 选项卡中（在 Chrome 中）我看到发送了一个包含 /__/auth/handler? 模式的请求请求 Google 身份验证（例如，如果使用的提供商是 Google）。

启用 service worker 后，这个请求被捕获，响应是我的应用程序的登录页面。未尝试登录，响应来自服务人员，由于超时，我从 Firebase API 收到 Network Error。

当我在没有服务工作者的情况下部署应用程序时，身份验证过程正在运行，我可以访问该应用程序。

我尝试了很多方法来配置 service worker 以忽略对 URL 的所有请求 /auth/ 模式，但我失败了。

查看下面我的配置文件的最新版本。

sw-precache-config.js

module.exports = {
  globPatterns: ['**\/*.{html,js,css,ico}'],
  staticFileGlobs: [
    'bower_components/webcomponentsjs/webcomponents-loader.js',
    'images/*',
    'manifest.json',
  ],
  clientsClaim: true,
  skipWaiting: true,
  navigateFallback: 'index.html',
  runtimeCaching: [
    {
      urlPattern: /\/auth\//,
      handler: 'networkOnly',
    },
    {
      urlPattern: /\/bower_components\/webcomponentsjs\/.*.js/,
      handler: 'fastest',
      options: {
        cache: {
          name: 'webcomponentsjs-polyfills-cache',
        },
      },
    },
    {
      urlPattern: /\/images\//,
      handler: 'cacheFirst',
      options: {
        cacheableResponse: {
          statuses: [0, 200],
        },
      },
    },
  ],
};

你有更好的解决办法吗？你注意到我错过了什么吗？

感谢您的帮助。

Answer 1

您可以将其添加到您的 sw-precache-config.js 文件

  navigateFallbackWhitelist: [/^(?!\/auth\/)/],

Answer 2

您应该只将应用程序的路径列入白名单。这应该是你知道的。

因此，您未列入白名单的所有内容都不会由 serviceworker 提供。

navigateFallbackWhitelist: [/^\/news\//,/^\/msg\//, /^\/settings\//],

在这个例子中，只有 news/*、msg/*、settings/* 会送达。

/auth/*,/api/*,...不会被抓到。

如何要求服务工作者忽略与 Polymer 中特定 URL 模式匹配的请求？

How to ask to the service worker to ignore requests matching a specific URL pattern in Polymer?

authentication

polymer

service-worker

firebase-authentication