devwiki:cordova

Differences

This shows you the differences between two versions of the page.


devwiki:cordova [2021/08/28 07:42] (current) – created ying
Line 1: Line 1:
 +====== Cordova for cross-platform web app ======
 +
 +  * pre-install
 +    * android studio (https://developer.android.com/studio/)
 +    * jdk 8, as jdk10 not working with Cordova for some reason, cause "Android target not installed" for cmd "cordova requirements"
 +      * (Java SE 8u https://www.oracle.com/technetwork/java/javase/downloads/index.html)
 +      * set env variable: JAVA_HOME: /path_to_your/jdk1.8.0_xxx
 +
 +  * install
 +    - install node.js v8 LTS: https://nodejs.org/en/
 +    - install cordova <code>npm install -g cordova</code>
 +
 +====== Build App for Web and Android ======
 +
 +  * ref:
 +    * https://cordova.apache.org/docs/en/latest/guide/cli/
 +
 +  * creation step
 +    - under your dev projects folder, create app folder by <code>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
 +</code>
 +    - build <code>//build all
 +cordova build
 +// build android
 +cordova build android
 +// build android release insteal debug apk
 +cordova build android --release
 +</code>
 +    - run <code>cordova run</code>
 +    - 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:
 +    - install node.js for mac (for mac, recommend get everything as latest, that is how Apple does), then <code>sudo npm install -g cordova</code>
 +    - install related addition tool <code>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
 +</code>
 +    - to make sure you got all you need <code>
 +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
 +</code>
 +    - create project in home directory, since Mac secure / root directory <code>cd ~
 +mkdir nodeProj;cd nodeProj
 +cordova create HelloApp com.HelloCom.HelloApp HelloApp
 +cd HelloApp
 +cordova platform add ios
 +cordova build ios
 +</code>
 +    - if you want to run or compile for ipa <code>
 +// 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/
 +</code>
 +
 +
 +
 +**Note**
 +  * in the build folder, you may find the result app is a .app file, not a ipa (which is actually a zip of .app)
 +    * you need to hack a way to convert if without paid developer account, ref:
 +      * https://stackoverflow.com/questions/43094380/whats-the-replacement-for-xcodes-packageapplication
 +      * https://stackoverflow.com/questions/24061063/how-can-i-deploy-create-ipa-iphone-app-using-cordova-build-ios-release
 +      * https://medium.com/m%CE%BBgn%CE%BEt%CE%BBr/how-to-export-a-ipa-file-from-xcode-without-a-dev-account-bac8b2645ad3
 +      * https://stackoverflow.com/questions/25396299/generating-an-unsigned-ipa-ios-application
 +  * if you want to put ipa into your ipad without paid developer account, you can but only last for 7 days, refer to: 
 +    * https://www.shoutpedia.com/use-cydia-impactor-install-ipa-apps-iphone-without-jailbreak/
 +    * iOS signing: http://docs.phonegap.com/phonegap-build/signing/ios/
 +
 +
 +**Update iOS from main cordova project**
 +  * code <code>cordova platform rm ios
 +cordova platform add ios
 +</code>
 +====== 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.
 +
 +  * when you need to put ipa into other people's iOS device before upload to App Store, check this doc, I use the Apple Configurator 2 (free from Mac App Store) method
 +    * https://docs.monaca.io/en/products_guide/monaca_ide/deploy/non_market_deploy/
 +
 +====== Function and Features ======
 +
 +  * in app browser function <code>cordova plugin add cordova-plugin-inappbrowser</code>
 +  * to make it work, it need to
 +    * add white list plugin: https://github.com/apache/cordova-plugin-whitelist
 +      * then, add your site link to allow inside platform name="ios" tag inside config.xml<code><allow-navigation href="http://*.yoursite.com/*" /></code>
 +    * add allow unsafe connection like this "'unsafe-inline'" right behind "gstatic" inside index.html <code>inside 
 +<meta http-equiv="Content-Security-Policy" 
 +make it something like this
 +https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; </code> 
 +    * also make your link in html like this <code><a href="#" onclick="cordova.InAppBrowser.open('http://yoursite.com/test.html', '_self', 'toolbar=no');" >Go</a></code>
 +      * more option refer to inappbrowser plugin page: https://cordova.apache.org/docs/en/3.1.0/cordova/inappbrowser/window.open.html
 +====== Addition Resource ======
 +
 +**Generate Icons and Screen for platforms**
 +  * online tool: https://pgicons.abiro.com/
 +    - use it to generate icons, and put them into ./res folder, also update the config.xml file in the description provided in the page.
 +  * another npm tool use imagemagick: https://www.npmjs.com/package/cordova-icon