IFRAME mobile website in Android & iOS App using Cordova

Mobile traffic is trend of day and every website is mobile optimized.Have you ever thought of having a mobile app for your website without doing any efforts? Yes its possible to IFRAME (WRAP) your responsive website in Android, iOS and Windows UWP app.
Requirements:

  1. NodeJs
  2. Cordova
  3. Text editor – Notepad++ or Atom
  4. Android SDK and Android SDK tools
  5. JDK and JRE

Method:

  1. Open Command Prompt and type
    cordova create MyApp
  2. Go to new  directory
    cd MyApp
  3. Add android platform by following command
    cordova platform add android
  4. Now open www/index.html in your text editor.
  5. Put following code in index.html
    <!DOCTYPE html>
    <html>
     <head>
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
     <link rel="stylesheet" type="text/css" href="css/index.css">
     <title>Hayer</title>
     </head>
     <body>
     <div id="conatiner" >
     <iframe src="http://hayer.in/" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>
     </div>
     <script type="text/javascript" src="cordova.js"></script> 
     <script type="text/javascript" src="jquery.min.js"></script>
     <script type="text/javascript" src="index.js"></script>
     <script>
     $(document).ready(function(){
     #("#conatiner").css('position','fixed');
     });
     </script>
     <style>
     #conatiner {
     position:absolute;
     top:0px;
     left:0px;
     margin:0px;
     padding:0px;
     height:100%;
     width:100%;
     overflow:hidden;}
     </style>
     </body>
    </html>
  6. Change http://hayer.in with your website.
  7. Put latest jQuery file in same folder (www).
  8. Now you can build your app using following command.
    cordova build android --release
  9. I will post a separate article on changing icons, splash screen of app, signing app and uploading to Playstore.