如何要求服务人员忽略与 Polymer 中特定 URL 模式匹配的请求？答案

【问题标题】：How to ask to the service worker to ignore requests matching a specific URL pattern in Polymer?如何要求服务人员忽略与 Polymer 中特定 URL 模式匹配的请求？
【发布时间】：2018-02-06 13:02:59
【问题描述】：

我的应用程序基于Polymer v2 构建，并使用Firebase Auth 服务进行身份验证。实际上，我使用login-fire 元素。为了在移动设备上获得更好的体验，我选择使用重定向登录。

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

启用服务工作者后，会捕获此请求，响应是我的应用程序的登录页面。未尝试登录，响应来自服务人员，由于超时，我从 Firebase API 收到了Network Error。

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

我尝试了很多方法来配置服务工作者以忽略对具有/auth/ 模式的 URL 的所有请求，但我失败了。

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

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],
        },
      },
    },
  ],
};

您有更好的解决方案吗？你注意到我错过了什么吗？

感谢您的帮助。

【问题讨论】：

标签： authentication polymer firebase-authentication service-worker

【解决方案1】：

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

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

【讨论】：

谢谢。实际上我今天早上找到了解决方案。

【解决方案2】：

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

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

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

在这个例子中，只有news/*、msg/*、settings/*会被传递。

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

【讨论】：