Question

我有一个服务工作者捕获我的页面请求（fetch事件），当URL匹配某个模式时，它会获取另一个URL并用该新内容替换响应。它适用于文本数据（JS，XML ...）或二进制数据（例如图像），但是当涉及到视频时，会出现故障。

我在OSX上使用Chrome 41。

这是我工人的简化代码：

self.addEventListener('fetch', function(event) {
  var url = event.request.url;
  console.log('SW: fetch', url);
  if (/\.mp4$/.test(url)) {
    url = 'https://vjs.zencdn.net/v/oceans.mp4';
    var options = {
      credentials: 'include',
      mode: 'no-cors'
    };
    event.respondWith(fetch(url, options));
  }
});

这是我的HTML页面中的简化代码：

navigator.serviceWorker.register('sw.js').then(function(reg) {
  console.info('ServiceWorker registration successful for', reg.scope);

  var video = document.createElement('video');
  video.src = '/video.mp4';
  video.controls = true;
  video.autoplay = true;
  video.onerror = function(err) {
    console.error('Video load fail', err);
  }
  video.onload = function(data) {
    console.info('Video load success');
  }
  document.body.appendChild(video);

}).catch(function(err) {
  console.error('ServiceWorker registration failed:', err);
});

第一次加载页面时，工作程序会安装，因此视频请求不会被捕获，从而失败。但是当你重新加载页面（没有清理缓存）时，它被成功捕获，并且工作者成功加载了视频（在其检查器中加载了HTTP 200），但由于某种原因，主页面抛出net::ERR_FAILED。 / p>

我无法手动阅读/流式传输，因为它来自不同的来源，导致了不透明的＆＃34;回复类型：http://www.w3.org/TR/service-workers/#cross-origin-resources

更新：更新到Chrome 42，错误现在为HTTP 400 Service Worker Fallback Required (from ServiceWorker)。奇怪的是，the source code（第510行）表示只有在缺少CORS标头时才会引发它，但此处模式为no-cors。

Answer 1

首先，我建议您尝试使用当前对应于44.0.2371.0版本的Chrome Canary。围绕服务工作者的开发人员工具随着每个新版Chrome的发布而不断改进，并且通常在版本43+的情况下变得更好。

看起来opaque Response个对象不能用于src元素的<video>，我假设这是故意的。（不透明的Response s可以用于某些目的，我担心我不会完全了解将会使用不透明Response的内容。。）

但无论如何，你很幸运vjs.zencdn.net支持CORS，所以你可以使用默认的，启用CORS的Request，这将给你一个非不透明Response。

您无法在CORS credentials: 'include'中使用Request，因为这会导致 Fetch API无法加载https://vjs.zencdn.net/v/oceans.mp4。通配符＆＃39; *＆＃39;不能用于“访问控制 - 允许 - 来源”＃39;凭证标志为真时的标头。错误。对于您的特定主机而言，这似乎不是问题，因为不需要凭据。

当我将代码切换为使用event.respondWith(fetch('https://vjs.zencdn.net/v/oceans.mp4'));时，一切正常。

如何从ServiceWorker流式传输视频？

1 个答案: