Hot update method based on React Native cross-platform framework

Abstract

The invention provides a hot update method based on a ReactNative cross-platform framework. The hot update method comprises the steps that S1, a server generates an update package; s2, the client checks updating; s3, the server side transmits the update package; s4, the client receives the update package; s5, the client verifies the update package; s6, the client decompresses the update package; and S7, client code injection and application restart. The invention provides a hot update technology based on a React Native cross-platform framework, the problems of complexity, compatibility, safety and the like in a traditional hot update scheme are effectively solved, the update efficiency and user experience of mobile applications are improved, and the hot update technology has wide application prospects.

Description

Technical Field

[0001] The present invention relates to the technical field of mobile application development, and in particular to a hot update method based on a React Native cross-platform framework. Background Art

[0002] With the rapid development of mobile Internet, the update and maintenance of mobile applications have become particularly important. The traditional way of updating applications requires users to download and install new versions of applications, which is not only time-consuming but also inconvenient, especially in poor network conditions. In order to improve user experience and quickly fix problems in applications, hot update technology came into being. Hot update allows developers to directly update JavaScript code without re-publishing the application, thus achieving instant updates.

[0003] In the prior art, ReactNative is a popular cross-platform framework, and its hot update function has been widely used. However, the existing hot update solutions have the following problems:

[0004] 1. The hot update process is complicated and can easily lead to code conflicts and compatibility issues.

[0005] 2. The transmission and decompression process of the update package is time-consuming, affecting the user experience.

[0006] 3. Security issues: the update package may be tampered with, leading to malicious code injection. Summary of the invention

[0007] The present invention aims to propose a hot update method based on the ReactNative cross-platform framework to solve the above problems and achieve efficient, safe and reliable hot update.

[0008] To achieve the above object, the technical solution of the present invention is achieved as follows:

[0009] A hot update method based on the ReactNative cross-platform framework includes the following steps:

[0010] S1. Generate update package on the server: After completing code modification, the developer uses the Webpack packaging tool to generate a JavaScript update package, and uses the hash value to sign the code file during packaging;

[0011] S2. Client checks for updates: The client sends an update request to the server, and the server returns the latest update package information. Before applying the update, the client performs a version check based on the version information in the latest update package information to ensure that the update package is compatible with the current version. If not, the update is rejected and the user is prompted;

[0012] S3, server-side transmission of update package: The generated JavaScript update package is uploaded to a secure server through a secure HTTP(S) channel. After the client checks the update and confirms that the update package is compatible with the current version, it requests to download the latest update package. The server encrypts the update package and transmits it to the client.

[0013] S4. The client receives the update package: When the update package is confirmed, the client receives the update package from the server through the HTTPS transmission protocol and performs breakpoint-resume transmission;

[0014] S5. Client verifies update package: After receiving the update package, the client performs signature verification. After passing the verification, the client decompresses the update package using a decompression algorithm and saves it to local storage;

[0015] S6. The client unzips the update package;

[0016] S7, Client code injection and application restart: The decompressed JavaScript code is injected into the running program through the ReactNative API, and the new code is made effective through the soft restart mechanism.

[0017] Furthermore, S1 specifically includes:

[0018] S1.1. Server version management

[0019] The server sets the latest update package information when generating the update package. The latest update package information includes version information and signature information. The signature information includes the hash value of the update package and the corresponding value of the developer's private key used. The latest update package information is used to control the distribution of each version. The client performs a version check before applying the update and obtains the latest update package information currently available from the server.

[0020] S1.2. Server dependency analysis

[0021] Analyze the dependencies of the update package during the packaging phase to ensure that all dependencies are compatible versions;

[0022] S1.3. Server-side difference updates

[0023] When generating an update package, only the code that is different from the previous version is included, and the difference update package is generated by calculating the difference file;

[0024] S1.4, server-side compressed update package:

[0025] Compress the generated difference update package;

[0026] S1.5. The server generates a double-signed encrypted update package

[0027] The developer's private key is used to sign the update package when it is generated, and the developer's public key is used to verify the update package after the client receives it.

