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

Question

我正在尝试在我的网站上设置 Progressive 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

您最好的选择可能是将视频请求分块。查看 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 {
    ...
  }

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

Progressive Web App PWA formats video

javascript

progressive-web-apps