Implement Brotli compression worker and update index.html for improved performance

Author: Swimburger

App.razor

@@ -249,7 +249,7 @@
     private void OnFilesChange(InputFileChangeEventArgs e)
     {
         files.Clear();
-        files.AddRange(e.GetMultipleFiles().Select(f => new Models.File
+        files.AddRange(e.GetMultipleFiles(int.MaxValue).Select(f => new Models.File
         {
             BrowserFile = f,
             OriginalName = f.Name,

wwwroot/compression-worker.js

@@ -0,0 +1,15 @@
+import brotliWasm from 'https://cdn.jsdelivr.net/npm/brotli-wasm@3.0.1/index.web.js';
+
+const brotliReady = brotliWasm;
+
+self.onmessage = async ({ data: { id, type, payload, quality } }) => {
+    try {
+        const brotli = await brotliReady;
+        const result = type === 'compress'
+            ? brotli.compress(payload, { quality })
+            : brotli.decompress(payload);
+        self.postMessage({ id, result }, [result.buffer]);
+    } catch (err) {
+        self.postMessage({ id, error: String(err) });
+    }
+};

wwwroot/index.html

@@ -22,7 +22,7 @@
     <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin="anonymous" />
     <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin="anonymous" />
     <link rel="dns-prefetch" href="https://media.ethicalads.io" />
-    <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous" />
+    <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous" />
     <link href="manifest.json" rel="manifest" />
     <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
@@ -289,20 +289,41 @@ <h1 class="display-5 fw-bold">Online GZIP de/compressor</h1>
             setTimeout(() => URL.revokeObjectURL(url), 60000);
         };
     </script>
-    <script type="module">
-        import brotliWasm from 'https://cdn.jsdelivr.net/npm/brotli-wasm@3.0.1/index.web.js';
-        const brotliReady = brotliWasm;
-        window.brotliCompress = async (data, quality) => {
-            const brotli = await brotliReady;
-            return brotli.compress(data, { quality });
-        };
-        window.brotliDecompress = async (data) => {
-            const brotli = await brotliReady;
-            return brotli.decompress(data);
-        };
+    <script>
+        (function () {
+            const worker = new Worker('/compression-worker.js', { type: 'module' });
+            const pending = new Map();
+            let nextId = 0;
+
+            worker.onmessage = ({ data: { id, result, error } }) => {
+                const { resolve, reject } = pending.get(id);
+                pending.delete(id);
+                error ? reject(new Error(error)) : resolve(result);
+            };
+
+            worker.onerror = (e) => {
+                pending.forEach(({ reject }) => reject(new Error('Compression worker error: ' + e.message)));
+                pending.clear();
+            };
+
+            window.brotliCompress = (data, quality) => new Promise((resolve, reject) => {
+                const id = nextId++;
+                pending.set(id, { resolve, reject });
+                // slice() copies away from WASM linear memory before transferring
+                const copy = data.slice();
+                worker.postMessage({ id, type: 'compress', payload: copy, quality }, [copy.buffer]);
+            });
+
+            window.brotliDecompress = (data) => new Promise((resolve, reject) => {
+                const id = nextId++;
+                pending.set(id, { resolve, reject });
+                const copy = data.slice();
+                worker.postMessage({ id, type: 'decompress', payload: copy }, [copy.buffer]);
+            });
+        })();
     </script>
     <script src="_framework/blazor.webassembly#[.{fingerprint}].js"></script>
-    <script>navigator.serviceWorker.register('service-worker.js', { updateViaCache: 'none' });</script>
+    <script>navigator.serviceWorker.register('service-worker.js', { updateViaCache: 'none' }).catch(() => {});</script>
 </body>
 
 </html>