获取加载失败：GET "video 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 使用的每个主要浏览器中的获取实现都不能正确处理对部分内容的请求，而这是快速播放视频所需的。参考这个用 mozilla 打开的错误：https://bugzilla.mozilla.org/show_bug.cgi?id=1477391

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

打开 ngsw-worker.js 并找到 class 驱动程序并修改它的 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 会将所有与您的正则表达式匹配的请求传递回浏览器进行本地处理，而不是通过获取 API。

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

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

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

获取加载失败：GET "video URL"。在 ngsw-worker.js:2607

Fetch failed loading: GET "video URL". at ngsw-worker.js:2607

google-cloud-storage

progressive-web-apps

angular

angular-service-worker