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

角度服务工作人员使用的每个主要浏览器中的访存实现均不能正确处理对部分内容的请求，这是快速视频回放所必需的。引用此在Mozilla中打开的错误：https://bugzilla.mozilla.org/show_bug.cgi?id=1477391

此处的解决方法是编辑生成的服务工作程序（ngsw-worker.js），以不通过获取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;
}

这样，服务工作者会将与您的正则表达式匹配的所有请求传递回浏览器，以进行本机处理，而不是通过获取API传递。

为确保它不会被过度写入，并且每次构建/部署时都不需要这样做，您应该将编辑后的服务工作者保存为ngsw-worker-mod.js之类的东西，并将其注册为应用程序中的工作者。像这样的模块：

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

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

无法加载失败：获取“视频网址”。在ngsw-worker.js：2607

1 个答案: