await worker is ready

templates/widget/index.html

@@ -21,7 +21,7 @@ SPDX-License-Identifier: MIT OR Apache-2.0
         <label class="widget__verification-container" for="widget__verification-checkbox">
           <span id="widget__verification-text"
             >I'm not a robot</span>
-          <input 
+          <input disabled
               id="widget__verification-checkbox"
               aria-valuenow="I'm not a robot"
                 aria-checked="false"

templates/widget/index.ts

@@ -12,7 +12,17 @@ import * as CONST from "./const";
 import "./main.scss";
 
 let LOCK = false;
-const worker = new Worker("/bench.js");
+
+const workerPromise = new Promise<Worker>((res) => {
+  const worker = new Worker("/bench.js");
+  worker.onmessage = (event: MessageEvent) => {
+    const message: ServiceWorkerMessage = event.data;
+    if(message.type === "ready") {
+      console.log("worker ready");
+      res(worker);
+    }
+  };
+});
 
 /** add  mcaptcha widget element to DOM */
 export const registerVerificationEventHandler = (): void => {
@@ -20,10 +30,14 @@ export const registerVerificationEventHandler = (): void => {
     document.querySelector(".widget__verification-container")
   );
   verificationContainer.style.display = "flex";
-  CONST.btn().addEventListener("click", (e) => solveCaptchaRunner(e));
+  workerPromise.then((worker: Worker) => {
+    const btn = CONST.btn();
+    btn.disabled = false;
+    btn.addEventListener("click", (e) => solveCaptchaRunner(worker, e));
+  });
 };
 
-export const solveCaptchaRunner = async (e: Event): Promise<void> => {
+export const solveCaptchaRunner = async (worker: Worker, e: Event): Promise<void> => {
   const PROGRESS_FILL = <HTMLElement>document.querySelector(".progress__fill");
 
   const setWidth = (width: number) => {

templates/widget/service-worker.ts

@@ -9,6 +9,12 @@ import prove from "./prove";
 import { PoWConfig, ServiceWorkerMessage, ServiceWorkerWork } from "./types";
 
 log.log("worker registered");
+
+const ready: ServiceWorkerMessage = {
+  type: "ready",
+};
+postMessage(ready);
+
 onmessage = async (e) => {
   console.debug("message received at worker");
   const config: PoWConfig = e.data;

templates/widget/types.ts

@@ -40,5 +40,6 @@ export type Token = {
 };
 
 export type ServiceWorkerMessage =
+  | { type: "ready" }
   | { type: "work"; value: ServiceWorkerWork }
   | { type: "progress"; nonce: number };