From 43033e789c4e781507cef02e19a5472e23215df1 Mon Sep 17 00:00:00 2001
From: guest271314 <guest271314@gmail.com>
Date: Sun, 22 Nov 2020 21:25:10 +0000
Subject: [PATCH 1/3] Update sw.js

Since the use case is downloading a resource with ServiceWorker and the bug is only observable at Chromium and Chrome we can perform the streaming operation at main thread, transfer the ReadableStream to ServiceWorker only when the stream completes without being cancelled by the user, we do not need the ServiceWorker for anything else before or after the ReadableStream is closed or cancelled.
---
 sw-stream-cancellation/sw.js | 73 +++++++++++++-----------------------
 1 file changed, 27 insertions(+), 46 deletions(-)

diff --git a/sw-stream-cancellation/sw.js b/sw-stream-cancellation/sw.js
index 6084020..de16396 100644
--- a/sw-stream-cancellation/sw.js
+++ b/sw-stream-cancellation/sw.js
@@ -1,52 +1,33 @@
-self.addEventListener('install', event => {
-    console.log('[SW] install event fired')
-});
+let readable;
 
-self.addEventListener('activate', event => {
-    console.log('[SW] activate event fired')
-    event.waitUntil(clients.claim())
+self.addEventListener('message', async (event) => {
+  readable = event.data;
+  console.log(event);
+  event.source.postMessage('ServiceWorker ready to serve download');
 });
 
 self.addEventListener('fetch', (event) => {
-    let url = new URL(event.request.url)
-    if (url.pathname === '/get-file') {
-      let interval
-      let counter = 0
-      let cancelNotification = false
-      let initialCancelReason = false
-      let rs = new ReadableStream({
-          start(c) {
-              interval = setInterval( () => {
-                  if (counter > 10) {                      
-                      console.log('[SW] FAIL: Stream must be already closed, but still not')
-                      clearInterval(interval)
-                      c.close()
-                      return
-                  }
-                  console.log('[SW] Stream: enqueue chunk', counter)
-                  try {
-                    c.enqueue( new Uint8Array([counter++]) )
-                  } catch(e) {
-                    if (cancelNotification) {
-                        console.log('[SW] OK: Stream has been closed with prior notification about cancellation')
-                        if (!initialCancelReason)
-                            console.log('[SW] WARN: Stream cancellation reason is not matched to initial')
-                    }
-                    else
-                        console.log('[SW] FAIL: Stream has been closed without prior notification about cancellation')
-                    clearInterval(interval)
-                  }
-              }, 2000)
-          },
-          cancel(reason) {
-              console.log('[SW] Stream cancelled with reason:', reason)
-              if (reason === url.pathname)
-                  initialCancelReason = true                  
-              cancelNotification = true
-          }
+  console.log(event);
+  let url = new URL(event.request.url);
+  if (url.pathname.includes('get-file')) {
+    console.log({ readable });
+    const headers = {
+      'content-disposition': 'attachment; filename="filename.txt"',
+    };
+    event.respondWith(
+      new Response(readable, {
+        headers,
       })
-      let r = new Response(rs)
-      event.respondWith( Promise.resolve(r) )
-  }  else
-      event.respondWith( fetch(event.request) )
+    );
+  }
+});
+
+self.addEventListener('install', (event) => {
+  console.log(event);
+  event.waitUntil(self.skipWaiting());
+});
+
+self.addEventListener('activate', (event) => {
+  console.log(event);
+  event.waitUntil(self.clients.claim());
 });

From b4277f1f4297246721b1d68d3ea06893c28fdc4d Mon Sep 17 00:00:00 2001
From: guest271314 <guest271314@gmail.com>
Date: Sun, 22 Nov 2020 21:26:26 +0000
Subject: [PATCH 2/3] Update index.html

---
 sw-stream-cancellation/index.html | 211 ++++++++++++++++++++++++++----
 1 file changed, 186 insertions(+), 25 deletions(-)

diff --git a/sw-stream-cancellation/index.html b/sw-stream-cancellation/index.html
index 8f6a8bf..4ec8c8f 100644
--- a/sw-stream-cancellation/index.html
+++ b/sw-stream-cancellation/index.html
@@ -1,42 +1,203 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <title>ServiceWorker - Response.body cancellation test</title>    
+    <meta charset="utf-8" />
+    <title>ServiceWorker - Response.body cancellation test</title>
     <script>
+      (async (_) => {
+        const unregisterServiceWorkers = async (_) => {
+          const registrations = await navigator.serviceWorker.getRegistrations();
+          for (const registration of registrations) {
+            console.log(registration);
+            try {
+              await registration.unregister();
+            } catch (e) {
+              throw e;
+            }
+          }
+          return `ServiceWorker's unregistered`;
+        };
+
         if ('serviceWorker' in navigator) {
-            navigator.serviceWorker.register('sw.js')
-            .then((reg) => {
-                console.log('[MAIN] Registration succeeded. SW Scope is ' + reg.scope);
-            }).catch((error) => {
-                console.log('[MAIN] Registration failed with ' + error);
+          try {
+            console.log(await unregisterServiceWorkers());
+            const reg = await navigator.serviceWorker.register('sw.js', {
+              scope: './',
             });
-            
-            if (navigator.serviceWorker.controller)
-                doTest()
+
+            console.log(
+              '[MAIN] Registration succeeded. SW Scope is ' + reg.scope
+            );
+
+            if (navigator.serviceWorker.controller) doTest(reg);
             else
-                navigator.serviceWorker.oncontrollerchange = doTest
+              navigator.serviceWorker.oncontrollerchange = (e) => {
+                console.log(e);
+                doTest(reg);
+              };
+          } catch (error) {
+            console.log('[MAIN] Registration failed with ' + error);
+          }
         }
-        
-        
-        async function doTest() {
-            console.log(`[MAIN] ${document.title} is started`)
-            const key = '/get-file'
-            let r = await fetch(key)
-            console.log('[MAIN] Trying to cancel stream using ReadableStream.cancel()')
+
+        async function doTest(reg) {
+          console.log(`[MAIN] ${document.title} is started`);
+          const key = 'get-file';
+          let controller;
+          let counter = 0;
+          let { readable, writable } = new TransformStream();
+          /*
+          const abortController = new AbortController;
+          const { signal } = abortController;
+          */
+          let r;
+          const writer = writable.getWriter();
+          reg.active.onmessage = (e) => console.log(e);
+          reg.active.postMessage(readable, [readable]);
+
+          (async (_) => {
             try {
-                await r.body.cancel(key)
-                console.log('[MAIN] Stream cancelled succesfully')
+              for (let i = 0; i < 10; i++) {
+                await writer.ready;
+                await new Promise((_) => setTimeout(_, 200));
+                await writer.write(i);
+              }
             } catch (e) {
-                console.log('[MAIN] Stream cancelled with error:', e)
+              console.error(e);
+              console.log(r);
             }
+          })();
+
+          try {
+            // do not use await here
+            r = fetch(key).catch(console.error);
+            // has no affect
+            //await r.body.cancel(key);
+            await new Promise((_) => setTimeout(_, 1000));
+            await writer.abort('cancel');
+            console.log(
+              '[MAIN] Trying to cancel stream using ReadableStream.cancel()'
+            );
+
+            r.then((_) => console.log(_.status, _.statusText));
+            console.log('[MAIN] Stream cancelled succesfully');
+          } catch (e) {
+            console.log('[MAIN] Stream cancelled with error:', e);
+          }
+          /*
+          // how this should be able to work
+          rs.pipeTo(writable,
+            { preventCancel: false, signal }
+          ).catch(console.error);
+          */
         }
+      })();
     </script>
   </head>
-  
-  <body>     
+
+  <body>
     <h3>Test progress is outputted to console</h3>
-    Related chromium issue: <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=638494" target="_blank">638494</a> - Response.body cancellation should be notified to the service worker.<hr />
-    <a href="https://github.com/norstbox/trial/tree/master/sw-stream-cancellation" target="_blank">View source</a> on GitHub
+    Related chromium issue:
+    <a
+      href="https://bugs.chromium.org/p/chromium/issues/detail?id=638494"
+      target="_blank"
+      >638494</a
+    >
+    - Response.body cancellation should be notified to the service worker.
+    <hr />
+    <a
+      href="https://github.com/norstbox/trial/tree/master/sw-stream-cancellation"
+      target="_blank"
+      >View source</a
+    >
+    on GitHub
+    <br /><br />
+    <button id="start-download">Start download</button
+    ><button id="abort-download">Abort download</button>
+    <script>
+      let readable, resolve, promise;
+
+      const unregisterServiceWorkers = async (_) => {
+        const registrations = await navigator.serviceWorker.getRegistrations();
+        for (const registration of registrations) {
+          console.log(registration);
+          try {
+            await registration.unregister();
+          } catch (e) {
+            throw e;
+          }
+        }
+        return `ServiceWorker's unregistered`;
+      };
+      unregisterServiceWorkers().then(console.log, console.error);
+      const start = document.getElementById('start-download');
+
+      const abort = document.getElementById('abort-download');
+
+      abort.onclick = async (e) => {
+        readable.cancel('Download aborted');
+      };
+
+      start.onclick = async (e) => {
+        if (document.getElementById('download')) {
+          document.body.removeChild(document.getElementById('download'));
+        }
+        promise = new Promise((_) => (resolve = _));
+        const unregisterable = await unregisterServiceWorkers();
+
+        console.log(unregisterable);
+
+        const reg = await navigator.serviceWorker.register('sw.js', {
+          scope: './',
+        });
+
+        console.log(reg);
+
+        let controller;
+
+        readable = new ReadableStream({
+          start(_) {
+            return (controller = _);
+          },
+          cancel(reason) {
+            console.log(`cancel(reason): ${reason}`);
+            resolve(reason);
+          },
+        });
+        const encoder = new TextEncoder();
+        downloadable: for (let i = 0; i < 100; i++) {
+          console.log(i, readable, controller);
+          try {
+            await new Promise((r) => setTimeout(r, 100));
+            controller.enqueue(encoder.encode(i + '\n'));
+          } catch (err) {
+            console.warn(err.message);
+            break downloadable;
+          }
+        }
+        resolve('Download ready');
+
+        if ((await promise) === 'Download aborted') {
+          console.log(`${await promise}, ${await unregisterServiceWorkers()}`);
+          readable = promise = resolve = void 0;
+        } else {
+          console.log(reg);
+          controller.close();
+
+          navigator.serviceWorker.onmessage = async (event) => {
+            console.log(event);
+            if (event.data === 'ServiceWorker ready to serve download') {
+              const iframe = document.createElement('iframe');
+
+              document.body.appendChild(iframe);
+              iframe.width = iframe.height = 0;
+              iframe.id = 'download';
+              iframe.src = 'get-file';
+            }
+          };
+          navigator.serviceWorker.controller.postMessage(readable, [readable]);
+        }
+      };
+    </script>
   </body>
 </html>

From 659ede44549cfea99d2e9d5deabfbcf14a68e3a4 Mon Sep 17 00:00:00 2001
From: guest271314 <guest271314@gmail.com>
Date: Sun, 22 Nov 2020 21:36:36 +0000
Subject: [PATCH 3/3] Update index.html

---
 sw-stream-cancellation/index.html | 91 -------------------------------
 1 file changed, 91 deletions(-)

diff --git a/sw-stream-cancellation/index.html b/sw-stream-cancellation/index.html
index 4ec8c8f..2255c72 100644
--- a/sw-stream-cancellation/index.html
+++ b/sw-stream-cancellation/index.html
@@ -3,98 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <title>ServiceWorker - Response.body cancellation test</title>
-    <script>
-      (async (_) => {
-        const unregisterServiceWorkers = async (_) => {
-          const registrations = await navigator.serviceWorker.getRegistrations();
-          for (const registration of registrations) {
-            console.log(registration);
-            try {
-              await registration.unregister();
-            } catch (e) {
-              throw e;
-            }
-          }
-          return `ServiceWorker's unregistered`;
-        };
-
-        if ('serviceWorker' in navigator) {
-          try {
-            console.log(await unregisterServiceWorkers());
-            const reg = await navigator.serviceWorker.register('sw.js', {
-              scope: './',
-            });
-
-            console.log(
-              '[MAIN] Registration succeeded. SW Scope is ' + reg.scope
-            );
-
-            if (navigator.serviceWorker.controller) doTest(reg);
-            else
-              navigator.serviceWorker.oncontrollerchange = (e) => {
-                console.log(e);
-                doTest(reg);
-              };
-          } catch (error) {
-            console.log('[MAIN] Registration failed with ' + error);
-          }
-        }
-
-        async function doTest(reg) {
-          console.log(`[MAIN] ${document.title} is started`);
-          const key = 'get-file';
-          let controller;
-          let counter = 0;
-          let { readable, writable } = new TransformStream();
-          /*
-          const abortController = new AbortController;
-          const { signal } = abortController;
-          */
-          let r;
-          const writer = writable.getWriter();
-          reg.active.onmessage = (e) => console.log(e);
-          reg.active.postMessage(readable, [readable]);
-
-          (async (_) => {
-            try {
-              for (let i = 0; i < 10; i++) {
-                await writer.ready;
-                await new Promise((_) => setTimeout(_, 200));
-                await writer.write(i);
-              }
-            } catch (e) {
-              console.error(e);
-              console.log(r);
-            }
-          })();
-
-          try {
-            // do not use await here
-            r = fetch(key).catch(console.error);
-            // has no affect
-            //await r.body.cancel(key);
-            await new Promise((_) => setTimeout(_, 1000));
-            await writer.abort('cancel');
-            console.log(
-              '[MAIN] Trying to cancel stream using ReadableStream.cancel()'
-            );
-
-            r.then((_) => console.log(_.status, _.statusText));
-            console.log('[MAIN] Stream cancelled succesfully');
-          } catch (e) {
-            console.log('[MAIN] Stream cancelled with error:', e);
-          }
-          /*
-          // how this should be able to work
-          rs.pipeTo(writable,
-            { preventCancel: false, signal }
-          ).catch(console.error);
-          */
-        }
-      })();
-    </script>
   </head>
-
   <body>
     <h3>Test progress is outputted to console</h3>
     Related chromium issue: