Load pow-sha256 polyfill to support browsers that aren't capable of

executing WASM

templates/widget/prove.ts

@@ -10,6 +10,7 @@
  */
 
 import { gen_pow } from "@mcaptcha/pow-wasm";
+import * as p from "@mcaptcha/pow_sha256-polyfill";
 import { WasmWork, PoWConfig } from "./types";
 
 /**
@@ -17,15 +18,44 @@ import { WasmWork, PoWConfig } from "./types";
  * @param {PoWConfig} config - the proof-of-work configuration using which
  * work needs to be computed
  * */
-const prove = (config: PoWConfig): WasmWork => {
-  const proofString = gen_pow(
-    config.salt,
-    config.string,
-    config.difficulty_factor
-  );
-  const proof: WasmWork = JSON.parse(proofString);
-
+const prove = async (config: PoWConfig): Promise<WasmWork> => {
+  let proof: WasmWork = null;
+  if (WasmSupported) {
+    const proofString = gen_pow(
+      config.salt,
+      config.string,
+      config.difficulty_factor
+    );
+    proof = JSON.parse(proofString);
+  } else {
+    console.log("WASM unsupported, expect delay during proof generation");
+    proof = await p.generate_work(
+      config.salt,
+      config.string,
+      config.difficulty_factor
+    );
+  }
   return proof;
 };
 
+// credits: @jf-bastien on Stack Overflow
+// https://stackoverflow.com/questions/47879864/how-can-i-check-if-a-browser-supports-webassembly
+const WasmSupported = (() => {
+  try {
+    if (
+      typeof WebAssembly === "object" &&
+      typeof WebAssembly.instantiate === "function"
+    ) {
+      const module = new WebAssembly.Module(
+        Uint8Array.of(0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00)
+      );
+      if (module instanceof WebAssembly.Module)
+        return new WebAssembly.Instance(module) instanceof WebAssembly.Instance;
+    }
+  } catch (e) {
+    console.error(e);
+  }
+  return false;
+})();
+
 export default prove;

templates/widget/service-worker.ts

@@ -19,12 +19,12 @@ import { PoWConfig, ServiceWorkerWork } from "./types";
 import log from "../logger";
 
 log.log("worker registered");
-onmessage = (e) => {
+onmessage = async (e) => {
   console.debug("message received at worker");
   const config: PoWConfig = e.data;
 
   const t0 = performance.now();
-  const work = prove(config);
+  const work = await prove(config);
 
   const t1 = performance.now();
   const duration = t1 - t0;