Ionic APP Hot Update in the release state of the hot update build, go to Local-dev-addon plug-in

In the previous article, we introduced the Ionic Project Thermal Update test under the local development environment,

In this article, we'll show you how to implement a hot update with the Cordova-hot-code-push-local-dev-addon plugin removed.

Steps to use:

1. Install CLI:NPM install-g cordova-hot-code-push-cli

Here, we need to describe in detail the various commands provided by the CLI, which we will use later. How to use: Cordova-hcp <command>,<command> includes:

(1) Init: Creates the default Cordova-hcp.json file for the project initialization parameters.

(2) Build: Compile project code, generate Chcp.json and chcp.manifest files under WWW folder, prepare for deployment.

(3) Server: Start a server locally for local development and testing, as described in the previous article.

(4) Login: Create the login credentials to use to deploy the project file on the remote server.

(5) Deploy: Upload the project file to the remote server.

Note: The above command must be run in the root directory of the Ionic project.

2. Install plugin: Ionic Cordova plugin Add Cordova-hot-code-push-plugin

3.CORDOVA-HCP Init, generating a configuration template for a project, creating a Cordova-hcp.json file in the root directory

Some configuration items can be skipped directly by a carriage return, and when completed, the Cordova-hcp.json file is created in the root directory of the project:

We can open the file and look at it in the following format:

Note: If you do not understand this step, you can skip it, and manually create the Cordova-hcp.json file later is also possible.

For more information about the init command, refer to: Https://github.com/nordnet/cordova-hot-code-push-cli#init-command

4.cordova-hcp Build, compile the project file, and generate the Chcp.json and chcp.manifest files under the WWW folder

Chcp.json: Contains information about the application's publication, such as the remote server address of the WWW content content_url, the version number of the WWW file, and so on.

Chcp.manifest: Contains information about Web project files, their relative paths and hash values.

The hot update plugin determines which files need to be updated, what files need to be added, and so on, by comparison to the hash value of the corresponding hash value on the local file and the file on the server.

5. Since these steps involve the configuration of the remote server, I have built a test site on my computer to simulate the role of the remote server.

I use IIS, and everyone else can use the other Web server. Physical path everyone chooses, here the corresponding directory is empty, has not deployed the content of www.

It looks like this in IIS Manager:

So the remote server address I used to test is: http://10.200.223.160:8022

At the same time, at the root of this site we create an empty WWW folder for later deployment of ionic www content. This step is not a matter of first. Start the site when you are finished.

6. Replace the address of the remote server in steps 3 and 4 above with the server address that we have built, such as:

Replace the http://myserver.com/hotcodepush/www with the http://10.200.223.160:8022/www/

To get back to our ionic project, in the. config file, we need to add the following:

Once the code section has been modified, we can package the app directly for later testing.

Ionic Cordova build Android--prod. Build the installation package and install to the phone, not detailed.

7. The next step is to involve remote server deployment. Suppose we update the code at this point and submit the latest compilation results to the remote server for the client to download.

Notice I modified the home.html:

The next process is, don't go wrong:

(1) Execute ionic build--prod to compile our modified code to generate the latest www. Note the--prod parameter to reduce the content size of www file;

(2) Execute CORDOVA-HCP build to generate the latest Chcp.json and chcp.manifest files;

(3) After the completion of the contents of the WWW folder, copy to our remote server's WWW directory can be. The introduction on GitHub is the deployment via CORDOVA-HCP deploy,

This command temporarily supports only Amazon servers, so we can ignore this command and deploy it manually.

8. After the update is deployed on the remote server, we reboot our app and automatically download the updated content from the server, and we can see that the modified content is in effect.

About when to load updates, that is, the settings for the previous update parameter, including start, resume, now three.

The effect of the implementation is:

This completes the thermal update test for the Ionic project under the product release status (not the local development environment, which is not dependent on the development plug-in).

Precautions:

1. During the test, the site is not recognized. JSON format, please add MIME type to the site;

It's best to test it with your mobile browser when you are done to make sure that the profile is properly accessed:

2. After the code is changed, be sure to compile it with Ionic build--prod, then build the latest configuration file through Cordova-hcp build, and then copy to the remote server deployment after the two steps are completed.

Two steps cannot be missed, nor can it be reversed.

3. When the above steps are not a problem, the app can not implement the update, or update the exception, most of the site on the remote server is a problem, so first test the remote server with a browser,

can be accessed normally. Typically, a hot update will work as soon as the catalog is upgraded.

Ionic APP Hot Update in the release state of the hot update build, go to Local-dev-addon plug-in