javascript - 渐进式 Web 应用程序 PWA 格式化视频

Question

我正在尝试在我的网站上设置渐进式 Web 应用程序。停止缓存效果。没关系。 当事件服务工作人员等待整个下载请求完成以向用户提供反馈时，我无法从缓存中删除 .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

您的最佳选择可能是对视频请求进行分块。查看Service Worker Sample: Cache Video Sample来自 Google。

您可以在 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 {
    ...
  }