Appflow live update, can't make it work

Hi,

Live update are not working on my side.
The core is developed with reactjs, built with webpack
What i did :

  • Add the Appflow SDK, the strings.xml is now modified
  • commit & push
  • Build the native .apk from Appflow GUI
  • Install the .apk on my device
  • Change one string in the code
  • Commit
  • Build a Web Deploy and assign it to the Production Channel
  • As the update method is “auto” i close the app, relaunch it, but the modified string is not updated

Any suggestion on what i could missed ?

Thanks

strings.xml

<resources>
  <string name="ionic_app_id">XXXXXXXXX</string>
  <string name="ionic_channel_name">Production</string>
  <string name="ionic_update_method">auto</string>
</resources>

ionic info

[11:35:24]: $ ionic info
[11:35:25]: ▸ Ionic:
[11:35:25]: ▸ Ionic CLI       : 6.2.2 (/usr/local/nvm/versions/node/v10.19.0/lib/node_modules/@ionic/cli)
[11:35:25]: ▸ Ionic Framework : @ionic/react 5.0.5
[11:35:25]: ▸ Capacitor:
[11:35:25]: ▸ Capacitor CLI   : 1.5.1
[11:35:25]: ▸ @capacitor/core : 1.5.1
[11:35:25]: ▸ Utility:
[11:35:25]: ▸ cordova-res : 0.10.0
[11:35:25]: ▸ native-run  : not installed
[11:35:25]: ▸ System:
[11:35:25]: ▸ NodeJS : v10.19.0 (/usr/local/nvm/versions/node/v10.19.0/bin/node)
[11:35:25]: ▸ npm    : 6.13.4
[11:35:25]: ▸ OS     : Linux 4.14
2 Likes

I am the same. Is there any progress on this?
Is there any complete tutorial for ionic react?

I think examples on the Internet usually not for ionic react but angular or something else.

It shouldn’t matter for ReactJs, Angular or Vue. The Live Deploy should all work the same. HOWEVER, for almost 10 months … .still haven’t figured out how to get this work.

