Progressive Web App PWA formats video

Question

I'm trying to set up Progressive Web app on a my site. Stop caching effect. It's fine. I'm having trouble deleting the .mp4 videos from the cache once with the active service worker it waits for the entire download request to finish to give the user feedback.

What is the correct approach to take for video files (.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);
       })
   );
});

thank's for any help.

Answer 1

Your best option is likely to chunk the video requests. Check out the Service Worker Sample: Cache Video Sample from Google.

You can see in the fetch event they are checking for range requests and handling those as individual requests. You could request short ranges of a couple of seconds from the the video and users would only have to wait for that range to complete before starting to play.

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