By now in out Building a PWA vuejs app with wordpress API journey, we have a basic vuejs app which can fetch data from a WordPress API using axios and can display the data.
The aim of this Building a PWA vuejs app with wordpress API series, however is to build an app and get it on the app stores. To achieve this, we are going to use cordova. Cordova is a fantastic framework which allows you to package web apps and transform them into actual apps to run on devices.
Following this guide I made previously, we will set up our vuejs app to work with cordova: https://jonathansblog.co.uk/adding-cordova-to-an-existing-vue-app
npm install -g cordova
cd ~/git/my-cool-app
vue add cordovaNext, follow the cordova wizard (it will show when you do vue add cordova):
> Name of folder where cordova should be installed – src-cordova
> Select Platforms: Android, iOS, Browser
To run your new cordova app:
npm run cordova-serve-browser
(urls must be ‘hash’ ones, eg /my-homepage becomes /#/my-homepage)
Next, you can do all the building and testing, using these commands
npm run cordova-serve-android # Development Android
npm run cordova-build-android # Build Android
npm run cordova-serve-ios # Development IOS
npm run cordova-build-ios # Build IOS
npm run cordova-serve-browser # Development Browser
npm run cordova-build-browser # Build Browser
npm run cordova-prepare # prepare for build
Building a PWA vuejs app with wordpress API – Install android system – build android apps
https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html
- Install jdk8 (create account at oracle, verify email, login and download)
- Install gradle (brew install gradle – https://gradle.org/install/)
- Install android studio (and pick an skd – https://developer.android.com/studio/install)
- install android SDK (api level 28) – create a new project (a blank one) click on the sdk manager icon – top right (its not in tools > skd manager!)
- install android avd (api level 28) – create a new project (a blank one) click on the sdk manager icon – top right (its not in tools > avd manager!)
Once you have all this, you can emulate and build for the android platform
npm run cordova-build-android
sign:
jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore ~/git/my-cool-app/src-cordova/keys/my-release-key.keystore app.apk alias_name
zipalign:
find ~/Library/Android/sdk/build-tools -name "zipalign"~/Library/Android/sdk/build-tools/29.0.0/zipalign -v 4 Project1.apk Project1-aligned.apk
You can then use the apk for testing
To upload into google play store, you need to send an aab. You’ll need to open your code in android studio to do that build:
open android studio (add new project from existing source – your_project/src-cordova/platforms/android)
build > generate signed bundle (dont think this actually signs it though)
** have to upload aab format
https://github.com/apache/cordova-android/issues/610
Install ios system – build ios apps
- Install xcode
- npm run cordova-build-ios
- https://www.softwire.com/blog/2016/10/12/submitting-cordova-app-apple-app-store/index.html
- https://developer.apple.com/support/app-store-connect/
Install electron system – build electron apps
- install xcode
- brew install rpm
- cd src-cordova
- cordova platform add electron
- https://www.electron.build/
Sources:
https://github.com/m0dch3n/vue-cli-plugin-cordova
https://www.learningsomethingnew.com/vue-js-vue-cli-3-vuetify-cordova-nano-sql-building-a-cross-platform-app-with-a-local-sql-database-that-can-load-data-from-a-static-csv-file
https://www.softwire.com/blog/2016/10/12/submitting-cordova-app-apple-app-store/index.html
https://developer.apple.com/support/app-store-connect/
https://www.electron.build/
https://github.com/apache/cordova-android/issues/610
https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html