Module Workers support in Firefox

Fixes #51
tomayac · Jan 26, 2022 · 1caf928 · 1caf928
1 parent 8d89914
commit 1caf928
Show file tree

Hide file tree

Showing 15 changed files with 110 additions and 50 deletions.
diff --git a/docs/assets/filehandling.4cb07dc9.js → docs/assets/filehandling.618c218c.js b/docs/assets/filehandling.4cb07dc9.js → docs/assets/filehandling.618c218c.js
diff --git a/docs/assets/index.54ec3c4a.js b/docs/assets/index.54ec3c4a.js
diff --git a/docs/assets/index.ecc37913.js b/docs/assets/index.ecc37913.js
diff --git a/docs/assets/install.bccde453.js → docs/assets/install.9bcfb7b8.js b/docs/assets/install.bccde453.js → docs/assets/install.9bcfb7b8.js
diff --git a/docs/assets/module-workers-polyfill.min.dc7647fd.js b/docs/assets/module-workers-polyfill.min.dc7647fd.js
diff --git a/docs/assets/windowcontrols.275a60cd.js → docs/assets/windowcontrols.d9e79367.js b/docs/assets/windowcontrols.275a60cd.js → docs/assets/windowcontrols.d9e79367.js
diff --git a/docs/index.html b/docs/index.html
@@ -143,7 +143,7 @@
       }
     </script>
     <base target="_blank" />
-    <script type="module" crossorigin src="/assets/index.ecc37913.js"></script>
+    <script type="module" crossorigin src="/assets/index.54ec3c4a.js"></script>
     <link rel="modulepreload" href="/assets/vendor.219e5f4d.js">
     <link rel="stylesheet" href="/assets/index.7c07bd9d.css">
   <link rel="manifest" href="/manifest.webmanifest"></head>

diff --git a/docs/sw.js b/docs/sw.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,6 +24,7 @@
     "canvas-size": "^1.2.5",
     "esm-potrace-wasm": "^0.2.1",
     "idb-keyval": "^6.1.0",
+    "module-workers-polyfill": "^0.3.2",
     "pinch-zoom-element": "^1.1.1",
     "svgo": "^2.8.0"
   },

diff --git a/src/js/clipboard.js b/src/js/clipboard.js
@@ -65,20 +65,25 @@ copyButton.addEventListener('click', async () => {
   let svg = svgOutput.innerHTML;
   showToast(i18n.t('optimizingSVG'), Infinity);
   try {
-    // Safari treats user activation differently:
-    // https://bugs.webkit.org/show_bug.cgi?id=222262.
-    await navigator.clipboard.write([
-      new ClipboardItem({
-        'text/plain': new Promise(async (resolve) => {
-          svg = await optimizeSVG(svg);
-          resolve(new Blob([svg], { type: 'text/plain' }));
-        }),
-        'image/svg+xml': new Promise(async (resolve) => {
-          svg = await optimizeSVG(svg);
-          resolve(new Blob([svg], { type: 'image/svg+xml' }));
+    // Firefox only supports `navigator.clipboard.write()`.
+    if (!('ClipboardItem' in window)) {
+      await navigator.clipboard.writeText(await optimizeSVG(svg));
+    } else {
+      // Safari treats user activation differently:
+      // https://bugs.webkit.org/show_bug.cgi?id=222262.
+      await navigator.clipboard.write([
+        new ClipboardItem({
+          'text/plain': new Promise(async (resolve) => {
+            svg = await optimizeSVG(svg);
+            resolve(new Blob([svg], { type: 'text/plain' }));
+          }),
+          'image/svg+xml': new Promise(async (resolve) => {
+            svg = await optimizeSVG(svg);
+            resolve(new Blob([svg], { type: 'image/svg+xml' }));
+          }),
         }),
-      }),
-    ]);
+      ]);
+    }
   } catch (err) {
     console.log(err.name, err.message);
     svg = await optimizeSVG(svg);

diff --git a/src/js/color.js b/src/js/color.js
@@ -54,7 +54,10 @@ const convertToColorSVG = async (imageData) => {
     intervalID.current = setInterval(() => {
       const svg = `${prefix}${paths}${suffix}`;
       if (svg.length !== lastLength) {
-        svgOutput.setAttribute('transform', svgOutput.dataset.transform);
+        const transform = svgOutput.dataset.transform;
+        if (transform) {
+          svgOutput.setAttribute('transform', transform);
+        }
         svgOutput.innerHTML = svg;
         lastLength = svg.length;
       }

diff --git a/src/js/main.js b/src/js/main.js
@@ -37,8 +37,28 @@ if ('onbeforeinstallprompt' in window && 'onappinstalled' in window) {
   installButton.style.display = 'none';
 }
 
+// From https://stackoverflow.com/a/62963963/6255000.
+const supportsWorkerType = () => {
+  let supports = false;
+  const tester = {
+    get type() {
+      supports = true;
+    },
+  };
+  try {
+    new Worker('blob://', tester);
+  } finally {
+    return supports;
+  }
+};
+
 (async () => {
   initUI();
+  if (!supportsWorkerType()) {
+    await import(
+      '../.././node_modules/module-workers-polyfill/module-workers-polyfill.min.js'
+    );
+  }
 
   const updateSW = registerSW({
     onOfflineReady() {

diff --git a/src/js/orchestrate.js b/src/js/orchestrate.js
@@ -54,18 +54,24 @@ const startProcessing = async () => {
   }
   const transform = svgOutput.getAttribute('transform');
   svgOutput.innerHTML = spinnerSVG;
-  svgOutput.dataset.transform = transform;
-  svgOutput.setAttribute('transform', '');
+  if (transform) {
+    svgOutput.dataset.transform = transform;
+    svgOutput.setAttribute('transform', '');
+  }
   const imageData = supportsOffscreenCanvas
     ? await preProcessInputImage()
     : preProcessMainCanvas();
   if (colorRadio.checked) {
     const svg = await convertToColorSVG(imageData);
-    svgOutput.setAttribute('transform', transform);
+    if (transform) {
+      svgOutput.setAttribute('transform', transform);
+    }
     displayResult(svg, COLOR);
   } else {
     const svg = await convertToMonochromeSVG(imageData);
-    svgOutput.setAttribute('transform', transform);
+    if (transform) {
+      svgOutput.setAttribute('transform', transform);
+    }
     displayResult(svg, MONOCHROME);
   }
 };

diff --git a/vite.config.js b/vite.config.js
@@ -29,7 +29,11 @@ import webmanifest from './src/manifest.json';
 export default {
   plugins: [
     dynamicImportVars({
-      include: ['./src/i18n/*', './src/js/filehandling.js'],
+      include: [
+        './src/i18n/*',
+        './src/js/filehandling.js',
+        './node_modules/module-workers-polyfill/module-workers-polyfill.min.js',
+      ],
     }),
     vitePWA({
       registerType: 'autoUpdate',