fix: resolve issues with fetching local assets when serving files from the file protocol (#514)

#### What does this PR do?
This PR fixes the issue where the assets in locally packaged apps are
unresolved and fail to load. Now the local assets are loaded
successfully and served to the app.

#### How has this been tested?
This has been tested locally on various WebOS devices

Author: michielvandergeest

src/core/lib/ImageWorker.ts

@@ -73,7 +73,8 @@ function createImageWorker() {
       xhr.responseType = 'blob';
 
       xhr.onload = function () {
-        if (xhr.status !== 200) {
+        // On most devices like WebOS and Tizen, the file protocol returns 0 while http(s) protocol returns 200
+        if (xhr.status !== 200 && xhr.status !== 0) {
           return reject(new Error('Failed to load image: ' + xhr.statusText));
         }
 

src/core/text-rendering/font-face-types/SdfTrFontFace/SdfTrFontFace.ts

@@ -27,6 +27,7 @@ import {
   type NormalizedFontMetrics,
   type TrFontFaceOptions,
 } from '../TrFontFace.js';
+import { fetchJson } from '../utils.js';
 import type { FontShaper } from './internal/FontShaper.js';
 import { SdfFontShaper, type SdfFontData } from './internal/SdfFontShaper.js';
 
@@ -62,9 +63,9 @@ export class SdfTrFontFace<
    * in SDF/vertex units.
    */
   public readonly maxCharHeight: number = 0;
-  public readonly data: SdfFontData | undefined;
   public readonly shaper: FontShaper | undefined;
   public readonly glyphMap: Map<number, SdfFontData['chars'][0]> = new Map();
+  public data: SdfFontData | undefined;
 
   constructor(type: FontTypeT, options: SdfTrFontFaceOptions) {
     super(options);
@@ -103,10 +104,9 @@ export class SdfTrFontFace<
     });
 
     // Set this.data to the fetched data from dataUrl
-    fetch(atlasDataUrl)
-      .then(async (response) => {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-        (this.data as SdfFontData) = await response.json();
+    fetchJson(atlasDataUrl)
+      .then((response) => {
+        this.data = JSON.parse(response as unknown as string) as SdfFontData;
         assertTruthy(this.data);
         // Add all the glyphs to the glyph map
 

src/core/text-rendering/font-face-types/utils.ts

@@ -0,0 +1,39 @@
+/*
+ * If not stated otherwise in this file or this component's LICENSE file the
+ * following copyright and licenses apply:
+ *
+ * Copyright 2020 Metrological
+ *
+ * Licensed under the Apache License, Version 2.0 (the License);
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export function fetchJson(
+  url: string,
+  responseType: XMLHttpRequestResponseType = '',
+): Promise<unknown> {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.responseType = responseType;
+    xhr.onreadystatechange = function () {
+      if (xhr.readyState == XMLHttpRequest.DONE) {
+        // On most devices like WebOS and Tizen, the file protocol returns 0 while http(s) protocol returns 200
+        if (xhr.status === 0 || xhr.status === 200) {
+          resolve(xhr.response);
+        } else {
+          reject(xhr.statusText);
+        }
+      }
+    };
+    xhr.open('GET', url, true);
+    xhr.send(null);
+  });
+}

src/core/textures/ImageTexture.ts

@@ -25,6 +25,7 @@ import {
 } from '../lib/textureCompression.js';
 import { convertUrlToAbsolute, isBase64Image } from '../lib/utils.js';
 import { isSvgImage, loadSvg } from '../lib/textureSvg.js';
+import { fetchJson } from '../text-rendering/font-face-types/utils.js';
 
 /**
  * Properties of the {@link ImageTexture}
@@ -220,7 +221,9 @@ export class ImageTexture extends Texture {
         );
       }
 
-      const blob = await fetch(src).then((response) => response.blob());
+      const blob = await fetchJson(src, 'blob').then(
+        (response) => response as Blob,
+      );
       return this.createImageBitmap(blob, premultiplyAlpha, sx, sy, sw, sh);
     }