javascript - Angular7：服务工作者没有按预期运行

问题描述

我有一个角度服务工作者，我已经缓存了声音（mp3 文件），以便它们可以离线播放。这是ngsw-config-json：

{
  "index": "/index.html",
  "assetGroups": [{
    "name": "app",
    "installMode": "prefetch",
    "resources": {
      "files": [
        "/favicon.ico",
        "/index.html",
        "/*.css",
        "/*.js",
        "/*.svg",
        "/*.eot",
        "/*.woff",
        "/*.woff2",
        "/*.tff"
      ]
    }
  }, {
    "name": "assets",
    "installMode": "prefetch",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        "/assets/sounds/character1/**",
        "/assets/sounds/character2/**"
      ]
    }
  }]
}

在我的网络应用程序中，声音播放如下：

let audioLink = `/assets/sounds/${character}/${soundURL}`;
let player = new Audio(audioLink);
player.play()

该网站离线工作。HTML、CSS、JS、JSON 文件都被缓存了。但是声音不播放（当我尝试播放时，我在上面显示了一个错误）。

在 Chrome Developer Tools > Application > Cache中，我可以看到一些声音（路径），但不是全部。但他们都没有离线工作。

有时会出现这些错误：

GET "path/to/file" net::ERR_ABORTED 504 (Gateway Timeout)
Uncaught (in promise) DOMException
Failed to load resource: net::ERR_INTERNET_DISCONNECTED

有时它也说存在问题manifest.json，但并没有错，因为它在在线时显示在开发人员工具的清单部分中。

这个问题有什么解决办法吗？这不是 Chrome 错误，因为我在 Safari 和 Firefox 中也看到了相同的行为。我知道在新的 chrome 版本中存在一个错误，并且由于这个错误，favicon.ico没有离线显示

不确定这是否有帮助，但这里是托管 Web 应用程序的链接。如果您在 Chrome 开发者工具中看到网络选项卡，您可以看到 mp3 文件正在“下载”，但它们不能离线播放。

在为生产（ng build --prod --base-href="/"）生成网站后，我查看了ngsw.json这就是我所看到的（删除了一些行）：

{
  "name": "assets",
  "installMode": "prefetch",
  "updateMode": "prefetch",
  "urls": [
    "/assets/sounds/character1/sound one.mp3",
    "/assets/sounds/character1/sound two.mp3",
    "/assets/sounds/character2/sound three.mp3"
    "/assets/sounds/character2/sound four.mp3"
  ],
  "patterns": []
}

这是完整生成的ngsw.json. 一切都设置为预缓存而不是延迟缓存。

所有这些资产 URL 也在"hashTable"对象中。我还看到它们在 chrome 开发者工具（开发者工具 > 网络）中被下载，但我只在应用程序缓存部分看到其中一些（可能是总共 150 个中的前 20-30 个）。

我在这里做错了什么？这可能是 Angular 7 的错误吗？我已经看到关于类似问题的各种其他 StackOverflow 和 Reddit 问题。

我尝试过的东西正在改变

let audioLink = `/assets/sounds/${character}/${soundURL}`;

至

let audioLink = `assets/sounds/${character}/${soundURL}`;

（在开始时删除了斜线），但这并没有什么不同。

我完全确定所有声音文件路径都是正确的，因为网站在线运行时绝对没有错误。

除了上述之外，我尝试手动更改所有 url 并插入%20应该有空格的位置。例如，更改"/assets/sounds/character1/sound one.mp3"为"/assets/sounds/character1/sound%20one.mp3"，但这也不起作用。

我注意到的一件事是，如果您第一次访问该网站，并等待所有声音下载，然后关闭您的互联网连接并尝试该网站，所有声音都可以正常工作。但只有一段时间，通常大约 10-15 分钟，然后他们停止工作。我已经在 Chrome、Chrome Android、Firefox、Safari 和 IOS Safari 上进行了测试。

编辑：根据某人的建议，我尝试更改

{
  "name": "assets",
  "installMode": "prefetch",
  "updateMode": "prefetch",
  "urls": [
    "/assets/sounds/character1/sound one.mp3",
    "/assets/sounds/character1/sound two.mp3",
    "/assets/sounds/character2/sound three.mp3"
    "/assets/sounds/character2/sound four.mp3"
  ],
  "patterns": []
}

至

{
  "name": "assets",
  "installMode": "prefetch",
  "updateMode": "prefetch",
  "urls": [
    "/assets/sounds/**"
  ],
  "patterns": []
}

但同样的问题仍然存在：声音被离线缓存可能 10-15 分钟，之后它们不会离线播放。我只能在 Chrome 和 Chrome Android 中对此进行测试。

标签： javascriptangularservice-workerangular7angular-service-worker

javascript - Angular7：服务工作者没有按预期运行

问题描述

解决方案

推荐阅读