in confi" /> in confi" /> in confi"/>

TechQA.

Cordova - Load External URL content in app takes too much time

1.1k views Asked by At

I have one cordova app that loads content directly from client website.I have used it like <content src="https://example.com/ios/index.html"> in config.xml file.I have used the splashscreen delay of 6 seconds.and the issue is when the splash screen hides shows the black screen for 5-10 seconds and after that client website content is shown.and also sometimes i am getting the error CONNECTION TO SERVER WAS UNSUCCESSFULL.I have also specified <preference name="loadUrlTimeoutValue" value="700000" /> but still having same issue.Anyone having the same issue for cordova ios and android app?can anyone help me with this issue.

android ios cordova web external-url
Original Q&A
1

There are 1 answers

0
Bastien Bastien On

You shouldn't do it like that. Now I don't want to play this script where you ask A and I tell you to do B, don't worry, but it's really not the way you should do it.

You should make cordova load an index.html which loads a javascript file cordova.js. You don't need to actually have it, the js file will be included when you compile the app.

Then you should add the whitelist plugin in case you don't already it, in order for your website to load correctly. https://www.npmjs.com/package/cordova-plugin-whitelist

You should disable auto-hide for the splashscreen in config.xml like so:

<preference name="AutoHideSplashScreen" value="false" />

You should then make the javascript load a fullscreen iframe with your website like so, then detect when loading has finished: (This should go into your index.html, in the cordova app)

<html>
    <head>
        <title></title>
    </head>
    <body>
        <iframe id='frameid' onload='iframeLoaded();' src='https://mywebsite.com/mypage.html' style='border: 0; width: 100%; height: 100%'>Your browser doesn't support iFrames.</iframe>
        <script src='cordova.js'></script>
        <script>
             iframe = document.getElementById("frameid");
             
            iframe = document.getElementById("frameid");
            
            function ready(callback){
                // in case the document is already rendered
                if (iframe.readyState!='loading') callback();
                // modern browsers
                else if (iframe.addEventListener) iframe.addEventListener('DOMContentLoaded', callback);
                // IE <= 8
                else document.attachEvent('onreadystatechange', function(){
                    if (iframe.readyState=='complete') callback();
                });
            }
            
            ready(function(){
               setTimeout(function(){
                 navigator.splashscreen.hide();
               },555)
            });
             
      
      
        </script>
    </body>
</html>

I haven't used cordova for a few months but that's how I did it if I didn't forget anything - Hoping I didn't... I didn't have time to test this, but you get the gist:

  • App start
  • Show Splashscreen
  • Load Index.html with Iframe in fullscreen pointing to https website.
  • Wait for iframe to finish loading.
  • Close splashscreen

Tell me if you run into any issue and I can help you further.

Related Questions in ANDROID

Related Questions in IOS

Related Questions in CORDOVA

Related Questions in WEB

Related Questions in EXTERNAL-URL

Popular Questions

Trending Questions