jeffposnick/index.html

## index.html
<html>
  <head>
    <title>Video src issue</title>
  </head>

  <body>
    <p>
      Playing the video will trigger a network request for
      <code>https://ia800502.us.archive.org/10/items/WebmVp8Vorbis/webmvp8.webm</code>.
      The <code>ia800502.us.archive.org</code> server doesn't support CORS, but when there is no SW
      involvement, the video plays without issue.
    </p>
    <p>
      When there is a SW (like there is on this page), if the <code>fetch</code> handler intercepts
      the request, it has a <code>mode: cors</code>, presumably because the request contains the
      <code>Accept</code> and <code>Range</code> headers, which trigger CORS mode.
    </p>
    <p>
      If you attempt to respond from within the <code>fetch</code> handler with an opaque response,
      a <code>NetworkError</code> is triggered on the page, since an opaque response can't be used
      for what was, from the page's perspective, a CORS request.
    </p>

    <video src="https://ia800502.us.archive.org/10/items/WebmVp8Vorbis/webmvp8.webm" preload="none" controls></video>

    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('service-worker.js');
      }
    </script>
  </body>
</html>

## service-worker.js
(global => {
  'use strict';

  // Boilerplate to ensure our service worker takes control of the page as soon as possible.
  global.addEventListener('install', event => event.waitUntil(global.skipWaiting()));
  global.addEventListener('activate', event => event.waitUntil(global.clients.claim()));

  global.addEventListener('fetch', event => {
    if (event.request.url.endsWith('.webm')) {
      console.log(`Original request's mode: ${event.request.mode}`);
      var noCORSRequest = new Request(event.request.url, {mode: 'no-cors'});
      console.log(`No-CORS request's mode: ${noCORSRequest.mode}`);
      event.respondWith(global.fetch(noCORSRequest).then(response => {
        console.log(`Response's type: ${response.type}`);
        return response;
      }));
    }
  });
})(self);
	<html>
	<head>
	<title>Video src issue</title>
	</head>

	<body>
	<p>
	Playing the video will trigger a network request for
	<code>https://ia800502.us.archive.org/10/items/WebmVp8Vorbis/webmvp8.webm</code>.
	The <code>ia800502.us.archive.org</code> server doesn't support CORS, but when there is no SW
	involvement, the video plays without issue.
	</p>
	<p>
	When there is a SW (like there is on this page), if the <code>fetch</code> handler intercepts
	the request, it has a <code>mode: cors</code>, presumably because the request contains the
	<code>Accept</code> and <code>Range</code> headers, which trigger CORS mode.
	</p>
	<p>
	If you attempt to respond from within the <code>fetch</code> handler with an opaque response,
	a <code>NetworkError</code> is triggered on the page, since an opaque response can't be used
	for what was, from the page's perspective, a CORS request.
	</p>

	<video src="https://ia800502.us.archive.org/10/items/WebmVp8Vorbis/webmvp8.webm" preload="none" controls></video>

	<script>
	if ('serviceWorker' in navigator) {
	navigator.serviceWorker.register('service-worker.js');
	}
	</script>
	</body>
	</html>
	(global => {
	'use strict';

	// Boilerplate to ensure our service worker takes control of the page as soon as possible.
	global.addEventListener('install', event => event.waitUntil(global.skipWaiting()));
	global.addEventListener('activate', event => event.waitUntil(global.clients.claim()));

	global.addEventListener('fetch', event => {
	if (event.request.url.endsWith('.webm')) {
	console.log(`Original request's mode: ${event.request.mode}`);
	var noCORSRequest = new Request(event.request.url, {mode: 'no-cors'});
	console.log(`No-CORS request's mode: ${noCORSRequest.mode}`);
	event.respondWith(global.fetch(noCORSRequest).then(response => {
	console.log(`Response's type: ${response.type}`);
	return response;
	}));
	}
	});
	})(self);