Web SDK not working with Ionic applications when built as a mobile app with capacitor

[tatssato]

In kizuna, we are developing our application as a Progressive Web App through Ionic and now @nkgardose have been attempting to run the Kizuna web app code (Ionic React) as a hybrid mobile application through the use of capacitor. However, we have encountered problems with it which @guillemcordoba helped us debug as well. Here are what we know so far that I have shared with @alastairong.

Here's how we are creating the connection to Holo

import { HolochainClient, HoloClient } from “@holochain-open-dev/cell-client”;

const appId = (): string | undefined => {
  if (ENV === “HC” || ENV === “HCDEV”) {
    return “kizuna”;
  } else if (ENV === “HCC”) {
    return “uhCkkHSLbocQFSn5hKAVFc_L34ssLD52E37kq6Gw9O3vklQ3Jv7eL”;
  } else if (ENV === “HOLO”) {
    return undefined;
  }
};

const appUrl = () => {
  // for launcher
  if (ENV === “HC”) return `ws://localhost:8888`;
  else if (ENV === “HCDEV”) return process.env.REACT_APP_DNA_INTERFACE_URL;
  else if (ENV === “HCC”) return “http://localhost:24273”;
  else if (ENV === “HOLO”) return “https://chaperone.holo.host”;
  else return null;
};

const branding = {
    logo_url: "assets/icon/kizuna_logo.png",
    app_name: "Kizuna Messaging App",
    skip_registration: true,
};
​
const connection = new Connection(appUrl(), signalHandler, branding);
​
await connection.ready();
await connection.signIn();
​
const appInfo = await connection.appInfo(appId());
​
if (!appInfo.cell_data)
    throw new Error(`Holo appInfo() failed: ${JSON.stringify(appInfo)}`);
​
const cellData = appInfo.cell_data[0];
​
// TODO: remove this when chaperone is fixed
if (!(cellData.cell_id[0] instanceof Uint8Array)) {
    cellData.cell_id = [
        new Uint8Array((cellData.cell_id[0] as any).data),
        new Uint8Array((cellData.cell_id[1] as any).data),
    ] as any;
}
​
return new HoloClient(connection, cellData, branding);

Whenever we run the Kizuna app in a mobile simulator (iOS), we are getting an error in this particular code of web-sdk

  async connect() {
    try {
      console.log(`Chaperone URL: ${this.chaperone_url.href}`)
      console.log(`COMB: ${JSON.stringify(COMB)}`)
      this.child = await COMB.connect(this.chaperone_url.href, 60000, this.signalCb);
    } catch (err) {
      if (err.name === "TimeoutError")
        console.log("Chaperone did not load properly. Is it running?");
      throw err;
    }

the error log we are getting is this

2021-11-18 14:10:57.995288+0800 App[35286:1800122] KeyboardPlugin: resize mode - native
⚡️  Loading app at capacitor://localhost...
⚡️  [error] - {"line":2,"column":316387,"sourceURL":"capacitor://localhost/static/js/4.9f1bfd5f.chunk.js"}
⚡️  [log] - calling callZome
⚡️  [log] - Env: undefined
⚡️  [log] - App URL: http://localhost:24273
⚡️  [log] - Branding: {"logo_url":"assets/icon/kizuna_logo.png","app_name":"Kizuna Messaging App","skip_registration":true}
⚡️  [log] - Chaperone URL: http://localhost:24273/?logo_url=capacitor%3A%2F%2Flocalhost%2Fassets%2Ficon%2Fkizuna_logo.png&app_name=Kizuna+Messaging+App&skip_registration=true
⚡️  [log] - COMB: {}
⚡️  WebView loaded
⚡️  To Native ->  App addListener 128610980
⚡️  [log] - Chaperone did not load properly. Is it running?
⚡️  [error] - Index 0: TimeoutError
⚡️  [error] - Index 1: 60000
⚡️  [error] - Index 2: 2
⚡️  [error] - Index 3: 302451
⚡️  [error] - Index 4: capacitor://localhost/static/js/4.9f1bfd5f.chunk.js

We were getting an empty COMB object and digging deeper, we figured we were getting these errors which seems like a problem with capacitor + iframe and the Content Security Policy we also tried including an iframe in the ui and put the amazon url there and we're getting an error still

Hopefully this helps

Once we are done with other prioritized small features, we will try the suggestion given send message from parent window to child window via postmate and provide feedback on how that goes here as well.