Progressive Web App PWA formatiert Video

Question

Ich versuche, Progressive Web App auf einer meiner Website einzurichten. Stoppen Sie den Cache-Effekt. Das ist gut. Ich habe Probleme beim Löschen der .mp4-Videos aus dem Cache einmal mit dem aktiven Service-Mitarbeiter es wartet auf die gesamte Download-Anfrage zu beenden, um dem Benutzer Feedback geben.

Was ist der richtige Ansatz für Videodateien (.mp4, .ogg ....)?

var urlsToCache = [ 
    '/fotos/', 
    '/js/jquery.cp.js', 
    '/js/sprite.js', 
    '/js/dominio.js', 
    '/css/sprite.css', 
    '/tema/FP/images/', 
    '/tema/FP/style.css?ffff', 
    '/tema/FP/favicon.ico' 
]; 

self.addEventListener('install', function(event){ 
    event.waitUntil(
     caches.open(CACHE_NAME).then(function(cache){ 
      console.log('Opened cache'); 
      return cache.addAll(urlsToCache); 
     }) 
    ); 
}); 

self.addEventListener('fetch', function(event) { 
    event.respondWith(
     caches.match(event.request).then(function(response){ 
      console.log(event.request); 
      // This event waiting finish dowload, this solution is not better 
      //for user in case file video 
      return response || fetch(event.request); 
     }) 
    ); 
}); 

danke für jede hilfe.

Answer 1

Ihre beste Option besteht wahrscheinlich darin, die Videoanforderungen zu teilen. Schau dir die Service Worker Sample: Cache Video Sample von Google an.

Sie können im Ereignis fetch sehen, dass sie nach Bereichsanforderungen suchen und diese als individuelle Anforderungen behandeln. Sie können vom Video kurze Entfernungen von einigen Sekunden anfordern und die Benutzer müssen nur auf diesen Bereich warten, bevor sie mit dem Spielen beginnen.

if (event.request.headers.get('range')) { 
    var pos = 
    Number(/^bytes\=(\d+)\-$/g.exec(event.request.headers.get('range'))[1]); 
    console.log('Range request for', event.request.url, 
     ', starting position:', pos); 
    event.respondWith(
     caches.open(CURRENT_CACHES.prefetch) 
     .then(function(cache) { 
     return cache.match(event.request.url); 
     }).then(function(res) { 
     if (!res) { 
      return fetch(event.request) 
      .then(res => { 
      return res.arrayBuffer(); 
      }); 
     } 
     return res.arrayBuffer(); 
     }).then(function(ab) { 
     return new Response(
      ab.slice(pos), 
      { 
      status: 206, 
      statusText: 'Partial Content', 
      headers: [ 
       // ['Content-Type', 'video/webm'], 
       ['Content-Range', 'bytes ' + pos + '-' + 
       (ab.byteLength - 1) + '/' + ab.byteLength]] 
      }); 
     })); 
    } else { 
    ... 
    }