Angular Service Worker 在预取资产时是否会阻止其他网络请求？

Question

有没有其他人看到 Angular Service Worker 在预取时阻止其他网络请求通过？例如，我有一个 Angular 应用程序，在 ngsw.json 中有 147 个资产，服务人员在安装时试图撕掉它。如果我在预取期间尝试登录我的应用程序，看起来我的登录请求被添加到仅在 147 个预取请求结束时发生的队列中。想知道我是否配置错误，或者我们是否可以让 SW 预取...更慢或之间稍有延迟，以便用户请求有机会通过？

我只在连接不良进行测试时才注意到这一点（例如，将 chrome 网络选项卡设置为“快速 3G”。）通过每个资产大约需要半秒，而且它们没有很好地并行化，我假设旧手机的行为方式。来自应用程序中用户的 API 请求处于pending 状态，直到所有预取完成，然后它们才会通过并完成。

我是否错误地配置了我的应用程序/Service Worker，或者这种行为是否符合设计？

Answer 1

您可以将 Service Worker 配置为不预取所有 assets，而是仅在请求 assets 时缓存它们。您可以通过在ngsw-confing.json 中为installMode 配置指定lazy 值来做到这一点。

下面是 ngsw-confing.json 的示例，它不会预取所有 assets，但只会在请求时缓存它们：

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