jeffposnick · August 25, 2020 11:50
diff --git a/index.html b/index.html
 <html>
  <head>
    <title>DevTools Test</title>
  </head>
  <body>
    <script>
      if ('serviceWorker' in navigator) {
        navigator.serviceWorker.register('sw.js');
        // Wait until the SW has taken control of the page before inserting the <script> elements.
        // That way we can be sure the SW's fetch handler will intercept them.
        navigator.serviceWorker.ready.then(() => {
          ['one.js', 'two.js', 'three.js'].forEach(url => {
            var scriptElement = document.createElement('script');
            scriptElement.src = url;
            document.body.appendChild(scriptElement);
          });
        });
      }
    </script>
    <p>Nothing to see here! Check the DevTools Network panel.</p>
  </body>
 </html>
diff --git a/one.js b/one.js
 // I'm requested from the network inside the SW's fetch handler.
diff --git a/sw.js b/sw.js
 self.addEventListener('install', event => {
  event.waitUntil(self.skipWaiting());
 });

 self.addEventListener('activate', event => {
  event.waitUntil(self.clients.claim());
 });

 self.addEventListener('fetch', event => {
  if (event.request.url.endsWith('one.js')) {
    // Requests for one.js will result in the SW firing off a fetch() request,
    // which will be reflected in the DevTools Network panel.
    event.respondWith(fetch(event.request));
  } else if (event.request.url.endsWith('two.js')) {
    // Requests for two.js will result in the SW constructing a new Response object,
    // so there won't be an additional network request in the DevTools Network panel.
    event.respondWith(new Response('// no-op'));
  }
  
  // Requests for anything else won't trigger event.respondWith(), so there won't be
  // any SW interaction reflected in the DevTools Network panel.
 });
diff --git a/three.js b/three.js
 // The SW's fetch handler ignores me, so I'm just requested from the page.
diff --git a/two.js b/two.js
 // I'm never actually requested.
	<html>
	<head>
	<title>DevTools Test</title>
	</head>
	<body>
	<script>
	if ('serviceWorker' in navigator) {
	navigator.serviceWorker.register('sw.js');
	// Wait until the SW has taken control of the page before inserting the <script> elements.
	// That way we can be sure the SW's fetch handler will intercept them.
	navigator.serviceWorker.ready.then(() => {
	['one.js', 'two.js', 'three.js'].forEach(url => {
	var scriptElement = document.createElement('script');
	scriptElement.src = url;
	document.body.appendChild(scriptElement);
	});
	});
	}
	</script>
	<p>Nothing to see here! Check the DevTools Network panel.</p>
	</body>
	</html>
	self.addEventListener('install', event => {
	event.waitUntil(self.skipWaiting());
	});

	self.addEventListener('activate', event => {
	event.waitUntil(self.clients.claim());
	});

	self.addEventListener('fetch', event => {
	if (event.request.url.endsWith('one.js')) {
	// Requests for one.js will result in the SW firing off a fetch() request,
	// which will be reflected in the DevTools Network panel.
	event.respondWith(fetch(event.request));
	} else if (event.request.url.endsWith('two.js')) {
	// Requests for two.js will result in the SW constructing a new Response object,
	// so there won't be an additional network request in the DevTools Network panel.
	event.respondWith(new Response('// no-op'));
	}

	// Requests for anything else won't trigger event.respondWith(), so there won't be
	// any SW interaction reflected in the DevTools Network panel.
	});