APK Expansion File

How to get your APK below 100MB with lossless image compression and/or APK expansion files using Ionic 2

 

Before you use an APK expansion file, try TinyPng.com first

The tinypng.com site offers lossless image compression for free. Sometimes, trimming some unnoticeable bytes off of your image assets can save just enough space to get your apk under 100MB, the current limit for Google Playstore submissions. If this doesn’t do the trick, then you can give APK expansion files a shot, which I’ll explain below.

 

LET’S GET STARTED

For this walkthrough, we’re going to use the XAPKReader cordova plugin  by agamemnus. Make sure you read the readme on the master branch.

Requirements

 

NOTE: You will have to release an update to the Google Playstore in order to test this apk expansion file feature fully. After the initially production release, you can submit updates as alpha, beta, and/or production releases to continue testing.

 

 1. Create an Ionic 2 app (skip this step if you already have one)

1.1 Through the command prompt/terminal, navigate to an empty directory and run this ionic cli command: 

 

1.2 Navigate into the newApp directory and run the following commands:

 

2. Install the XAPKReader plugin

2.1 In the root of your project folder, run 

(You may have to install a different version of the xapkreader plugin depending on the cordova cli you’re running. To learn more, check out the readme in the master branch (https://github.com/agamemnus/cordova-plugin-xapkreader/tree/master).

 

2.2 Add this meta tag to the index.html file in the root of your project:

 

2.3 In the config.xml located in the root of your project folder, look for a variable tag with a name attribute defined as XAPK_EXPANSION_AUTHORITY and change its value attribute to the bundle ID for your app. You’ll also want to change the XAPK_AUTO_DOWNLOAD variable to false if you’re using the cordova-plugin-splashscreen plugin.

You’ll need to do the same thing in the plugins/com.flyingsoftgames.xapkreader/plugin.xml file.

 

3. Insert the Google Play License key into your Ionic 2 app. 

3.1 If you’re not sure where to find it, click here.

3.2 Paste the license key as the value for the XAPK_PUBLIC_KEY variable listed in the config.xml file and the plugins/com.flyingsoftware.xapkreader/plugin.xml file.

 

4. Create an APK Expansion File and Link your app to it.

4.1 After you find an adequate JPEG/PNG image, save it into a zip file. I’m going with a smiley face.

4.2 Afterwards, take the name of the image and use it to write an image tag into your app with the following naming convention for the image URL:

<img src="content://[APP_BUNDLE_ID]/[IMAGE_NAME]" />

For example, if the name of the image in my apk expansion file is smileyFace.jpg and my app’s bundle ID is com.sample.app123456, then the URL I’ll define to locate that image in my apk expansion file will be <img src="content://com.sample.app123456/smileyFace.jpg" />. I inserted a link to this image in my src/pages/home/home.html like so:

 

 

4.3 Take the image file you found and add it to a zip file.

4.4 Name the zip file main.[APP_VERSION_CODE].[BUNDLE_ID].obb (Example: my bundle ID is com.ci.apkTest2 and my version code is 1207, so my obb file will be named main.1207.com.ci.apktest2.obb).

 

5. Test the APK expansion file locally

You can skip this step if you want, but it’s recommended that you don’t because you won’t be able to test whether the apk expansion file works again until after you’ve submitted, released, and downloaded the app from the Google Playstore.

 

5.1 Download the ES File Explorer app onto your android device (I’m suggesting this app because the default file manager app for my android device didn’t do the job).

5.2 After you install and launch the ES File Explorer app, select the Device scope from its left menu.

 

5.3 Navigate to the sdcard/Android/obb directory (you can make the obb directory if it doesn’t exist).

5.4 Inside the obb directory, create another directory named after your app’s bundle ID.

5.5 Return to your ionic project, take the obb file you generated, and save it to the sdcard/Android/obb/<app bundle ID> directory (I’m using Android File Transfer for this step).

 

5.6 install a test build on your device by running ionic run android -d

If all went well, you should be able to navigate to the image URL you inserted in your app.

 

6. Test your APK expansion file remotely through the Google Playstore

We’re now going to package and upload a distribution apk to the Google Playstore and include the APK expansion file as an attachment.

 

6.1 (You can skip this step if you’re not using the cordova-plugin-splashscreen plugin) Add some logic to download your APK expansion file. Place this code snippet in your app and have it execute after the splash screen has been hidden.

I prefer to place this code in the constructor of my app.component.ts file after calling splashScreen.hide().

 

6.2 (You can skip this step if you’re not using the cordova-plugin-splashscreen plugin) Make sure you’ve turn the auto-download feature off for your APK expansion file by setting the XAPK_AUTO_DOWNLOAD variable to false in the plugins/com.flyingsoftgames.xapkreader/plugin.xml file and the config.xml file in the root of your project.

 

6.3 Generate and sign your distribution build with the proper keystore.

6.4 Upload your APK to the Google Playstore, but don’t close the APK upload modal.

6.5 At the bottom of the APK upload modal, you’ll notice a drop-down list labeled Use expansion file (This will only appear if the APK you’re submitting is for an update)

 

 

6.6 Hit the APK expansion file drop-down list, choose the New Expansion File option, select the zip file that contains your image, and click the Open button in the bottom right of the file selection dialog.

 

 

6.7 At this point, your APK and its associated expansion file have been uploaded. You can now submit your draft and proceed with the app release process as usual.

 

And that’s it. After an hour or so, your new build should be available for download. When you download it to your device and launch it, the APK expansion file will be downloaded along with it, and your image should be accessible through the app. When the APK download process triggers will depend on whether or not you’ve enable the auto-download feature of the XAPKReader plugin. If you’d like to learn more about APK expansion files, you can check out this article in the Android APK documentation. https://developer.android.com/google/play/expansion-files.html