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

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

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

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

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

解决方法

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

以下是 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)"]
      }
    }
  ]
}