thojansen/index.html

## index.html
<html lang="en">
<head>
  <script type="text/javascript" src="./index.js"></script>
  <script type="text/javascript" src="./service-worker.js"></script>
  <meta charset="utf-8">
</head>
<body>

  <video autoplay muted loop playsinline class="video">
    <source src="./assets/video/animation.mp4" type="video/mp4">
  </video>
</body>
</html>

## index.js
function waitUntilInstalled(registration) {
    return new Promise(function(resolve, reject) {
      if (registration.installing) {
        registration.installing.addEventListener('statechange', function(e) {
          if (e.target.state === 'installed') {
            resolve();
          } else if (e.target.state === 'redundant') {
            reject();
          }
        });
      } else {
        resolve();
      }
    });
  }

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./service-worker.js', { scope: './' })
  .then(waitUntilInstalled)
    .catch(function(error) {
      console.error(error);
    });
}

## service-worker.js
var CACHE_VERSION = 1;
var CURRENT_CACHES = {
  prefetch: 'prefetch-cache-v' + CACHE_VERSION
};

var urlsToPrefetch = [
  '/assets/video/animation.mp4'
];

self.addEventListener('install', function(event) {
  self.skipWaiting();

  event.waitUntil(
    caches.open(CURRENT_CACHES.prefetch).then(function(cache) {
      return cache.addAll(urlsToPrefetch);
    })
  );
});

self.addEventListener('activate', function(event) {
  //delete all caches that aren't named in CURRENT_CACHES
  var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
    return CURRENT_CACHES[key];
  });

  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          if (expectedCacheNames.indexOf(cacheName) === -1) {
            return caches.delete(cacheName);
          }
        })
        );
    })
    );
});

self.addEventListener('fetch', function(event) {
  console.log('Handling fetch event for', event.request.url);

  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) {
        var internalUrl = ""
        urlsToPrefetch.forEach(function (item) {
          if(event.request.url.indexOf(item) > 0){
            internalUrl = item;
          }
        });
        return cache.match(internalUrl);
      }).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 {
    console.log('Non-range request for', event.request.url);
    event.respondWith(
    caches.match(event.request).then(function(response) {
      if (response) {
        console.log('Found response in cache:', response);
        return response;
      }
      console.log('No response found in cache. About to fetch from network...');
      return fetch(event.request).then(function(response) {
        console.log('Response from network is:', response);

        return response;
      }).catch(function(error) {
        console.error('Fetching failed:', error);
        throw error;
      });
    })
    );
  }
});
	<html lang="en">
	<head>
	<script type="text/javascript" src="./index.js"></script>
	<script type="text/javascript" src="./service-worker.js"></script>
	<meta charset="utf-8">
	</head>
	<body>

	<video autoplay muted loop playsinline class="video">
	<source src="./assets/video/animation.mp4" type="video/mp4">
	</video>
	</body>
	</html>
	function waitUntilInstalled(registration) {
	return new Promise(function(resolve, reject) {
	if (registration.installing) {
	registration.installing.addEventListener('statechange', function(e) {
	if (e.target.state === 'installed') {
	resolve();
	} else if (e.target.state === 'redundant') {
	reject();
	}
	});
	} else {
	resolve();
	}
	});
	}

	if ('serviceWorker' in navigator) {
	navigator.serviceWorker.register('./service-worker.js', { scope: './' })
	.then(waitUntilInstalled)
	.catch(function(error) {
	console.error(error);
	});
	}
	var CACHE_VERSION = 1;
	var CURRENT_CACHES = {
	prefetch: 'prefetch-cache-v' + CACHE_VERSION
	};

	var urlsToPrefetch = [
	'/assets/video/animation.mp4'
	];

	self.addEventListener('install', function(event) {
	self.skipWaiting();

	event.waitUntil(
	caches.open(CURRENT_CACHES.prefetch).then(function(cache) {
	return cache.addAll(urlsToPrefetch);
	})
	);
	});

	self.addEventListener('activate', function(event) {
	//delete all caches that aren't named in CURRENT_CACHES
	var expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) {
	return CURRENT_CACHES[key];
	});

	event.waitUntil(
	caches.keys().then(function(cacheNames) {
	return Promise.all(
	cacheNames.map(function(cacheName) {
	if (expectedCacheNames.indexOf(cacheName) === -1) {
	return caches.delete(cacheName);
	}
	})
	);
	})
	);
	});

	self.addEventListener('fetch', function(event) {
	console.log('Handling fetch event for', event.request.url);

	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) {
	var internalUrl = ""
	urlsToPrefetch.forEach(function (item) {
	if(event.request.url.indexOf(item) > 0){
	internalUrl = item;
	}
	});
	return cache.match(internalUrl);
	}).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 {
	console.log('Non-range request for', event.request.url);
	event.respondWith(
	caches.match(event.request).then(function(response) {
	if (response) {
	console.log('Found response in cache:', response);
	return response;
	}
	console.log('No response found in cache. About to fetch from network...');
	return fetch(event.request).then(function(response) {
	console.log('Response from network is:', response);

	return response;
	}).catch(function(error) {
	console.error('Fetching failed:', error);
	throw error;
	});
	})
	);
	}
	});