Progressive Web App PWA 格式视频答案

【问题标题】：Progressive Web App PWA formats videoProgressive Web App PWA 格式视频
【发布时间】：2017-09-27 15:11:31
【问题描述】：

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

感谢您的帮助。

【问题讨论】：

您是否尝试在激活活动期间删除视频文件？还是您想在视频下载完成时提醒用户？
你好大卫，也许我的英语听不懂了。我试图只缓存静态文件（js、css、jpg、jpeg）。但是，我的服务人员例程会停止执行视频，直到所有下载完成。我希望在下载部分内容时播放视频。谢谢

标签： javascript progressive-web-apps

【解决方案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 {
    ...
  }

【讨论】：