Bir videoyu bir ServiceWorker'dan nasıl aktarabilirim?

Question

Sayfanın isteklerini yakalayan bir hizmet çalışanım var (fetch olay) ve URL belirli bir kalıpla eşleştiğinde başka bir URL alır ve bu yeni içeriğin yanıtını değiştirir. Metin verileri (JS, XML ...) veya ikili veriler (örn. Görüntüler) için mükemmel şekilde çalışır, ancak video söz konusu olduğunda, bir aksaklık söz konusudur.

OSX'te Chrome 41 kullanıyorum.

Bu benim işçinin basitleştirilmiş kodudur:

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)); 
    } 
}); 

Ve bu benim HTML sayfasında basitleştirilmiş kod şudur:

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); 
}); 

Eğer sayfayı yüklemek ilk kez işçi yükler, Böylece video isteği yakalanmıyor, bu yüzden başarısız oluyor. Ancak sayfayı yeniden yüklediğinizde (önbelleği temizlemeden), başarılı bir şekilde yakalanır ve çalışan videoyu (denetçisinde HTTP 200) başarıyla yükler, ancak bir nedenle ana sayfa net::ERR_FAILED'u atar.

Ve elle bir "opak" Yanıt türü sonuçlanan farklı bir kökten gelir, çünkü akışa/okuyamaz: http://www.w3.org/TR/service-workers/#cross-origin-resources

GÜNCELLEME: Chrome 42 güncelleme, hata şimdi HTTP 400 Service Worker Fallback Required (from ServiceWorker) olduğunu. Garip olan şey, the source code'un (satır 510) sadece CORS başlıklarının eksik olması durumunda kaldırılacağını, ancak burada modun no-cors olduğunu gösterir.

Answer 1

İlk önce, şu an için 44.0.2371.0 sürümüne karşılık gelen Chrome Canary numaralı telefonu denemenizi öneririz. Hizmet çalışanlarının etrafındaki geliştirici araçları her yeni Chrome sürümü ile gelişmeye devam ediyor ve genel olarak 43+ sürümü ile çok daha iyi bir hale geldi.

opaque Response nesnesi, <video> öğesinin src öğesinde kullanılabilir gibi görünmüyor ve bunun kasıtlı olduğunu farz ediyorum. (Opak Response s belirli amaçlar için kullanılabilir, ve korkarım ne yapacağı ve bir opak Response ile çalışmaz tam bir yıkımı yok.)

Ancak her durumda vjs.zencdn.net, CORS'i desteklediğinden dolayı, CORS etkin Request'u kullanarak, bir opak olmayan Response verecektir. o https://vjs.zencdn.net/v/oceans.mp4 yükleyemiyor bir Getirme API yol açacaktır çünkü yapamayacağı

Bir şey, sizin CORS Request kullanım credentials: 'include' olduğunu. Kimlik bilgisi bayrağı doğru olduğunda, '*' joker karakteri 'Erişim-Kontrol-İzin-Kökeni' başlığında kullanılamaz. hatası. Bu, kimlik bilgileriniz gerekli olmadığından, söz konusu barındırıcınızla ilgili bir sorun gibi görünmüyor.

Kodunuzu event.respondWith(fetch('https://vjs.zencdn.net/v/oceans.mp4')); kullanmam için her şey iyi çalıştı.