Cordova for cross-platform web app

Build App for Web and Android

  • creation step
    1. under your dev projects folder, create app folder by
      cordova create MyApp com.MyCom.MyApp MyApp<code>
            - the whole web content is under ./www/ folder
          - add target platform <code>cordova platform add web
      cordova platform add android
      // web
      cordova platform add browser@5.0.1
      // check platform by
      cordova platform ls
      // check requirement by
      cordova requirements
      // test run on browser
      cordova run browser
    2. build
      //build all
      cordova build
      // build android
      cordova build android
      // build android release insteal debug apk
      cordova build android --release
    3. run
      cordova run
    4. just usb to put the apk on your android device, use file manager to open the apk and install, So Simple

Build App for iOS

  • you need:
    • Mac OS X w admin login
    • Xcode
  • step to get demo run:
    1. install node.js for mac (for mac, recommend get everything as latest, that is how Apple does), then
      sudo npm install -g cordova
    2. install related addition tool
      xcode-select --install
      sudo npm install -g ios-deploy
      // note, if you fail above, you may need type based on error msg: sudo npm install -g ios-deploy --unsafe-perm=true
    3. to make sure you got all you need
      cordova requirements
      // most likely it will ask you to install pod, here is command, and it take a while
      sudo gem install cocoapods
      pod setup
    4. create project in home directory, since Mac secure / root directory
      cd ~
      mkdir nodeProj;cd nodeProj
      cordova create HelloApp com.HelloCom.HelloApp HelloApp
      cd HelloApp
      cordova platform add ios
      cordova build ios
    5. if you want to run or compile for ipa
      // run in emulator
      cordova emulate ios
      // compile for device will error signing required, you may need addition workaround if you dont have paid developer account from apple
      cordova build ios --device
      
      // if you want to do simply, open the project with Xcode, the top left UI take you choice on deploy device drop list and real device list,
      // of course, if you have Apple ID (not necessarily paid program account), if you select top App name in left hierarchy view panel, you can use personal account (Team as Personal Team) to create a free-6-day deloy cert in code signing section
      open ./platforms/ios/YourAppName.xcworkspace/

Note

Update iOS from main cordova project

  • code
    cordova platform rm ios
    cordova platform add ios

Put ipa on iOS Device

  • The most painful part of all development process, you better pay the 99USD apple program to save as much trouble as possible, since so many certificates and sign work required. If you seriously want to do iOS app, pay first to save the time.

Function and Features

  • in app browser function
    cordova plugin add cordova-plugin-inappbrowser
  • to make it work, it need to
      • then, add your site link to allow inside platform name=“ios” tag inside config.xml
        <allow-navigation href="http://*.yoursite.com/*" />
    • add allow unsafe connection like this “'unsafe-inline'” right behind “gstatic” inside index.html
      inside 
      <meta http-equiv="Content-Security-Policy" 
      make it something like this
      https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; 
    • also make your link in html like this
      <a href="#" onclick="cordova.InAppBrowser.open('http://yoursite.com/test.html', '_self', 'toolbar=no');" >Go</a>

Addition Resource

Generate Icons and Screen for platforms