Finally I got the message that live update cannot make with free account from Mr. Bryant Feld from Ionic Support. Please check your Ionic account if you cannot use live updates feature.
Actually, in the pricing page (https://ionicframework.com/pricing/compare), the free plan gives us Deploy 100 live updates / mo, but it is totally not true. You have to pay if you want to try live update feature.

WOW … this would have been nice to know 9 months ago. I had just assume it doesn’t work. My entire team also has same feeling. This has been a reason we have been getting up to speed with RN.

I would have had ZERO problems buying it if I knew it worked.

So the only thing the free version does is build iOS for you. Building APKs is super simple and takes time to build locally than using AppFlow. Especially on Cordova.

1 Like

How are you even able to get AppFlow to build iOS for you? I can’t get it to build anything on a free account.

Do you know if you could send AppFlow a pre-built iOS/Android binary and still use their Live Deploy feature?

You cannot build iOS binary in AppFlow with a free account.
With a free account, you could build your iOS binary in local and live update with a web deploy build in AppFlow with that binary.
iOS binary deploy is another field from what I’ve been trying so far, so not much information.

Thank you for the information. If I do a local build with the live update API, and then do a web deploy build… how does this web deploy build eventually connect with my iOS/Android app?

I was totally got wrong, and misunderstood what the development support team said that the live update feature is not free. What he actually said is that the live update feature for native binary is not free.
And he did not tell me the useful information, but I’ve got the very important information for live updates that is not in the document from google search finally I resolved the problem, and I decided to share it here.

As I tried the live update feature from the instruction from appFlow page like following:
linking with ionic link ${your_app_id} and ionic deploy add to set up Ionic Deploy.

1. Missing values

Then you can see some added text in the android/app/src/main/res/values/strings.xml:

...
  <string name="ionic_app_id">${your_app_id}</string>
  <string name="ionic_channel_name">Master</string>
  <string name="ionic_update_method">auto</string>

If you chaned the channel name and update method, it would be different.
Then if you run the application from Android Studio, you will meet the following error:

E/m.midas.jobfle: Invalid ID 0x00000000.
E/PluginManager: Uncaught exception from plugin
    android.content.res.Resources$NotFoundException: String resource ID #0x0
        at android.content.res.Resources.getText(Resources.java:363)
        at android.content.res.Resources.getString(Resources.java:456)
        at android.content.Context.getString(Context.java:580)
        at com.ionicframework.common.IonicCordovaCommon.getStringResourceByName(IonicCordovaCommon.java:341)
        at com.ionicframework.common.IonicCordovaCommon.getNativeConfig(IonicCordovaCommon.java:425)
        at com.ionicframework.common.IonicCordovaCommon.getPreferences(IonicCordovaCommon.java:384)
        at com.ionicframework.common.IonicCordovaCommon.execute(IonicCordovaCommon.java:92)
        at org.apache.cordova.CordovaPlugin.execute(CordovaPlugin.java:98)
        at org.apache.cordova.PluginManager.exec(PluginManager.java:132)
        at com.getcapacitor.MessageHandler.callCordovaPluginMethod(MessageHandler.java:69)
        at com.getcapacitor.MessageHandler.postMessage(MessageHandler.java:45)
        at android.os.MessageQueue.nativePollOnce(Native Method)
        at android.os.MessageQueue.next(MessageQueue.java:326)
        at android.os.Looper.loop(Looper.java:181)
        at android.os.HandlerThread.run(HandlerThread.java:65)
E/Capacitor/Console: File: capacitor-runtime.js - Line 2654 - Msg: Uncaught (in promise) String resource ID #0x0

You can see the error message related in chrome inspector Uncaught (in promise) String resource ID #0x0. It means that live update didn’t make due to the error.
In the process of loading and live updating the app, it checks some environmental values from strings.xml or SharedPreference. However, if there is some missing values, the process will stop and just go to the next step.
I found some missing value keys: ionic_max_versions, ionic_update_api, ionic_min_background_duration.
So, what you have to do is adding some additional values in strings.xml:

<resources>
...
  <string name="ionic_app_id">${your_app_id}</string>
  <string name="ionic_channel_name">Master</string>
  <string name="ionic_update_method">auto</string>
  <string name="ionic_max_versions" >2</string>
  <string name="ionic_update_api">https://api.ionicjs.com</string>
  <string name="ionic_min_background_duration">30</string>
</resources>

Then the error will be resolved and live update will done.
Next is additional information while I was solving the problem.

2. ionic_update_api

First, I’ve got the missing key values from debugging and tracking the code IonicCordovaCommon.java inside the Android proejct, so I did not know what that mean and what is the appropriate values for that keys. I found a hint from the merged commit (https://github.com/ionic-team/ionic-cli/pull/4065/files), but it was not helpful to find the appropriate value.
Then I typed the value for ionic_update_api like following:

<string name="ionic_update_api">https://api.ionicjs.com</string>

and the error happened:

Uncaught SyntaxError: Unexpected token < in JSON at position 0

After I resolved the problem, I now know that the api address for checking the update is wrong. I fond the appropriate value https://api.ionicjs.com googling almost a week. It means that you can manipulate the api address.
I don’t understand why this important information cannot be found anywhere.

Anyway, now the live update is perfectly done.
Thank you.
If you feel this answer is helpful, please like the blog post: https://dev.to/dotorimook/important-to-know-for-ionic-appflow-s-live-update-28hc

3 Likes

I think…
The process of live update (checking for update and downloading the web build) is done by what you set for the update method ionic_update_method: auto, background or none.
If you set it auto or background, the process will done when you start the application.
If you set it none, then you have to set in the javascript file with live update API (this case is what you are doing). But the logic is basically same.
if you CheckForUpdate and downloadUpdate, then the process is done by requesting what you set the value ionic_update_api from strings.xml. (it is for Android project. I think there is similar file or setting for iOS project)
so you can connect the app and AppFlow’s web build with settings from strings.xml.

Cheers @Dotorimook, this post has really saved me. Just for anyone else, I needed to do similar and amend info.plist with hard coded values to make this work:

<key>IonApi</key>
<string>$UPDATE_API</string>
<key>IonMaxVersions</key>
<string>$MAX_STORE</string>
<key>IonMinBackgroundDuration</key>
<string>$MIN_BACKGROUND_DURATION</string>

To hard coded values:

<key>IonApi</key>
<string>https://api.ionicjs.com</string>
<key>IonMaxVersions</key>
<string>2</string>
<key>IonMinBackgroundDuration</key>
<string>30</string>
2 Likes