Building native apps
Table of contents
Prepare
- download your project onto your local machine that you will use for building the native apps
Update your interkit.config
This file will determine which server your app uses to load itself - make sure it points to the right place.
Basic capacitor setup
Edit capacitor.config.json file with details for your project (name, identifier) or use init tool:
npx cap init
Android
If you used the starter, you must also manually change android/res/values/strings.xml
or /android/app/src/main/res/values/strings.xml
to update
- app_name
- title_activity_main to your App name
- package_name
- custom_url_scheme to your app identifier (e.g. interkit.app.starter. This is usually like a web domain written in inverse direction - com.companyname.projectname - You can make this up yourself)
In addition, change the app identifier in the following files
/android/app/build.gradle
/android/app/src/main/AndroidManifest.xml
/android/app/src/main/java/interkit/app/starter/MainActivity.java
> and rename this path to fit your app identifier AND change the app identifier insideMainActivity.java
Warning: changing the app identifier will currently only work if you also replace the google-services.json
with info from firebase (see push setup dedicated guide )
iOS
Change the display name and bundle in xcode (click App in the tree on the left)
Updating the app
Build the app bundle in /public
npm run build
Update the native projects with the current bundle from /public
npx cap sync
Open a native project with native dev tools (use these to build)
npx cap open ios
npx cap open android
Warning: while developing, make sure you’ve set the version in your interkit.config.json to lower than the one on the server, otherwise the app will load the newer bundle from the server.
Icons and Splashscreen
replace the icon and splash screen files in the /resources
directory (assuming you used starter to build you project) - make sure you use the exact same sizes
note: for android you also manually need to replace the android/icon-foreground.png
and android/icon-background.png
for some fancy android icon effect.
install cordova-res
npm install -g cordova-res
run these commands to copy them into the native projects
cordova-res ios --skip-config --copy
cordova-res android --skip-config --copy
they should be included in your next build with the native dev tools
see also: https://github.com/ionic-team/capacitor-assets/tree/cordova-res
Using live reload
interkit comes with a system that allows a native app to download newer versions of a javascript bundle if it is available on the server.
- change the version in your
interkit.config
on the server - on startup, the app checks if the version on the server is newer and downloads this
Publish to the app stores
you’ll need screenshots - these are easiest to make with iphone and ipad simulators.
- 5.5 inch -> use iphone 8plus simulator
- 6.5 inch -> use iphone 11 pro max simulator (1242x2688 2688x1242 1284x2778 2778x1284)
- 12.9 inch -> use ipad pro simulator
Important: make sure you set a clear description of what you want to use the location data for in plist.info
NSLocationWhenInUseUsageDescription - see https://developer.apple.com/design/human-interface-guidelines/patterns/accessing-private-data
Important: If you want to use push messages, please go through Push Setup Guide
iOS
- In Xcode, select Any iOS Device as the deployment target.
- Choose Product from the top menu and click on Archive.
- The Xcode Organizer will launch, displaying any archives you’ve created in the past.
- Make sure the current build is selected and click on Distribute App and follow the prompts with the default options
- after you upload and select the build in App Store Connect - you will get 2 scary looking questions about encryption. If you are just using https, we’ve been selecting Yes to both questions.
Additional info here: https://developer.apple.com/ios/submit/
Android
Make sure you are using our fork of the cordova zip plugin - it prevents a “zip traversal vulnerability” that google detects during submission. Your package.json should contain
"cordova-plugin-zip": "github:bikubi/cordova-plugin-zip#a3855dfcd3baa9ff619a12dd08d3bbce57475a3e",
In Android Studio, you will also need to add android:exported=“true” to the application>activity node in App/AndroidManifest.xml
and android:exported=“false” to capacitor-android/manifests/AndroidManifest.xml
to the service node with the intent-filter:
<service android:name="com.getcapacitor.CapacitorFirebaseMessagingService" android:stopWithTask="false" android:exported="false">
<intent-filter>
https://github.com/ionic-team/capacitor/pull/5350/files
You might have to change the targetSdkVersion located in android/variables.gradle
(currently 31 is minimum for google play submissions).
If you have deleted and recreated the android
folder npx cap add android
, you need to add 2 lines to the MainActivity of your app in order for live reload to work. The MainActivity file is located at android/app/src/main/java/interkit/app/starter/MainActivity.java
(or hoewver you changed the app name and path)
- add
import com.getcapacitor.plugin.http.Http;
as a new line below the otherimport
statements - add
add(Http.class);
like in this example:this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{ // Additional plugins you've installed go here // Ex: add(TotallyAwesomePlugin.class); add(Http.class); }});
Build > Generate Signed Bundle/APK. You’ll need to create a new key store in that same dialogue. Follow this guide for more information: https://developer.android.com/studio/publish/app-signing#sign_release
After the build, locate you app bundle, create a release in Google Play Console and upload it there.
When you need to update your app, change the versionCode and versionName in build.gradle (module android.app).