プログレッシブウェブアプリケーションPWAフォーマットビデオ

Question

私は自分のサイトにプログレッシブウェブアプリケーションを設定しようとしています。キャッシュ効果を停止します。大丈夫だよ。 キャッシュから.mp4ビデオを削除するのに問題があります。アクティブサービスワーカーでは、ユーザーからのフィードバックを得るためにダウンロード要求が完了するのを待っています。

ビデオファイル（.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); 
     }) 
    ); 
}); 

ありがとうございました。

Answer 1

あなたの最良の選択肢は、ビデオリクエストをチャンクする可能性が高いことです。 GoogleからService Worker Sample: Cache Video Sampleをチェックしてください。

fetchイベントでは、範囲リクエストをチェックしていて、それらのリクエストを個々のリクエストとして処理しています。あなたはビデオから数秒の短い範囲を要求することができ、ユーザーは再生を開始する前にその範囲が完了するのを待つだけで済みます。

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 { 
    ... 
    }