2

我们有 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".
4

1 回答 1

2

Angular Service Worker 使用的每个主要浏览器中的 fetch 实现都不能正确处理对部分内容的请求，而这是快速视频播放所必需的。参考这个用 mozilla 打开的 bug：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。

为了确保它不会被覆盖并且您不需要在每次构建/部署时都这样做，您应该将您编辑的服务工作者保存为类似 ngsw-worker-mod.js 的东西，并将其注册为 app.module 中的工作者，如：

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

and make sure to include it in your angular-cli.json as an asset so that it gets included in your build outputs.

于 2018-08-11T14:42:20.887 回答