[0028] Furthermore, after receiving the update package in S5, the client uses the developer's public key to perform signature verification.

[0029] Furthermore, S1.2 uses the Webpack dependency tree analysis plug-in to detect and resolve potential conflicts.

[0030] The present invention provides a hot update technology based on the ReactNative cross-platform framework, which effectively solves the problems of complexity, compatibility, security, etc. in traditional hot update solutions, improves the update efficiency and user experience of mobile applications, and has broad application prospects. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] Figure 1 It is a flow chart of the hot update method based on the ReactNative cross-platform framework of the present invention. DETAILED DESCRIPTION

[0032] In order to make the purpose, technical solution and advantages of the embodiments of the present invention clearer, the technical solution in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0033] Figure 1 The figure is a flow chart of a hot update method based on the ReactNative cross-platform framework according to an embodiment of the present invention, and the method comprises the following steps:

[0034] S1. The server generates an update package

[0035] After completing the code modification, the developer uses the Webpack packaging tool to generate a JavaScript update package. During packaging, the code file is signed with a hash value to ensure the integrity of the update package.

[0036] S1 specifically includes:

[0037] S1.1, Server version management:

[0038] The server sets the latest update package information when generating an update package. The latest update package information includes version information and signature information. The signature information includes the hash value of the update package and the corresponding value of the developer's private key used. The latest update package information is used to control the distribution of each version. The client performs a version check before applying the update and obtains the latest update package information currently available from the server.

[0039] S1.2、Server dependency analysis:

[0040] Analyze the dependencies of the updated package during the packaging phase to ensure that all dependencies are compatible versions. Use tools such as Webpack's dependency tree analysis plugin to detect and resolve potential conflicts.

[0041] S1.3, Server-side difference updates:

[0042] When generating an update package, only the code that is different from the previous version is included. The difference update package is generated by calculating the difference file, thereby reducing the size of the update package and the possibility of update conflicts. The difference update example is as follows:

[0043]

[0044] S1.4, server-side compressed update package:

[0045] The generated differential update package is compressed to make it smaller and more convenient for network transmission.

[0046] S1.5. The server generates a dual-signature encrypted update package:

[0047] The developer's private key is used to sign the update package when it is generated, and the developer's public key is used to verify the update package after the client receives it. The signature verification example is as follows:

[0048]

[0049] S2. Check for updates on the client:

[0050] The client sends an update request to the server, and the server returns the latest update package information;

[0051] The client obtains the latest update package information from the server. Before applying the update, the client performs a version check based on the version information in the latest update package information to ensure that the update package is compatible with the current version. If not, the update is rejected and the user is prompted.

[0052] S3, server transmission update package

[0053] Upload the generated JavaScript update package to a secure server via a secure HTTP(S) channel.

[0054] The client periodically requests the server to check whether there is a new package update. After obtaining the latest available update package information returned by the server and confirming that the update package is compatible with the current version based on the version information, it requests to download the latest update package. The server encrypts the update package and transmits it to the client.

[0055] The server encrypts the update package when transmitting it to ensure the security of data transmission. The following is an example of encrypted transmission:

[0056] Const encryptedBlob=encryptPackage(packageBlob, encryptionKey);

[0057] fetch('https: / / secure-server.com / upload',{

[0058] method:'POST',

[0059] body:encryptedBlob,

[0060] headers:{

[0061] 'Authorization':'Bearer <token>',

[0062] },

[0063] });

[0064] S4. The client receives the update package:

[0065] When an update package is confirmed, the client receives the update package from the server through the HTTPS transmission protocol and resumes the download to ensure the integrity of the update package download.

[0066] S5. Client verification update package:

[0067] Since the update package downloaded by the client from the server is an encrypted package, the encrypted package needs to be decrypted on the client before verifying the update package.

[0068] After receiving the update package, the client performs signature verification to ensure the security of the update package. After the verification is passed, the update package is decompressed using a decompression algorithm and saved to local storage.

[0069] The signature verification process is a critical step in ensuring that the update package has not been tampered with.

