Cordova hot update and App update

The hot update of Cordova is divided into two parts: the static content of the web page is updated and the cordova plug-in is updated. The static content of the web page is run based on Cordova. For example, the third-party login to QQ and wechat requires the integration of QQ and wechat plug-ins

Integrate update hot update plug-in

// Add a plug-in
cordova plugin add cordova-hot-code-push-plugin
// Install the hot Update tool globallyNPM or CNPM install -g cordova-hot-code-push-cli// Run a command in the root directory of cordova to add the cordova-hcp.json file, which is the template of the hot update file chcp.json
cordova-hcp init

Running init
Please provide: Enter project name (required):  cordovaVueDemo  // Project name
Please provide: Amazon S3 Bucket name (required for cordova-hcp deploy):  // Amazon S3 bucket name can be skipped
Please provide: Path in S3 bucket (optional for cordova-hcp deploy):  // S3 storage bucket path, which can be skipped
Please provide: Amazon S3 region (required for cordova-hcp deploy):  (us-east-1)  // Amazon S3 regions can be skipped
Please provide: IOS app identifier:  // The ID of the IOS App Store. An App upgrade is a jump to the App store to upgrade
Please provide: Android app identifier:  // Android App in the App store address, or App download address
Please provide: Update method (required):  (resume) start // The method to perform the update start(when starting the application) resume(when resuming the application, such as switching from the console to the foreground) now(install the update immediately after downloading)
Please provide: Enter full URL to directory where cordova-hcp build result will be uploaded:  http://xxxxxx.com/www // Address of the WWW resource file on the server
Project initialized and cordova-hcp.json file created.
If you wish to exclude files from being published, specify them in .chcpignore
Before you can push updates you need to run "cordova-hcp login" in project directory

// Add "autogenerated": true to cordova-hcp.json file
// The update will be invalid if you do not add it. The complete cordova-hcp.json file should look like this after the operation is complete
// Add iosMinVersion, androidVersion to control the App version, plug-in updates need to reinstall the App to take effect
{
  "name": "cordovaVueDemo"./ / can be null
  "autogenerated": true.// If not added, hot updates will not work
  "ios_identifier": "".// App store id(null)
  "android_identifier": "".// App store address or App download address (can be empty)
  "update": "start".// Install at application startup
  "content_url": "http://xxxxxx/cordova/www".// address of the WWW file on the server
  "iosMinVersion": "1.0.0".// For the ios version, use this to determine if you need to re-download the app. Usually, you need to change this when you update cordova
  "androidVersion": "1.0.0" // For The Android version, use this to determine if you need to re-download the app. Usually, you need to change this when you update cordova
  "updateLog": "Update log"
}
Copy the code

Generate chcp.json and chcp.mainfest files in the WWW folder

• Json contains the cordova-hcp. Json template information, latest release information, resource time, and Native side version number

• Chcp.mainfest contains hot update static file information (resource file name and hash value, which will be used to match the corresponding file to achieve accurate update).

// Run the command
cordova-hcp build
// After the command is executed, the "release":" current time "field is added to the template. This field is used to determine when an update is made
"release": "2021.06.17-16.30.20".// Unique Web project version number, used with hot update Web content updates. (required)
Copy the code

Config.xml configuration

// Add it somewhere below config.xml
<chcp>
    <config-file url="http://xxxxxx/cordova/www/chcp.json" /> // The path where the configuration file chcp.json is loaded from the server (required configuration items)
    <auto-download enabled="false" /> // Whether to download the update automatically, default is true, because I manually update the method, so set to false
    <auto-install enabled="false" /> // Whether to install the updates automatically. The default is true, because I manually update the method, so set it to false
    <native-interface version="1" /> // Native Side version number
</chcp> 
Copy the code

Hot update deployment

In this step, directly replace the files in the WWW folder on the server, Note that the WWW file in the service address must be with “content_URL “:”http://************/cordova/www” and config.xml
fill in the address is the same, this is the restart App, hot update should be able to perform normally, However, we set “auto-download” and “auto-install” to false, so the update does not automatically execute, so we will write the update logic next

Update logic editing

// I'm using the vue project, so I'll write it as vue
// Create the util.js file
class Util {
  // Configure the hot update service address
  chcpConfigure() {
    return new Promise((resolve, reject) = > {
      chcp.configure(
        { "config-file": process.env.VUE_APP_CHCP_SERVER },
        (err) = > {
          if (err) {
            Toast("Hot update address configuration error");
            reject();
          } else{ resolve(); }}); }); }// Get the hot update version number
  chcpGetVersion() {
    return new Promise((resolve, reject) = > {
      chcp.getVersionInfo((err, data) = > {
        if (err) {
          reject();
        } else{ resolve(data); }}); }); }// Check whether the server has been updated
  chcpFetchUpdate() {
    return new Promise((resolve, reject) = > {
      chcp.fetchUpdate((err, data) = > {
        if (err) {
          reject(err);
        } else{ resolve(data); }}); }); }// Install has downloaded the update
  chcpInstallUpdate() {
    return new Promise((resolve, reject) = > {
      chcp.installUpdate(err= > {
        if (err) {
          reject(err)
        } else{ resolve() } }); }}})export default new Util();

// Write the logic in the app.vue file
import util from "@/common/util";

export default {
  methods: {
    getAppChcpVersion() {
      util.chcpGetVersion().then((versionData) = > {
        this.checkedAppUpdate(versionData, 0);
      });
    },
    checkedAppUpdate(versionData, type) {
      // type 0 Automatic detection 1 manual update
      const self = this;
      // The getOnlineVersion function directly requests the CHCP. Json file of the online server WWW using the axios.get method
      getOnlineVersion().then((res) = > {
        let iosMinVersion = Number(res.iosMinVersion.replace(/\./g."")),
          androidVersion = Number(res.androidVersion.replace(/\./g."")),
          appVersion = Number(versionData.appVersion.replace(/\./g.""));
        // Determine whether increments are allowed or the full App must be downloaded
        if (
          (util.isAndroid() && appVersion < androidVersion) ||
          (util.isIos() && appVersion < iosMinVersion)
        ) {
          self.$dialog
            .alert({
              title: "Title".message: "Please go and download the full App.".theme: "round-button",
            })
            .then(() = > {
              window.location.href = "App Download Address";
            });
        } else {
          if(versionData.currentWebVersion ! = res.release) {// Determine whether to force the update
            if (res.updateType == 1) {
              self.$toast({
                message: "System forced update!!".onClose(){ self.checkedHasFetchUpdate(); }}); }else {
              self.$dialog
                .confirm({
                  title: "Software Update".message: res.updateLog,
                })
                .then(() = > {
                  self.checkedHasFetchUpdate();
                })
                .catch(() = >{}); }}}}); },checkedHasFetchUpdate() {
      this.$toast.loading({
        message: "Updating...".duration: 0}); util .chcpFetchUpdate() .then((data) = > {
          util
            .chcpInstallUpdate()
            .then(() = > {
              this.$toast("Update installed successfully");
            })
            .catch((err) = > {
              console.log(err);
              this.$toast("Update installation error");
            });
        })
        .catch((err) = > {
          console.log(err);
          this.$toast("Update pack obtaining failed"); }); }},created(){
    document.addEventListener(
      "deviceready".() = > {
        this.getAppChcpVersion();
      },
      false); }}// If there is no problem at this stage, the hot update will be executed normally. When you open the App, the method will be executed, and if there is an update, a prompt will be displayed asking for an update
Copy the code

Thermal renewal method

Thermal renewal event

The error code