fix: resolve issues with fetching local assets when serving files from the file protocol

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);
     }