Calling a Https Api, on App start up

Ionic Framework
1

Hi All

Should there be a delay or correct process when calling an HTTP API after an Ionic 7 App starts up?

I am experiencing small issue, and want to rule our its on App side first.

2

You’ll need to provide more info.

  • How are you calling the API? Are you using fetch, XMLHttpRequest or CapacitorHttp?
  • Are you using a JS framework?
  • Where are you making this HTTP request?
  • What is the “small issue”?
3

@twestrick,

This is an example of what I am using:

HTTP_POST_RF_DEVICE_DATA_DATA(name, description): Observable<any>      //pc
{
  var datatx = {
    accountid: this.accountid,
    tokenid: this.tokenid,
    deviceid: this.node_selected,
    rfid: this.rf_node_selected,
    name: name,
    description: description
  }
  var Gateway_Data_api = 'https://testApi.net/api/RF_device_updates';
  return this.http.post(Gateway_Data_api, datatx, {
    headers: new HttpHeaders().set('ZUMO-API-VERSION', '2.0.0').set('x-functions-key', this.app_key)
  });
}

The issue I am having is that sometimes when the app starts, it takes a longer time to access the API. I do not think it’s a server cold start issue, but something in the app or mobile device is causing the delay.

When I start the app, it first goes to my homepage, where the user is authenticated. Once successful, it accesses another API to download some device information, and that is where I am experiencing the delay. Is there a way I can debug this to identify the real cause?

4

You can look at DevTools for the app running on the device. For Android, in Chrome go to chrome://inspect/#devices. For iOS, see xcode - How do I open developer tools on iOS Simulator? - Stack Overflow.

You say it is after the app is running and the homepage is loaded. That seems to me to point to the slowness being on the API side.

Are you using CapacitorHttp? Having it intercept requests adds an additional layer and thus more time. I would only recommend using it if absolutely required.

5

@twestrick
I am not using CapacitorHttp, but I think this. HTTP.post is JS angular library if I am correct.

6

Ok, just wanted to make sure as even though you are using Angular’s HTTP’s methods/library, you could have enabled CapacitorHttp in your capacitor.config.ts and it would be intercepting calls behind the scenes.

Check DevTools as I mentioned to see if you can narrow down the slowness.

7

Yes i am looking to check using that method, but its one of those issue that i need to wait for it arise.

This is my config file

{
  "appId": "---",
  "appName": "--",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    }
  },
  "cordova": {
    "preferences": {
      "ScrollEnabled": "false",
      "android-minSdkVersion": "19",
      "BackupWebStorage": "none",
      "SplashMaintainAspectRatio": "true",
      "FadeSplashScreenDuration": "300",
      "SplashShowOnlyFirstTime": "false",
      "SplashScreen": "screen",
      "SplashScreenDelay": "3000",
      "WKWebViewOnly": "true"
    }
  },
  "ios": {
    "contentInset": "always"
  }
}```