Angular 使用 Firebase 的服务工作者处理所有 Firebase 请求

Question

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

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

我的 Service worker 配置

{
  "$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)"
        ]
      }
    }
  ]
}

打开我看到的网络选项卡

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

我是做错了什么还是白担心？

这是一个性能问题吗？ Service Worker 应该处理这些请求吗？

Answer 1

这是正常现象。

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

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

Answer 2

您观察到的行为是完全正常的，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允许您在性能和新鲜度之间进行选择，还允许设置超时，超时时优先缓存。

Angular 使用 Firebase 的服务工作者处理所有 Firebase 请求

Angular Service worker with Firebase handles all firebase requests

firebase

progressive-web-apps

angular

angular-service-worker