Implement fallback inline worker if service worker is not working

Resources/assets/js/modules/Captcha.js

@@ -1,3 +1,4 @@
+import FallbackServiceWorker from './FallbackServiceWorker';
 
 /**
  * Registers a service worker and let it solve a captcha puzzle
@@ -18,9 +19,14 @@ export default class Captcha {
             return;
         }
 
-        this.serviceWorker = new Worker(serviceWorkerPath)
+        try {
+            this.serviceWorker = new Worker(serviceWorkerPath)
+        } catch(e) {
+            this.serviceWorker = new FallbackServiceWorker();
+        }
+
         this.serviceWorker.addEventListener('message', (e) => {
-            const { data } = e;
+            const {data} = e;
             switch (data.cmd) {
                 case 'solution':
                     this.solveResolve(data.args);
@@ -29,15 +35,14 @@ export default class Captcha {
                     this.solveReject(data.args);
                     break;
                 case 'progress':
-                    if(this.onProgressCallback) {
+                    if (this.onProgressCallback) {
                         this.onProgressCallback({
                             ...data.args,
                             duration: performance.now() - this.solveStartTime
                         })
                     }
                     break;
                 default:
-                    console.log(data);
                     break;
             }
         });

Resources/assets/js/modules/FallbackServiceWorker.js

@@ -0,0 +1,31 @@
+import PuzzleSolver from "./PuzzleSolver";
+
+export default class FallbackServiceWorker {
+    constructor() {
+        this.listeners = {};
+        const puzzleSolver = new PuzzleSolver(this, true);
+        this.addEventListener('message', function(e) {
+            const { data } = e;
+            switch (data.cmd) {
+                case 'start':
+                    const {
+                        timestamp,
+                        targetHash,
+                        puzzle,
+                        puzzleStrength,
+                    } = data.args;
+                    puzzleSolver.solve(timestamp, targetHash, puzzle, puzzleStrength);
+                    break;
+            }
+        }, false);
+    }
+    addEventListener(message, func) {
+        this.listeners[message] = this.listeners[message] || [];
+        this.listeners[message].push(func);
+    }
+    postMessage(message) {
+        this.listeners.message.forEach((l) => {
+            l({data: message});
+        });
+    }
+}

Resources/assets/js/modules/PuzzleSolver.js

@@ -2,8 +2,9 @@ import { Sha256 } from '@aws-crypto/sha256-browser'
 
 export default class PuzzleSolver {
 
-    constructor(messageBus = null) {
+    constructor(messageBus = null, wait = false) {
         this.messageBus = messageBus || { postMessage() {} };
+        this.wait = wait;
     }
 
     async hash(str) {
@@ -52,6 +53,14 @@ export default class PuzzleSolver {
             const iCandidate = iLeftPuzzleSolution + iBitsMiddle + iBitsToAppend;
             const iHash = await this.hash(iCandidate);
 
+            if(this.wait && i % 500 === 0) {
+                await new Promise((resolve) => {
+                    setTimeout(() => {
+                        resolve();
+                    }, 1);
+                });
+            }
+
             if (iHash === pTargetHash) {
                 this.postMessage('solution', { solution: iCandidate });
                 return;

dist/entrypoints.json

@@ -0,0 +1,17 @@
+{
+  "entrypoints": {
+    "captcha": {
+      "css": [
+        "/captcha.css"
+      ],
+      "js": [
+        "/captcha.js"
+      ]
+    },
+    "captchaServiceWorker": {
+      "js": [
+        "/captchaServiceWorker.js"
+      ]
+    }
+  }
+}

dist/manifest.json

@@ -0,0 +1,5 @@
+{
+  "captcha.css": "/captcha.css",
+  "captcha.js": "/captcha.js",
+  "captchaServiceWorker.js": "/captchaServiceWorker.js"
+}