CODEWITHSUNDEEP
javascriptandroidioscordovacordova-plugins
Gdebrig
Gdebrig

Reputation: 203

What is the best configuration for webpage hosting with Cordova (ios & android)

I'm trying to deploy a Cordova project to put my website into an iOS & Android mobile app.

According to 2 tutorials (https://auth0.com/blog/converting-your-web-app-to-mobile/ & https://www.youtube.com/watch?v=LjIKElAP6_A), I had to edit index.html.

First tutorial config :

<!doctype html>
<html lang="en" data-framework="javascript">
  <head>
     <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
    <script type="text/javascript">
    function onBodyLoad()
    {
        document.addEventListener("deviceready", onDeviceReady, false);
        window.location.href = "https://www.website.com/";
    }
    function onDeviceReady()
    {
        // do your thing!
    }
    </script>
    <script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>

</head>
  <body onload="onBodyLoad()">
  </body>
</html>

Second tutorial config :

<!doctype html>
<html lang="en" data-framework="javascript">
  <head>
     <script>
  function onDeviceReady() {
    if (navigator.connection.type == Connection.NONE) {
      navigator.notification.alert('An internet connection is required to continue');
    } else {
      window.location="https://www.website.com";
    }
  }
  document.addEventListener("deviceready", onDeviceReady, false);
</script>

  </head>
  <body>
    <script src="node_modules/todomvc-common/base.js"></script>
    <script src="js/helpers.js"></script>
    <script src="js/store.js"></script>
    <script src="js/model.js"></script>
    <script src="js/template.js"></script>
    <script src="js/view.js"></script>
    <script src="js/controller.js"></script>
    <script src="js/app.js"></script>
  </body>
</html>

The second one is not working at all, but with the first config of index.html, the app opens with white screen and opens right after Safari or Chrome with the website in the url bar. But i'm looking for a real mobile app behaviour...

Somebody can help me with this and find a working config to obtain a mobile app behaviour ? Many thanks

Upvotes: 0

Views: 60

Answers (1)

tshele litabe
tshele litabe

Reputation: 136

there is an easiest way of converting a website to an IOS and Android using cordova. I am going to give you a guide line of how to do it easily without complications.(you must have cordova,Xcode and Android Studio) installed on your computer.

First step is to create a cordova project.

  • In terminal type sudo cordova create name of your app com.yourdomain.name of your app name of your app(replace 'name of your app with your real app's name' and 'your domain' with your website name)
  • After your project is created, in terminal type cd name of your app
  • Then in terminal type sudo cordova platform add iOS android then press enter
  • And when both your iOS and android projects have been created you should see 'build success' in your terminal'
  • Then type sudo cordova prepare

NEXT STEPS

  • The next step is to go to your files where your project is located on your computer i.e Development or Desktop where ever you saved it.
  • Open your project and go to 'www' file, where you get CSS index.html JS and so on. Delete all the files and replace them with your website files and save them.
  • Then go back to your terminal and type sudo cordova build
  • When your project has finished building you will get 'BUILD SUCCEEDED'. Then you have successfully converted your website to an iOS and Android apps.
  • Next step is to go to your project iOS directory and double click on xcworkspace file, will open your project in Xcode. Then you can run your app and customise Icons as you wish. You should see your app in your simulator.
  • Also with Android version follow the same procedure as iOS, open your android app in Android Studio and run it and customise Icons and so on too.
  • You can now continue with publishing guidelines of iOS App Store and Google Play if you wanna publish.
  • This project was built with a Mac computer, you can still build it with a windows computer too. It still works.

Upvotes: 1

Related Questions