带有 Firebase 的 Angular Service Worker 处理所有 Firebase 请求答案

【问题标题】：Angular Service worker with Firebase handles all firebase requests带有 Firebase 的 Angular Service Worker 处理所有 Firebase 请求
【发布时间】：2020-06-13 11:18:38
【问题描述】：

我通过 angular/pwa ng 安装将我的 Angular firebase 应用程序转换为 PWA。

一切都很好，但我开始质疑为什么请求会发生两次。

我的服务工作者配置

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

打开我看到的网络标签

如您所见，所有请求都增加了一倍。也许我的知识有限。因此，我查看并显示带有 cog 图标的第一个请求是准备，下一个是实际请求。

是我做错了什么还是我什么都不担心？

这是一个性能问题吗？服务工作者应该处理这些请求吗？

【问题讨论】：

标签： angular firebase progressive-web-apps angular-service-worker

【解决方案1】：

您观察到的行为是完全正常的，Size 列中包含(ServiceWorker) 的行表明相应的请求已被Service Worker 拦截。齿轮图标显示了服务工作者向网络发起的请求。由于您使用的是来自 Angular 的ngsw-worker.js，这些请求是原始请求的克隆，但您可以想象有一个服务工作者的自定义实现，发送与主要 JavaScript 代码发起的请求完全不同的请求。

简单示例：

self.addEventListener('fetch', function(event) {
    event.respondWith(fetch('other-request'));
};

您也不能像这样触发请求并从缓存中提供请求（暗示它之前已被缓存）：

self.addEventListener('fetch', function(event) {
    event.respondWith(caches.match(event.request));
}

Angular 的ngsw-worker.js 将缓存用于assetGroups 中定义的文件和dataGroups 中定义的资源（取决于cacheConfig 策略）。

dataGroupscacheConfig 允许您在性能和新鲜度之间进行选择，还允许设置超时，当超时时优先缓存。

【讨论】：

【解决方案2】：

这是正常行为。

第一个调用从缓存中检索信息，第二个调用检查资源是否已更改。

如果它发生了变化，它将用新资源替换缓存中的资源

【讨论】：