Cordova android application refuses get data from remote source after downloading from playstore

Question

I have developed an app using

HTML, CSS, JAVASCRIPT

  <preference name="phonegap-version" value="cli-12.0.0" />
    <preference name="android-minSdkVersion" value="22" />
    <preference name="android-maxSdkVersion" value="34" />
    <preference name="android-targetSdkVersion" value="34" />

Remotely I have a Laravel application that is connected to a database and passes data from the Laravel application to the Cordova application.

the whole connection works when I test on a web browser and I can see the whole data passed into the app from the remote source.

When I compile, deploy and download the application from the Android Play Store, the remote data that showed earlier on the browser while testing does not show in the application.

This is what I am doing:

<script>
    // Initialize the carousel


    document.addEventListener('DOMContentLoaded', function () {
        // Define a function to fetch the HTML
        function fetchHTML() {
            const container = document.getElementById('ajax-container');
            
            // Hide the container with a fade-out effect
            $(container).fadeOut(500, function () {
                fetch('http://api.damekex.com/ajax-view')
                    .then(response => response.text())
                    .then(html => {
                        // Append the fetched HTML to the container element
                        container.innerHTML = html;
    
                        // Show the container with a fade-in effect
                        $(container).fadeIn(300, function () {
                            // Set up the progress bar animation after a delay
                            setTimeout(function () {
                                $('.hideonprogressbar').each(function () {
                                    var thisEl = $(this);
                                    var hidelment = "." + thisEl.attr('data-target');
                                    var widthprogress = 1;
    
                                    setInterval(function () {
                                        widthprogress++;
                                        if (widthprogress > 0 && widthprogress < 100) {
                                            thisEl.find('.progress-bar').css('width', widthprogress + "%");
                                        } else if (widthprogress === 100) {
                                            $(hidelment).fadeOut();
                                        }
                                    }, 550);
                                });
                            }, 1000);
                        });
                    })
                    .catch(error => {
                        console.error('Error fetching view:', error);
                    });
            });
        }
    
        // Fetch the HTML initially
        fetchHTML();
    
        // Set up an interval to fetch the HTML every 50 seconds
        setInterval(fetchHTML, 30000);
    });
    
  

</script>
  <script>
        function fetchmatch() {
            fetch('http://api.damekex.com/live')
                .then(response => response.text())
                .then(htmlContent => {
                    const container = document.getElementById('matches-container');
                    container.innerHTML = htmlContent;
                })
                .catch(error => {
                    console.error('Error fetching view:', error);
                });
        }

        // Fetch the HTML initially
        fetchmatch();

        // Set up an interval to fetch the HTML every 5 seconds
        setInterval(fetchmatch, 10000);
    </script>

in my config:

<allow-navigation href="*" />
<allow-navigation href="https://api.damekex.com/*" />
<allow-navigation href="https://code.jquery.com/*" />
<access origin="*" />
<access origin="https://api.damekex.com/*" />
<access origin="https://code.jquery.com/*" />
<allow-intent href="*" />

I also tried this

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; font-src * data:; img-src * data:; connect-src *;">

even after all these the data from remote sources doesn't show up on the application.

I have also tried displaying contents from an iframe using my remote source but it doesn't work.

The only thing that seems to work is when I use a hyperlink to access my remote source.

please help

Answer 1

Since Android 9 "clear text traffic" (traffic not encrypted by SSL/TLS) is disabled by default. If an app wants to use such connections you have to add a network security config file and allow it for the domain(s) you want to communicate with.

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">insecure.example.com</domain>
    </domain-config>
</network-security-config>

Network security configuration

In general plain http requests should only be used for development, the release app should always use https URLs. Consider to configure HTTPS for the used server.