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

Progressive Web App PWA格式化视频

1 个答案: