Angular - 导致上传失败的服务人员答案

【问题标题】：Angular - service workers causing uploads to failAngular - 导致上传失败的服务人员
【发布时间】：2018-12-08 07:13:27
【问题描述】：

我的 Angular 6 应用程序使用 Uppy (XHRUpload) 进行文件上传。文件上传发生在不同的子域中。

上传在 localhost 上工作正常（禁用 service worker），但是当我尝试在启用 service worker 的情况下上传文件时，它只适用于小尺寸（几 mb）的文件，而其他文件则失败。

似乎服务工作者在等待 API 上传调用的响应，如果它在几秒钟内没有返回（对于大文件），它会失败，正如我在开发人员工具中看到的那样。

以下是我的 ngsw-config.json

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**"
        ],
        "urls": [
          "https://fonts.googleapis.com/**",
          "https://fonts.gstatic.com/**"
        ]
      }
    }
  ]
}

【问题讨论】：

标签： javascript angular service-worker angular-service-worker

【解决方案1】：

您可能希望排除该路径以由 service worker 缓存/处理。

在ngsw-config.json 中将路由放到"navigationUrls"。

或者，如果可以的话，将文件上传 API 端点放在路径中以（或具有）__（即双下划线）开头的路由。默认情况下，Angular Service Worker 应该将其视为navigationUrl，这是在ngsw.json 中生成的：

  "navigationUrls": [
{
  "positive": true,
  "regex": "^\\/.*$"
},
{
  "positive": false,
  "regex": "^\\/(?:.+\\/)?[^/]*\\.[^/]*$"
},
{
  "positive": false,
  "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*$"
},
{
  "positive": false,
  "regex": "^\\/(?:.+\\/)?[^/]*__[^/]*\\/.*$"
}
]

【讨论】：