fix(web): add a fetch keyboard function

This change adds a `fetchKeyboardFunc` to `DOMKeyboardLoader` that allows
mobile platforms to use a different method to fetch the keyboard data.
WebView's `KeymanEngine` implements fetching the URL by using
`XMLHttpRequest`.

Author: ermshiperete

web/src/app/webview/src/keymanEngine.ts

@@ -1,5 +1,5 @@
 import { DeviceSpec } from 'keyman/common/web-utils';
-import { DefaultOutputRules, ProcessorAction } from 'keyman/engine/keyboard';
+import { DefaultOutputRules, DOMKeyboardLoader, ProcessorAction } from 'keyman/engine/keyboard';
 import { KeymanEngineBase, KeyboardInterfaceBase } from 'keyman/engine/main';
 import { AnchoredOSKView, ViewConfiguration, StaticActivator } from 'keyman/engine/osk';
 import { getAbsoluteX, getAbsoluteY } from 'keyman/engine/dom-utils';
@@ -42,6 +42,10 @@ export class KeymanEngine extends KeymanEngineBase<WebviewConfiguration, Context
     this.hardKeyboard = new PassthroughKeyboard(config.hardDevice);
   }
 
+  protected createKeyboardLoader(): DOMKeyboardLoader {
+    return new DOMKeyboardLoader(this.interface, this.config.applyCacheBusting, this.fetch);
+  }
+
   async init(options: Required<WebviewInitOptionSpec>) {
     const device = new DeviceSpec(
       'native',
@@ -159,4 +163,32 @@ export class KeymanEngine extends KeymanEngineBase<WebviewConfiguration, Context
   get context() {
     return this.contextManager.activeTextStore;
   }
+
+  /**
+   * Fetches a resource from the specified URL.
+   *
+   * @param uri
+   * @returns A response promise
+   *
+   * @see https://stackoverflow.com/a/63582110
+   *
+   * Note: Using XMLHttpRequest allows us to work around the limitations of
+   * Fetch API's fetch() which doesn't support file:// URLs. At least in
+   * Keyman for Android we still have to explicitly allow file URLs.
+   */
+  private fetch(uri: string): Promise<Response> {
+    return new Promise(function (resolve, reject) {
+      const httpRequest = new XMLHttpRequest();
+      httpRequest.onload = function () {
+        resolve(new Response(httpRequest.response, { status: httpRequest.status }));
+      };
+      httpRequest.onerror = (e) => {
+        reject(e);
+      };
+      httpRequest.open('GET', uri);
+      httpRequest.responseType = "arraybuffer";
+      httpRequest.send(null);
+    });
+  };
+
 }

web/src/engine/src/keyboard/index.ts

@@ -32,7 +32,7 @@ export { KeyMapping } from "./keyMapping.js";
 export { type SystemStoreMutationHandler, MutableSystemStore, SystemStore, SystemStoreIDs, type SystemStoreDictionary } from "./systemStore.js";
 export { type VariableStores, VariableStoreSerializer } from "./variableStore.js";
 
-export { DOMKeyboardLoader } from './keyboards/loaders/domKeyboardLoader.js';
+export { type FetchFunction, DOMKeyboardLoader } from './keyboards/loaders/domKeyboardLoader.js';
 export { SyntheticTextStore } from "./syntheticTextStore.js";
 export { TextStore } from "./textStore.js";
 export { TextStoreLanguageProcessorInterface } from "./textStoreLanguageProcessorInterface.js";

web/src/engine/src/keyboard/keyboards/loaders/domKeyboardLoader.ts

@@ -7,14 +7,17 @@ import { KeyboardHarness, MinimalKeymanGlobal } from '../keyboardHarness.js';
 import { KeyboardLoaderBase } from '../keyboardLoaderBase.js';
 import { KeyboardLoadErrorBuilder } from '../keyboardLoadError.js';
 
+export type FetchFunction = (uri: string) => Promise<Response>;
+
 export class DOMKeyboardLoader extends KeyboardLoaderBase {
   public readonly element: HTMLIFrameElement;
   private readonly performCacheBusting: boolean;
+  private readonly fetchKeyboardFunc: FetchFunction;
 
   constructor()
   constructor(harness: KeyboardHarness);
-  constructor(harness: KeyboardHarness, cacheBust?: boolean)
-  constructor(harness?: KeyboardHarness, cacheBust?: boolean) {
+  constructor(harness: KeyboardHarness, cacheBust?: boolean, fetchKeyboardFunc?: FetchFunction)
+  constructor(harness?: KeyboardHarness, cacheBust?: boolean, fetchKeyboardFunc?: FetchFunction) {
     if(harness && harness._jsGlobal != window) {
       // Copy the String typing over; preserve string extensions!
       harness._jsGlobal['String'] = window['String'];
@@ -27,47 +30,18 @@ export class DOMKeyboardLoader extends KeyboardLoaderBase {
     }
 
     this.performCacheBusting = cacheBust || false;
+    const defaultFetchFunc: FetchFunction = (uri) => fetch(uri);
+    this.fetchKeyboardFunc = fetchKeyboardFunc ?? defaultFetchFunc;
   }
 
-  /**
-   * Fetches a resource from the specified URL. This replaces the Fetch API function
-   * fetch() which doesn't work with file:// URLs.
-   *
-   * @param uri
-   * @returns A response promise
-   *
-   * @see https://stackoverflow.com/a/63582110
-   *
-   * Note: Even with this function some browsers like Chrome will still block
-   * file:// because of CORS, so where possible we shouldn't use file:// but
-   * serve the files through a HTTP server. In the Keyman for Android and iOS
-   * apps however we don't want to do this and this function allows us to work
-   * around the limitation of the Fetch API fetch(). On Android we still have to
-   * explicitly allow file URLs.
-   */
-  private fetch(uri: string): Promise<Response> {
-    return new Promise(function (resolve, reject) {
-      const httpRequest = new XMLHttpRequest();
-      httpRequest.onload = function () {
-        resolve(new Response(httpRequest.response, { status: httpRequest.status }));
-      };
-      httpRequest.onerror = (e) => {
-        reject(e);
-      };
-      httpRequest.open('GET', uri);
-      httpRequest.responseType = "arraybuffer";
-      httpRequest.send(null);
-    });
-  };
-
   protected async loadKeyboardBlob(uri: string, errorBuilder: KeyboardLoadErrorBuilder): Promise<Uint8Array> {
     if (this.performCacheBusting) {
       uri = this.cacheBust(uri);
     }
 
     let response: Response;
     try {
-      response = await this.fetch(uri);
+      response = await this.fetchKeyboardFunc(uri);
     } catch (e) {
       throw errorBuilder.keyboardDownloadError(e);
     }

web/src/engine/src/main/keymanEngineBase.ts

@@ -225,6 +225,10 @@ export class KeymanEngineBase<
     });
   }
 
+  protected createKeyboardLoader(): DOMKeyboardLoader {
+    return new DOMKeyboardLoader(this.interface, this.config.applyCacheBusting);
+  }
+
   public async init(optionSpec: Required<InitOptionSpec>){
     // There may be some valid mutations possible even on repeated calls?
     // The original seems to allow it.
@@ -242,7 +246,7 @@ export class KeymanEngineBase<
 
     // Since we're not sandboxing keyboard loads yet, we just use `window` as the jsGlobal object.
     // All components initialized below require a properly-configured `config.paths` or similar.
-    const keyboardLoader = new DOMKeyboardLoader(this.interface, config.applyCacheBusting);
+    const keyboardLoader = this.createKeyboardLoader();
     this.keyboardRequisitioner = new KeyboardRequisitioner(keyboardLoader, new DOMCloudRequester(), this.config.paths);
     this.modelCache = new ModelCache();
     const kbdCache = this.keyboardRequisitioner.cache;
@@ -598,4 +602,4 @@ export class KeymanEngineBase<
   };
 }
 
-// Intent:  define common behaviors for both primary app types; each then subclasses & extends where needed.
+// Intent:  define common behaviors for both primary app types; each then subclasses & extends where needed.