jcubic/index.html

## index.html
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
</head>
<body>
  <button id="sse_start" disabled>Start</button>
  <button id="sse_stop" disabled>Stop</button>
  <pre id="output">Loading Service Worker</pre>
  <script>
   if ('serviceWorker' in navigator) {
       var scope = location.pathname.replace(/\/[^\/]+$/, '/');
       navigator.serviceWorker.register('sw.js', { scope })
                .then(function(reg) {
                    reg.addEventListener('updatefound', function() {
                        var installingWorker = reg.installing;
                        console.log('A new service worker is being installed:',
                                    installingWorker);
                    });
                    // registration worked
                    console.log('Registration succeeded. Scope is ' + reg.scope);
                    sse_start.disabled = sse_stop.disabled = false;
                    set('Ready');
                }).catch(function(error) {
                    // registration failed
                    console.log('Registration failed with ' + error);
                });
   }
   function set(text) {
       output.innerHTML = text;
   }

   function clear() {
       output.innerHTML = '';
   }

   function log(text) {
       output.innerHTML += '\n' + text;
   }

   let see_source;

   sse_start.addEventListener('click', () => {
       see_source = new EventSource("./sse");
       clear();
       see_source.onmessage = event => {
           log(event.data);
       };
   });

   sse_stop.addEventListener('click', () => {
       if (see_source) {
           see_source.close();
           see_source = null;
       }
   });
  </script>
</body>
</html>

## sw.js

let timerId;
let count = 10;
function startStream(send) {
  timerId = setInterval(function() {
    if (--count <= 0) {
      throw new Error('Nasty Error');
    }
    const now = (new Date()).toString();
    send({ data: now });
  }, 1000);
}

function stopStream() {
  clearInterval(timerId);
}

self.addEventListener('fetch', (event) => {
  event.respondWith(new Promise((resolve, reject) => {
    const req = event.request;
    const url = new URL(req.url);

    console.log({url});

    if (url.pathname.match(/sse/)) {
      let send, close, defunct;
      const stream = new ReadableStream({
        cancel() {
          defunct = true;
          stopStream();
        },
        start: controller => {
          send = function(event) {
            if (!defunct) {
              const chunk = createChunk(event);
              const payload = new TextEncoder().encode(chunk);
              controller.enqueue(payload);
            }
          };
          close = function close() {
            controller.close();
            stream = null;
            stopStream();
          };
        }
      });
      resolve(new Response(stream, {
        headers: {
          'Content-Type': 'text/event-stream; charset=utf-8',
          'Transfer-Encoding': 'chunked',
          'Connection': 'keep-alive'
        }
      }));
      startStream(send);
    }
    if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
      return;
    }
    fetch(event.request).then(resolve).catch(reject);
  }));
});

function createChunk({ data, event, retry, id }) {
  return Object.entries({ event, id, data, retry })
    .filter(([, value]) => value)
    .map(([key, value]) => `${key}: ${value}`)
    .join('\n') + '\n\n';
}
	<!DOCTYPE HTML>
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta charset="utf-8" />
	</head>
	<body>
	<button id="sse_start" disabled>Start</button>
	<button id="sse_stop" disabled>Stop</button>
	<pre id="output">Loading Service Worker</pre>
	<script>
	if ('serviceWorker' in navigator) {
	var scope = location.pathname.replace(/\/[^\/]+$/, '/');
	navigator.serviceWorker.register('sw.js', { scope })
	.then(function(reg) {
	reg.addEventListener('updatefound', function() {
	var installingWorker = reg.installing;
	console.log('A new service worker is being installed:',
	installingWorker);
	});
	// registration worked
	console.log('Registration succeeded. Scope is ' + reg.scope);
	sse_start.disabled = sse_stop.disabled = false;
	set('Ready');
	}).catch(function(error) {
	// registration failed
	console.log('Registration failed with ' + error);
	});
	}
	function set(text) {
	output.innerHTML = text;
	}

	function clear() {
	output.innerHTML = '';
	}

	function log(text) {
	output.innerHTML += '\n' + text;
	}

	let see_source;

	sse_start.addEventListener('click', () => {
	see_source = new EventSource("./sse");
	clear();
	see_source.onmessage = event => {
	log(event.data);
	};
	});

	sse_stop.addEventListener('click', () => {
	if (see_source) {
	see_source.close();
	see_source = null;
	}
	});
	</script>
	</body>
	</html>

	let timerId;
	let count = 10;
	function startStream(send) {
	timerId = setInterval(function() {
	if (--count <= 0) {
	throw new Error('Nasty Error');
	}
	const now = (new Date()).toString();
	send({ data: now });
	}, 1000);
	}

	function stopStream() {
	clearInterval(timerId);
	}

	self.addEventListener('fetch', (event) => {
	event.respondWith(new Promise((resolve, reject) => {
	const req = event.request;
	const url = new URL(req.url);

	console.log({url});

	if (url.pathname.match(/sse/)) {
	let send, close, defunct;
	const stream = new ReadableStream({
	cancel() {
	defunct = true;
	stopStream();
	},
	start: controller => {
	send = function(event) {
	if (!defunct) {
	const chunk = createChunk(event);
	const payload = new TextEncoder().encode(chunk);
	controller.enqueue(payload);
	}
	};
	close = function close() {
	controller.close();
	stream = null;
	stopStream();
	};
	}
	});
	resolve(new Response(stream, {
	headers: {
	'Content-Type': 'text/event-stream; charset=utf-8',
	'Transfer-Encoding': 'chunked',
	'Connection': 'keep-alive'
	}
	}));
	startStream(send);
	}
	if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
	return;
	}
	fetch(event.request).then(resolve).catch(reject);
	}));
	});

	function createChunk({ data, event, retry, id }) {
	return Object.entries({ event, id, data, retry })
	.filter(([, value]) => value)
	.map(([key, value]) => `${key}: ${value}`)
	.join('\n') + '\n\n';
	}