diff --git a/templates/widget/index.html b/templates/widget/index.html index fad5bd16..dfdaa88d 100644 --- a/templates/widget/index.html +++ b/templates/widget/index.html @@ -21,7 +21,7 @@ SPDX-License-Identifier: MIT OR Apache-2.0 I'm not a robot - ((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 => { +export const solveCaptchaRunner = async (worker: Worker, e: Event): Promise => { const PROGRESS_FILL = document.querySelector(".progress__fill"); const setWidth = (width: number) => { diff --git a/templates/widget/service-worker.ts b/templates/widget/service-worker.ts index b8808618..99284d61 100644 --- a/templates/widget/service-worker.ts +++ b/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; diff --git a/templates/widget/types.ts b/templates/widget/types.ts index 59843596..1b1ffb19 100644 --- a/templates/widget/types.ts +++ b/templates/widget/types.ts @@ -40,5 +40,6 @@ export type Token = { }; export type ServiceWorkerMessage = + | { type: "ready" } | { type: "work"; value: ServiceWorkerWork } | { type: "progress"; nonce: number };