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

executing WASM

package.json

@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@mcaptcha/pow-wasm": "^0.1.0-alpha-1",
+    "@mcaptcha/pow_sha256-polyfill": "^0.1.0-alpha-1",
     "mcaptcha-glue": "^0.1.0-alpha-1"
   }
 }

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 prove = async (config: PoWConfig): Promise<WasmWork> => {
+  let proof: WasmWork = null;
+  if (WasmSupported) {
     const proofString = gen_pow(
       config.salt,
       config.string,
       config.difficulty_factor
     );
-  const proof: WasmWork = JSON.parse(proofString);
+    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;

tsconfig.json

@@ -1,8 +1,8 @@
 {
   "compilerOptions": {
     "incremental": true,
-    "target": "es5",
+    "target": "es2020",
-    "module": "es6",
+    "module": "es2020",
     "allowJs": false,
     "sourceMap": true,
     "outDir": "./static-assets/bundle",

yarn.lock

@@ -538,6 +538,11 @@
   resolved "https://registry.yarnpkg.com/@mcaptcha/pow-wasm/-/pow-wasm-0.1.0-alpha-1.tgz#ec3fac9d34b7b6436dec6597629501e524a8b702"
   integrity sha512-0ym6kDkC7ilpp9AsK60qrpLGnqO78fYDzAypDaAqyw7uQDtg27VacYvGWt0RI3R2AnsYW6L5Q6wsd2WJDEzNmA==
 
+"@mcaptcha/pow_sha256-polyfill@^0.1.0-alpha-1":
+  version "0.1.0-alpha-1"
+  resolved "https://registry.yarnpkg.com/@mcaptcha/pow_sha256-polyfill/-/pow_sha256-polyfill-0.1.0-alpha-1.tgz#d34ee78de39223416358c540af46ea863e4373c2"
+  integrity sha512-lnQNBCOnVI9BunHP8FGCsGs310GguQWdxSspXlvWcrLwgl86aq0hlBzZfOV+szG/jeTRAMry0He3MrD/kbqB/Q==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"