Mobile App Preparationedit
Before we dive in to the actual development, we need to do some preparation work. Here we will go over Android as the target platform.
First step is to make sure you got the Cordova CLI installed and the necessary SDKs.
$ npm install -g cordova
Add Android installation to your path:
Unix (macOS, linux)
export ANDROID_HOME="$HOME/Android/Sdk" PATH=$PATH:$ANDROID_HOME/tools; PATH=$PATH:$ANDROID_HOME/platform-tools
Please note that sometimes the
/Android/Sdkfolder is added inside
/Library/inside your user folder. Check your user folder and if the
/Android/folder is only inside
setx ANDROID_HOME "%USERPROFILE%\AppData\Local\Android\Sdk" setx path "%path%;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools"
Start Android studio by changing into the folder you installed it in and run
./studio.sh. Next step is to install the individual SDKs:
Open the “Configure” menu at the bottom of the window:
Select the desired SDKs. As per August 2018 Cordova supports 5.0 and up and click on “Apply” to install the SDKs.
2. Add Cordova Quasar Mode
In order to develop/build a Mobile app, we need to add the Cordova mode to our Quasar project. What this does is that it uses Cordova CLI to generate a Cordova project in
/src-cordova/www folder will be overwritten each time you build.
$ quasar mode add cordova
3. Add Platform
To switch to the cordova project, type:
$ cd src-cordova
To add a target platform, type:
$ cordova platform add [android|ios]
To verify that everything is in order, type:
$ cordova requirements
On some newer Debian-based operating systems you might face a very persistent problem when running
cordova requirements. Please see the “Android SDK not found” after installation section for assistance.
Switching to iOS WkWebView
Switching to WKWebView is highly recommended (but optional!) as UIWebView has been deprecated in iOS 12.0 as described in this Cordova blog post: https://cordova.apache.org/news/2018/08/01/future-cordova-ios-webview.htmllaunch.
However, choose wisely if you want to replace the default webview. Each comes with its own caveats. Make sure that you visit the link above.
Option 1: Ionic Webview Plugin
- Install Ionic Webview Plugin
# from /src-cordova $ cordova plugin add cordova-plugin-ionic-webview
- Add ScrollEnabled Preference to Config.xml
<platform name="ios"> <preference name="ScrollEnabled" value="true" /> </platform>
- Consult Ionic Docs for caveats on WkWebViewPlugin
Option 2: Cordova WkWebviewEngine Plugin
- Install Cordova WkWebviewEngine Plugin
# from /src-cordova $ cordova plugin add cordova-plugin-wkwebview-engine
- For caveats and more info, visit: https://github.com/apache/cordova-plugin-wkwebview-enginelaunch
4. Start Developing
If you want to jump right in and start developing, you can skip step #2 and #3 commands and issue:
$ quasar dev -m cordova -T [android|ios]
This will add Cordova mode and project automatically, if it is missing.