У меня есть сотрудник службы, который ловит мои запросы на страницу (fetch event), и когда URL-адрес соответствует определенному шаблону, он будет извлекать другой URL-адрес и заменять ответ на это новое содержимое.
Он отлично работает для текстовых данных (JS, XML...) или двоичных данных (например, изображений), но когда дело доходит до видео, происходит сбой.
Я использую Chrome 41 на OSX.
Это упрощенный код моего работника:
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.
И я не могу вручную читать/передавать его, потому что он исходит из другого источника, что приводит к "непрозрачному" типу ответа: http://www.w3.org/TR/service-workers/#cross-origin-resources
UPDATE: обновление до Chrome 42, теперь ошибка HTTP 400 Service Worker Fallback Required (from ServiceWorker). Странно то, что исходный код (строка 510) указывает, что он должен быть поднят только при отсутствии заголовков CORS, но здесь режим no-cors.
