Maplibre ignores CapacitorHttp implementation

[Duoquote]

maplibre-gl-js version: 4.7.1

browser: Mozilla/5.0 (Linux; Android 13; SM-G780G Build/TP1A.220624.014; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/131.0.6778.135 Mobile Safari/537.36

Context: When using CapacitorJS, you can enabled so called CapacitorHttp plugin, which is something like a wrapper/override over XMLHttpRequest and Fetch apis. It patches and forwards these requests to internal handler on android/ios and executes requests internally, avoiding using WebView's http implementation. When requesting to an external source, the WebView as you can see blocks the requests because of CORS, there is really no easy way to get around this so by using CapacitorHttp you can avoid CORS.

Example request that goes through CapacitorHttp;

So it's something like a proxy within the app.

Example request using CapacitorHttp (source);

import { CapacitorHttp } from '@capacitor/core';

// Example of a GET request
const doGet = () => {
  const options = {
    url: 'https://example.com/my/api',
    headers: { 'X-Fake-Header': 'Fake-Value' },
    params: { size: 'XL' },
  };

  const response: HttpResponse = await CapacitorHttp.get(options);

  // or...
  // const response = await CapacitorHttp.request({ ...options, method: 'GET' })
};

// Example of a POST request. Note: data
// can be passed as a raw JS Object (must be JSON serializable)
const doPost = () => {
  const options = {
    url: 'https://example.com/my/api',
    headers: { 'X-Fake-Header': 'Fake-Value' },
    data: { foo: 'bar' },
  };

  const response: HttpResponse = await CapacitorHttp.post(options);

  // or...
  // const response = await CapacitorHttp.request({ ...options, method: 'POST' })
};

My main question is, can I in some way send requests through CapacitorHttp interface? I have seen there is transformRequest but that just really lets you modify only the headers, I am actually already using it to pass authorization header;

      gl_ = Leaflet.maplibreGL({
        style: `${host}/v4/maps/`,
        pane: "maplibre-gl",
        transformRequest: (url, resourceType) => {
          if (!url.startsWith(host)) return { url };

          return ["Tile", "Style"].includes(resourceType) ? {
            url,
            credentials: "include",
            headers: {
              "Authorization": `JWT ${token}`,
            },
          } : { url };
        },
      });

Also, why is CapacitorHttp's patch is not working on maplibre-gl?

[HarelM]

If capacitor doesn't psych correctly the fetch and xhr of the browser, then it's a question for capacitor, it might be related to cuddle running in worker thread if I needed to guess.
You can use addProtocol to overcome these issues I belive.

[Duoquote]

Yeah I also found about 30 minutes later that the issue is indeed in workers as Capacitor is not loading it's code into workers, I am trying some things and will let you know about the progress.

[Duoquote]

Okay I just tried some hack while writing this post, solution is at the bottom.

I have been tinkering with this for a while now, looks like I am stuck in a order of compatibility problems;

Packages;

• Vite.js
• Capacitor.js
• Maplibre-gl

Given this worker file (not working, just demonstration);

// import { CapacitorHttp } from "@capacitor/core";
// importScripts("/@capacitor/core");

var CapacitorHttp;
import("@capacitor/core").then(module => {
  CapacitorHttp = module.CapacitorHttp;
});

async function loadFn(params, abortController) {
  const urlNext = params.url.split("://")[1];
  const response = await CapacitorHttp.get({
    url: `${urlNext.startsWith("localhost") ? "http" : "https"}://${urlNext}`,
    headers: params.headers,
    params: params.params,
  })
  console.log("Worker", params, response);
  if (response.headers["content-type"] === "application/x-protobuf" && typeof response.data === "string") {
    // base64ToBlob(response.data, "application/x-protobuf");
    const bytes = new Uint8Array([...response.data].map(char => char.charCodeAt(0)));

    // Now create a Blob from these bytes:
    const blob = new Blob([bytes], { type: "application/x-protobuf" });
    return {
      data: await blob.arrayBuffer(),
    }
  }
  return response;
}

self.addProtocol("capacitor", loadFn);

Situation 1:

Using import workerUrl from "../workers/map-worker?worker&url" and importScriptInWorkers(new URL(workerUrl, import.meta.url).href) results in;

Which I need to run worker with type: module (which I can't) results in;

Imports look fine but it uses import statements obviously;

Situation 2:

With some hacky usage I tried (according to previous results);

importScriptInWorkers(new URL(workerUrl.replace("module", "classic"), import.meta.url).href)

But it's not really helping;

Uncaught (in promise) SyntaxError: Failed to execute 'importScripts' on 'WorkerGlobalScope': The URL '/@vite/env' is invalid.

Situation 3:

Vite docs mention that this specific syntax should import, but I can't use Worker object with importScriptInWorkers, maybe if I just try it works?

importScriptInWorkers(new URL("../workers/map-worker.js", import.meta.url));

This does not work, let's try using .href method;

importScriptInWorkers(new URL("../workers/map-worker.js", import.meta.url).href)

Okay it loads, but now, how do I import CapacitorHttp from @capacitor/core? Maybe if I just import it converts to what it's supposed to be? It doesn't.

Looks like solved?

Using import function by itself I was able to import the package. There is an error waiting for me but that's on capacitor side, I will just leave the post as is as if someone encounters same things at least there is a thought process they can follow.

Here is the final state of worker script;

var CapacitorHttp;
import("@capacitor/core").then(module => {
  CapacitorHttp = module.CapacitorHttp;
});

async function loadFn(params, abortController) {
  const urlNext = params.url.split("://")[1];
  const response = await CapacitorHttp.get({
    url: `${urlNext.startsWith("localhost") ? "http" : "https"}://${urlNext}`,
    headers: params.headers,
    params: params.params,
  })
  console.log("Worker", params, response);
  if (response.headers["content-type"] === "application/x-protobuf" && typeof response.data === "string") {
    // base64ToBlob(response.data, "application/x-protobuf");
    const bytes = new Uint8Array([...response.data].map(char => char.charCodeAt(0)));

    // Now create a Blob from these bytes:
    const blob = new Blob([bytes], { type: "application/x-protobuf" });
    return {
      data: await blob.arrayBuffer(),
    }
  }
  return response;
}

self.addProtocol("capacitor", loadFn);

And in my project;

import { importScriptInWorkers } from "maplibre-gl";

...
      gl_ = Leaflet.maplibreGL({
        style: `${host}/v4/maps/`,
        pane: "maplibre-gl",
        transformRequest: (url, resourceType) => {
          return ["Tile", "Style"].includes(resourceType) ? {
            // This is important;
            url: url.replace(/^https?/, "capacitor"),
            credentials: "include",
            headers: {
              "Authorization": `JWT ${token}`,
            },
          } : { url };
        },
      });
      
      importScriptInWorkers(new URL("../workers/map-worker.js", import.meta.url).href);

[HarelM]

I think this is the first time I saw someone achieving to use addProtocol in the worker context.
To be honest, when I wrote it I was not sure it will ever work :-) Kudos!

[Duoquote]

Is it possible to disable worker logic altogether? Or can I create my own tile loader and load vector tiles on map manually? I am experiencing lots of compatibility problem across sentry/maplibre-gl/vite/capacitor modules on mobile devices.

[Duoquote]

Maybe I can create a custom source by overriding loadTile function in;

maplibre-gl-js/src/source/vector_tile_source.ts

Line 191 in 47ed30d

async loadTile(tile: Tile): Promise<void> {

And using functions;

maplibre-gl-js/src/source/vector_tile_worker_source.ts

Line 95 in 8f1f5f7

async loadTile(params: WorkerTileParameters): Promise<WorkerTileResult | null> {

maplibre-gl-js/src/source/vector_tile_worker_source.ts

Line 67 in 8f1f5f7

async loadVectorTile(params: WorkerTileParameters, abortController: AbortController): Promise<LoadVectorTileResult> {

[HarelM]

Just use addProtocol on the main thread without using it in the worker thread.
Requests in the worker that use addPrtotocol are routed to the main thread and you can handle them there with capacitor "regularly".

[Duoquote]

Oh okay, I thought addProtocol was made for workers only

[Duoquote]

Finally got it working with this configuration;

      addProtocol("capacitor", async (params, abortController) => {
        const url = params.url.replace("capacitor://", params.ssl ? "https://" : "http://");
        if (deviceInfo.platform === "web") {
          return await axios({
            method: "GET",
            url,
            responseType: "arraybuffer",
          }).then(res => ({ data: res.data }));
        } else {
          return await CapacitorHttp.request({
            url,
            method: "GET",
            headers: params.headers,
          }).then(res => ({ data: Buffer.from(res.data, "base64").buffer }));
        }
      })

Thanks!