获取加载失败：获取“视频 URL”。在 ngsw-worker.js:2607

Question

我们有 angular 6 通用应用程序，在我的网站上有视频，我得到了 当我点击播放按钮时出现以下错误，

   ngsw-worker.js:2607 Fetch failed loading: GET "https://storage.googleapis.com/web-assets/videos/event/WCCICC2017/Interviews/Rama%20Mona/Rama%20Mona-360p.mp4".

但在获取和播放视频一段时间后，播放视频需要更多时间。当我删除 ngsw-worker.js 视频获取快速和播放时。

经过一段时间的视频获取和播放

Fetch finished loading: GET "https://storage.googleapis.com/web-assets/videos/event/WCCICC2017/Interviews/Rama%20Mona/Rama%20Mona-360p.mp4".

Answer 1

Angular Service Worker 使用的每个主要浏览器中的 fetch 实现都无法正确处理对部分内容的请求，而这是快速播放视频所必需的。参考这个用 Mozilla 打开的错误：https://bugzilla.mozilla.org/show_bug.cgi?id=1477391

这里的解决方法是编辑生成的服务工作者 (ngsw-worker.js) 以不通过 fetch API 路由某些请求。 Angular 有一个开放的功能请求，可以在不重写文件的情况下提供此功能，但它目前不在路线图上。

打开 ngsw-worker.js 并找到类 Driver 并修改它的 onFetch 函数以在顶部附近包含类似这样的内容：

let re =/\.mp4$/; //write whatever regex is appropriate for your case
if (re.test(req.url)) {
  event.waitUntil(this.idle.trigger());
  return;
}

这样，Service Worker 会将与您的正则表达式匹配的所有请求传回浏览器以进行本地处理，而不是通过 fetch API。

为确保它不会被覆盖，并且您不需要在每次构建/部署时都这样做，您应该将编辑后的 ​​service worker 保存为类似 ngsw-worker-mod.js 的文件，并将其注册为应用程序中的 worker。像这样的模块：

ServiceWorkerModule.register('./ngsw-worker-mod.js', {enabled: environment.production})

并确保将其作为资产包含在您的 angular-cli.json 中，以便它包含在您的构建输出中。