13

我有一个服务工作者可以捕获我的页面请求（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);
});

第一次加载页面时，worker 安装，所以视频请求没有被捕获，因此失败。但是当您重新加载页面时（不清理缓存），它被成功捕获，并且工作人员成功加载了视频（其检查器中的 HTTP 200），但由于某种原因，主页抛出net::ERR_FAILED.

而且我无法手动读取/流式传输它，因为它来自不同的来源，导致“不透明”响应类型：http ://www.w3.org/TR/service-workers/#cross-origin-resources

更新：更新到 Chrome 42，现在的错误是HTTP 400 Service Worker Fallback Required (from ServiceWorker). 奇怪的是，源代码（第 510 行）表明它只应在缺少 CORS 标头时引发，但这里的模式是no-cors.

4

1 回答 1

7

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

看起来不透明Responsesrc的对象不能用于<video>元素，我假设这是故意的。（ OpaqueResponse可以用于某些目的，恐怕我没有一个完整的纲要，什么可以和不可以使用 opaque Response。）

但无论如何，你很幸运vjs.zencdn.net支持 CORS，所以你可以使用默认的 CORS-enabled Request，这会给你一个 non-opaque Response。

您不能做的一件事是credentials: 'include'在您的 CORS中使用Request，因为它会导致Fetch API 无法加载https://vjs.zencdn.net/v/oceans.mp4。当凭证标志为真时，不能在“Access-Control-Allow-Origin”标头中使用通配符“*”。错误。这似乎不是您的特定主机的问题，因为不需要凭据。

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

于 2015-04-16T15:36:54.760 回答