Local Network URL can´t be acessed when building App

Capacitor
1

Hello,

When I run my Ionic application in the browser, everything works flawlessly. I can make POST and GET requests to my local Raspberry Pi without any issues. However, when I attempt to convert my app into a real application for deployment, the connection to my Raspberry Pi fails to work. How can I enable this connectivity?

In the browser environment, my application communicates with the Raspberry Pi smoothly, indicating that the basic network configuration and interfaces are correctly set up. This includes both sending data to the Raspberry Pi and receiving data from it. The challenge arises when I try to take the next step: converting my Ionic application into a native application that can be installed on a smartphone or tablet. At this stage, the previously functional network connection to the Raspberry Pi seems to break down.

I’m looking for solutions or best practices that could help me overcome these connectivity issues. Specifically, I’m interested in whether there are any specific settings or configurations that need to be adjusted to enable communication between the native application and the Raspberry Pi. The goal is to establish a smooth and stable connection that allows my application to interact with the Raspberry Pi as a native app just as it does in the browser. How can I achieve this?

2

are you using http urls?
http is blocked by default since Android 9, if that’s the case you should probably be seeing “cleartext not permitted” or a similar message.

if you are using https, are the certificates properly configured?
Android devices are very sensitive to misconfigured certificates and self signed certificates don’t work at all.

3

If you want to allow “cleartext” (non-HTTPS) as @julio-ionic mentions, see my solution here - Unable to carryout HTTP post on Android - #2 by twestrick

1 Like
4

My capacitor.config.ts File only look like this:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'io.ionic.starter',
  appName: 'smart-home-app',
  webDir: 'www',
  server: {
    androidScheme: 'https'
  }
};

export default config;

I am using Capacitor and not Cordova

Also i dont have the XML in res/xml/network_security_config.xml

5

that doesn’t answer any of the questions, how does the url to your raspberry pi server looks like?

6

http://192.168.10.26:2888/

7

I dont have any certificate installed

8

then, as I said, http connections are blocked by default since Android 9, you have to check twestrick answer to see how to allow certain urls, or just allow all http connections like this ionic framework - There was an error with the request: Cleartext HTTP traffic to localhost not permitted - Stack Overflow

2 Likes
9

I added this in the Android Manifest

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:networkSecurityConfig="@xml/network_security_config"
        android:theme="@style/AppTheme">

And this is my network_security_config:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
  <domain-config cleartextTrafficPermitted="true">
    <domain>http://192.168.10.26:2888</domain>
  </domain-config>
</network-security-config>

But it does not work for me, why?

Error as descibed: 2024-02-12 13:58:22.539 11521-11521 Capacitor io.ionic.starter V callback: 123357475, pluginId: App, methodName: addListener, methodData: {"eventName":"backButton"} 2024-02-12 13:58:25.853 11521-11521 Capacitor/Console io.ionic.starter E File: https://localhost/polyfills.cf419aa12150fa3f.js - Line 1 - Msg: Mixed Content: The page at 'https://localhost/home' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://192.168.10.26:2888/api/services/remote/send_command'. This request has been blocked; the content must be served over HTTPS. 2024-02-12 13:58:25.860 11521-11521 Capacitor/Console io.ionic.starter E File: https://localhost/6260.e967a105d23dc7f2.js - Line 1 - Msg: Fehler bei der Anfrage Key Command: [object Object] 2024-02-12 13:58:26.820 11521-11655 ProfileInstaller io.ionic.starter D Installing profile for io.ionic.starter

10

This should be:

<domain>192.168.10.26</domain>
1 Like
11

I changed it, but it does not work. My app gets this error:
024-02-12 13:58:22.539 11521-11521 Capacitor io.ionic.starter V callback: 123357475, pluginId: App, methodName: addListener, methodData: {"eventName":"backButton"} 2024-02-12 13:58:25.853 11521-11521 Capacitor/Console io.ionic.starter E File: https://localhost/polyfills.cf419aa12150fa3f.js - Line 1 - Msg: Mixed Content: The page at 'https://localhost/home' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://192.168.10.26:2888/api/services/remote/send_command'. This request has been blocked; the content must be served over HTTPS. 2024-02-12 13:58:25.860 11521-11521 Capacitor/Console io.ionic.starter E File: https://localhost/6260.e967a105d23dc7f2.js - Line 1 - Msg: Fehler bei der Anfrage Key Command: [object Object] 2024-02-12 13:58:26.820 11521-11655 ProfileInstaller io.ionic.starter D Installing profile for io.ionic.starter

12

Search for mixed content on the capacitor config

13

added, rebuild android - but the problem is the same…

15

I added all those things, but error is the same:

image
image1772×113 30.7 KB

16

Yesterday you said you got it working, now you say “error is the same”, but the image doesn’t show a mixed content error, which is what you got yesterday, so not the same error.
That looks like a javascript message with an object which logcat can’t show, you should check the actual message in chrome web inspector (put this url in your desktop chrome and select the device or emulator where you are testing chrome://inspect/#devices)

17

image
image2059×1256 487 KB

18

check my first answer about https urls and certificates

19

Yes it is a http url. Actually i should find a Workaround to get it working, I don´t want to publish the app in the store, so this is only for my device.

I tested all those answears what you and @twestrick wrote, but actually no one is working. You can find my repo at GitHub - mark-baumann/smart-home-app there you can see that I made capacitor config and the config at networking xml, but nothing works.

20

The screenshot shows a https url, not a http url, and shows a certificate error. As I told you, self signed certificates don’t work on Android.

21

Have you tried setting androidScheme to http? It also looks like allowMixedContent is in the incorrect spot. It should be under android.

I would try this config:

import { CapacitorConfig } from '@capacitor/cli';
import { CapacitorHttp, HttpResponse } from '@capacitor/core';

const config: CapacitorConfig = {
  appId: 'io.ionic.starter',
  appName: 'smart-home-app',
  webDir: 'www',
  server: {
    androidScheme: 'http',
    cleartext: true,
  },
  android: {
    allowMixedContent: true 
  },
  plugins: {
    CapacitorHttp: {
      enabled: true
    },
  }
};

export default config;