[0070] After the client receives the update package, it uses the developer's public key to verify the signature. The example is as follows:

[0071] const crypto=require('crypto');

[0072] const fs = require('fs');

[0073] const publicKey=fs.readFileSync('path / to / public.key','utf8');

[0074] const packageData=fs.readFileSync('path / to / update-package.zip');

[0075] const signature=fs.readFileSync('path / to / signature.txt','utf8');

[0076] const verify=crypto.createVerify('SHA256');

[0077] verify.update(packageData);

[0078] verify.end();

[0079] const isValid=verify.verify(publicKey,signature,'hex');

[0080] if(!isValid){

[0081] throw new Error('Invalid update package');

[0082] }

[0083] S6. Unzip the update package on the client:

[0084] / / Unzip the update package

[0085] unzipPackage(packageData)

[0086] .then(unzippedFiles=>{

[0087] / / Save the decompressed file

[0088] saveFilesToLocal(unzippedFiles);

[0089] })

[0090] .catch(error=>{

[0091] console.error('Failed to unzip package:',error);

[0092] });

[0093] S7, Client code injection and application restart:

[0094] The decompressed JavaScript code is injected into the running program through the ReactNative API, and the new code is made effective through the soft restart mechanism without the user having to restart the application.

[0095] Through the above steps, the present invention realizes efficient, safe and reliable hot update of ReactNative applications, and effectively solves code conflicts, compatibility and security issues.

[0096] The above is only a specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any changes or substitutions that can be easily thought of by a person skilled in the art within the technical scope disclosed by the present invention should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention should be based on the protection scope of the claims.< / token>

Claims

1. A hot update method based on the ReactNative cross-platform framework, characterized in that: The steps include: S1. Generate update package on the server: After completing code modification, the developer uses the Webpack packaging tool to generate a JavaScript update package, and uses the hash value to sign the code file during packaging; S2. Client checks for updates: The client sends an update request to the server, and the server returns the latest update package information. Before applying the update, the client performs a version check based on the version information in the latest update package information to ensure that the update package is compatible with the current version. If not, the update is rejected and the user is prompted; S3, server-side transmission of update package: The generated JavaScript update package is uploaded to a secure server through a secure HTTP(S) channel. After the client checks the update and confirms that the update package is compatible with the current version, it requests to download the latest update package. The server encrypts the update package and transmits it to the client. S4. The client receives the update package: When the update package is confirmed, the client receives the update package from the server through the HTTPS transmission protocol and performs breakpoint-resume transmission; S5. Client verifies update package: After receiving the update package, the client performs signature verification. After passing the verification, the client decompresses the update package using a decompression algorithm and saves it to local storage; S6. The client unzips the update package; S7, Client code injection and application restart: The decompressed JavaScript code is injected into the running program through the ReactNative API, and the new code is made effective through the soft restart mechanism.

2. The hot update method based on the React Native cross-platform framework as claimed in claim 1, characterized in that: S1 specifically includes: S1.

1. Server version management The server sets the latest update package information when generating the update package. The latest update package information includes version information and signature information. The signature information includes the hash value of the update package and the corresponding value of the developer's private key used. The latest update package information is used to control the distribution of each version. The client performs a version check before applying the update and obtains the latest update package information currently available from the server. S1.

2. Server dependency analysis Analyze the dependencies of the update package during the packaging phase to ensure that all dependencies are compatible versions; S1.

3. Server-side difference updates When generating an update package, only the code that is different from the previous version is included, and the difference update package is generated by calculating the difference file; S1.4, server-side compressed update package: Compress the generated difference update package; S1.

5. The server generates a double-signed encrypted update package The developer's private key is used to sign the update package when it is generated, and the developer's public key is used to verify the update package after the client receives it.

3. The hot update method based on the React Native cross-platform framework as claimed in claim 1, characterized in that: After receiving the update package in S5, the client uses the developer's public key to verify the signature.

4. The hot update method based on the React Native cross-platform framework as claimed in claim 2, characterized in that: S1.2 uses Webpack's dependency tree analysis plug-in to detect and resolve potential conflicts.

Images