Manually configure app for Live Update (without ionic CLI, rendered impossible by NodeJS version conflict)

Appflow
1

I have an angular 12 ionic 5 app. I want to use Live Updates. The documentation suggests (dashboard/Deploy/Destinations/Production/Install instructions) to use ionic live-update add CLI
The problem is nodejs version. Angular 12 requires Node 14. ionic CLI, the one that has live-update option, which is 7, requires nodejs 16.
Is there a guide what to manually change to configure my app for live update?

2

We strongly suggest keeping major project dependencies up to date as often as possible. Node 14 entered End-of-Life in April so that’s pretty far behind.

That said, here’s what the helper command does:

  1. Install cordova-plugin-ionic:
    npm i --save -E cordova-plugin-ionic

  2. Adds variables to iOS project in the ios/App/App/Info.plist:

    <key>IonAppId</key>
    <string>80837a05</string>
    <key>IonChannelName</key>
    <string>staging</string>
    <key>IonUpdateMethod</key>
    <string>background</string>
    <key>IonMaxVersions</key>
    <string>2</string>
    <key>IonMinBackgroundDuration</key>
    <string>30</string>
    <key>IonApi</key>
    <string>https://api.ionicjs.com</string>
  1. Add variables to the Android project in android/app/src/main/res/values/strings.xml:
  <string name="ionic_app_id">80837a05</string>
  <string name="ionic_channel_name">staging</string>
  <string name="ionic_update_method">background</string>
  <string name="ionic_max_versions">2</string>
  <string name="ionic_min_background_duration">30</string>
  <string name="ionic_update_api">https://api.ionicjs.com</string>
  1. Be sure to sync the project
    npx cap sync
1 Like
3

Would it be inappropriate if I suggest publishing it out in the documentation section?

There are two use cases where that would be useful.

Using trapeze to always have latest android SDK compliant code.

For those who did not use trapeze, it is another ionic created tool, that has syntax for patching config files (.e.g manifest xml) in a trivial way. A fantastically useful tool, well executed, well documented. Almost perfect (I have one missing feature in mind, but that is a topic for another post)

Since Android code is generated and then left untouched except for the configs and graphics assets, it is a possibility (which I personally prefer) to wipe the /android folder, run the generator, then trapeze, and lo and behold you have the most up to date code version.

Currently, such a use case is served by having a script that would have also run ionic CLI in addition to Trapeze. Trapeze scripts then would lose a bit of visibility to changes they provide, which is a subjective advantage.
This leaves me with use case number 2.

Doing a hybrid app without ionic framework

Suppose I only plan for a web app and an Android app. With Material Design now a standard for both platforms, I happen to think that a plain angular framework that includes angular material for the UI layer is good enough.
So in terms of tools coming from ionic the company, I want Capacitor, obviously, and I want appflow for the live updates. Trapeze is a framework neutral too.

Are these too contrived? I do both, depending on the app, but maybe I am a tiny minority.

1 Like
4

Using the Ionic CLI is the recommended approach since it provides a tight user experience, and over time, should steps change, there is less overhead for you to be aware of and maintain.

That said, I will add the steps shortly to the installation page of the docs, as I see the merits you outlined and the usefulness in understanding what the live-update add command does to the project. Thanks again for the feedback, Michael!

5

Matt, it is perhaps all because I am a minority of developers. I am behind stack-wise, still angular 12. Also I tend to loose it when there is even a small confusion. One such example is using ionic CLI. It is probably the name that confuses me. To me, ionic is a brand for the framework. Now, appflow is a different thing. I would be a lot happear incorporating an appflow CLI into the process.

I totally see and acknowledge and validate your point that CLI abstracts away the specifics, which is useful when specifics change. I would love, apart from CLI, if there were publicly available downloadable trapeze scripts that would do such things. Trapeze, to me, is the best of two worlds - automates things, but also documents things. Love it.

6

I can confirm that this indeed has been done. The link is here
Good job Matt, thanks

7

Sorry for being pain in the S.
I re-read the documentation again. Comparing with your response to my question it contains an additional item, Create a live update manifest file: ionic live-update manifest
This is a problem for 2 reasons.

  1. The subject of this section is configuring without ionic CLI, so the use of ionic here seems a deviation fro the explicit goal.
  2. I have not done this step. I have followed everything else, and now have cryptic low level errors POSTing live update API. I am sure I’ve missed something configraution wise and wonder if this step might be it.

Can you please clafiry what that step accomplishes and how we do it sans ionic CLI?

8

Another correction to the documentation, depending on the version of ionic CLI the command might be different from the quoted. For ionic 6.20.9 that I have, it is Ionic deploy manifest

9

There are more questions regarding this (manifest) step.
Is it necessary for live-update in general, or just for differentials live-update, because this step is not mentioned in the quickstart (other than in your new Appendix: section).
Is it necessary at all if both native and web builds (for live update) are done on appflow and not locally? The documentation section on differntials states that

If you are using Appflow to build the native binaries, Appflow creates the manifest file for you automatically and includes it in the static files. This leads to better subsequent deploys.

So I’d assume this step is optional. Am I correct? If yes, is it worth mentioning in the Appendix?