Dynamic updating method and system for front-end page of production environment and computer readable storage medium

Abstract

The invention relates to the technical field of software data development, and discloses a dynamic updating method and system for a front-end page of a production environment and a computer readable storage medium. The dynamic updating method for the front-end page of the production environment is applied to a software updating unit and specifically comprises the following steps of S101, receiving and screening updating data in a preset period, and loading configuration parameters set for the front-end page of the current production environment; s102, acquiring development submission codes of the configuration parameters, running the system, completing self testing, continuously deploying a CI / CD process, and generating a version information file version.json in each code submission and construction process; according to the method, efficient module updating in the production environment is achieved through automatic version management and an intelligent updating strategy, meanwhile, accuracy and timeliness of version information are ensured, the user experience is improved, and local dynamic updating of a front-end page is achieved in the production environment by combining version management, intelligent differential updating, module dynamic loading and cache optimization.

Description

Technical Field

[0001] The present invention relates to the technical field of software data development, and in particular to a method and system for dynamically updating a front-end page in a production environment and a computer-readable storage medium. Background Art

[0002] In the modern Internet, applications have increasingly higher requirements for the dynamics and real-time updates of front-end pages. The traditional overall page refresh method not only affects the user experience, but also wastes bandwidth. Hot Module Replacement (HMR) in the development environment provides a fast update experience, but replicating this experience in the production environment is poor, and technological innovation is needed to achieve a better experience. Summary of the invention

[0003] The purpose of the present invention is to provide a dynamic update method, system and computer-readable storage medium for front-end pages in a production environment, so as to realize local intelligent dynamic update of front-end pages, realize efficient module update in a production environment through automated version management and intelligent update strategy, and ensure the accuracy and timeliness of version information, so as to improve user experience, aiming to solve the problem that hot module replacement (HMR) in the development environment in the prior art provides a fast update experience, but the poor experience is replicated in the production environment.

[0004] The present invention is implemented in this way: a dynamic update method for a front-end page in a production environment is applied to a software update unit and specifically includes the following steps:

[0005] S101: receiving and filtering update data within a preset period, and loading configuration parameters set for the front-end page of the current production environment;

[0006] S102: Obtain the development submission code of the configuration parameters, the system runs and completes its own test, continuously deploys the CI / CD process, and generates a version information file version.json during each code submission and build process;

[0007] S103: managing resources by preloading and caching the generated version information file version.json through Service Worker, and performing resource integrity verification on the generated version information file version.json before updating;

[0008] S104: using a FETCH API to periodically request the generated version information file version.json within a predetermined period, and obtaining whether the requested version information file version.json is the same as the currently used version information file version.json. If they are the same, no update request is generated; if they are different, an update request is generated;

[0009] S105: Receive the generated update request, obtain user behavior characteristics and analyze the user interaction pattern to match the requested version information file version.json, determine the priority update of the most frequently used modules, differentially transmit the changed fragments of the downloaded and updated files, and adaptively control the network status to adjust the update strategy.

[0010] Furthermore, in S101, receiving and screening update data within a preset period includes:

[0011] Receiving a connection request sent by a development end, wherein the connection request is used to request to establish a connection with the software update unit;

[0012] Detect whether the current account of the development end is the target account;

[0013] If the current account of the development end is the target account, the development end is connected according to the connection request, and after the connection is completed, the update data within a preset period is received and screened.

[0014] Further, after the connection is completed, receiving and screening the update data within a preset period includes:

[0015] Receive update data within a preset period;

[0016] Obtaining client user behavior data, extracting common data items in the client user behavior data, and sorting the common data items in the user behavior data from high to low usage frequency;

[0017] Obtain broadband network data, group common data items of user behavior data according to network conditions, and obtain multiple data update module items.

[0018] Further, in S102, the development submission code of the configuration parameters is obtained, the system runs and completes its own test, and the CI / CD process is continuously deployed, including:

[0019] Obtain the source code submitted by the developer, and place it in the test environment to run automated tests in the continuous integration / deployment (CI / CD) process;

[0020] If the automated test of the source code submitted by the developer is bug-free, build the front-end application to generate the version information file version.Json, and obtain the version number, hash value, and timestamp of the version information file version.Json and deploy it to Nginx / CDN to ensure the accuracy of the version information.

[0021] Further, in S103, the generated version information file version.json is preloaded and cached by managing resources through Service Worker, and the resource integrity verification of the generated version information file version.json is performed before updating, including:

[0022] Use service worker-to detect the cache status of the generated version information file version.json;

[0023] If the cache is not complete, the new resource coalescing prefetching strategy is used to release the network and complete the caching of the generated version information file version.json during idle time.

[0024] Obtain the version information from the cached version information file version.json and apply the hash value verification to ensure integrity before application.

[0025] Further, in S104, the generated version information file version.json is periodically requested using a FETCH API within a predetermined period to obtain whether the requested version information file version.json is the same as the currently used version information file version.json, including:

[0026] Get the client startup information, use the FETCH API to periodically request whether to generate the version information file version.json, and if the version information file version.json has been generated, get the current version information file version.json;

[0027] Compare the version information, use dynamic import to load the differential update module to check the version or hash change to confirm whether the versions are different, and rely on module changes to determine the distinguishing features of the generated version information file version.json and the currently used version information file version.json.

[0028] Furthermore, the difference between the generated version information file version.json and the currently used version information file version.json is determined by the dependency module change, including:

[0029] Use dynamic import to load the differential update module to check whether the version information in the information file version.json is the same;

[0030] If they are not the same, use dynamic import to load the difference update module and then check the hash change to confirm whether the versions are the same;

[0031] If they are not the same, obtain the source code files of the generated version information file version.json and the currently used version information file version.json, identify the difference code strings between the generated version information file version.json and the currently used version information file version.json through the code recognition model, and then transmit them to the Client loading module for updating.

[0032] Compared with the prior art, the method, system and computer-readable storage medium for dynamically updating the front-end page in the production environment provided by the present invention have the following beneficial effects:

[0033] 1. Implement local intelligent dynamic updates of front-end pages. Through automated version management and intelligent update strategies, efficient module updates in the production environment are achieved, while ensuring the accuracy and timeliness of version information, improving user experience. Combining version management, intelligent differentiated updates, dynamic module loading and cache optimization, local dynamic updates of front-end pages are achieved in the production environment. Automation and machine learning technologies are used to enhance the flexibility and efficiency of updates, while ensuring the accuracy and timeliness of version information updates.

[0034] 2. Ensure the integrity and reliability of resources during network transmission and application stages through transport layer security and hash verification, regularly request and check the version.json file, use dynamic import() to load update modules, reduce interruptions to user interactions, and use intelligent caching mechanisms to improve cache hit rates and access speeds through algorithm optimization. Use differential updates and user behavior analysis to greatly improve update efficiency.

[0035] The dynamic update system for the front-end page of the production environment is executed in the above-mentioned dynamic update method for the front-end page of the production environment, and the dynamic update system includes:

[0036] The information construction module is used to receive and filter the update data within a preset period and load the configuration parameters set for the front-end page of the current production environment;

[0037] Static file server, used to obtain the development submission code of configuration parameters, the system runs and completes its own testing, and continuously deploys the CI / CD process;

[0038] The cliert loading module is used to obtain whether the requested version information file version.json is the same as the currently used version information file version.json. If they are different, an update request is generated;

[0039] The resource cache module is used to use the FETCH API to periodically request the generated version information file version.json within a predetermined period to complete the cache of the version information file version.json.

[0040] Specifically, the information construction module includes:

[0041] A behavior analysis unit, used to receive update data within a preset period and extract common data items from the client user behavior data;

[0042] A behavior acquisition unit, used to sort the usage frequency of common data items of user behavior data from high to low;

[0043] The information matching unit is used to obtain broadband network data, group common data items of user behavior data according to network conditions, and obtain multiple data update module items.

[0044] A computer-readable storage medium stores a computer program, wherein the computer program is executed by a processor to implement the above-mentioned method for dynamically updating a front-end page in a production environment. BRIEF DESCRIPTION OF THE DRAWINGS

[0045] Figure 1 A schematic flow chart of a method for dynamically updating a front-end page in a production environment proposed by the present invention;

[0046] Figure 2 It is a schematic block diagram of the process of the system running and completing self-testing in the dynamic updating method of the front-end page for the production environment proposed by the present invention;

[0047] Figure 3 A schematic block diagram of the process of managing resource preloading and caching through ServiceWorker in the dynamic update method of the front-end page for a production environment proposed by the present invention;

[0048] Figure 4 A schematic block diagram of the process of comparing the version of the requested version information file version.json with the currently used version information file version.json in the dynamic update method of the front-end page for the production environment proposed by the present invention;

[0049] Figure 5 This is a schematic diagram of the structure of the dynamic update system of the front-end page for the production environment proposed by the present invention;

[0050] Figure 6 This is a schematic diagram of the structure of the information building module in the dynamic updating system of the front-end page for the production environment proposed by the present invention;

[0051] Figure 7A schematic diagram of the structure of a computer-readable storage medium for dynamically updating a front-end page in a production environment proposed by the present invention. DETAILED DESCRIPTION

[0052] In order to make the purpose, technical solution and advantages of the present invention more clearly understood, the present invention is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not intended to limit the present invention.

[0053] The implementation of the present invention is described in detail below in conjunction with specific embodiments.

[0054] The same or similar numbers in the drawings of this embodiment correspond to the same or similar parts; in the description of the present invention, it should be understood that if the terms "upper", "lower", "left", "right" and the like indicate directions or positional relationships based on the directions or positional relationships shown in the drawings, it is only for the convenience of describing the present invention and simplifying the description, rather than indicating or implying that the device or element referred to must have a specific direction, be constructed and operated in a specific direction. Therefore, the terms describing the positional relationship in the drawings are only used for illustrative purposes and cannot be understood as limitations on the present invention. For ordinary technicians in this field, the specific meanings of the above terms can be understood according to specific circumstances.

[0055] Reference Figure 1-4 As shown, the dynamic update method of the front-end page for the production environment is applied to the software update unit and specifically includes the following steps:

[0056] S101: receiving and filtering update data within a preset period, and loading configuration parameters set for the front-end page of the current production environment;

[0057] The receiving and filtering of update data within a preset period includes:

[0058] Receive a connection request sent by the development end, the connection request is used to request to establish a connection with the software update unit;

[0059] Check whether the current account on the development end is the target account;

[0060] If the current account of the development end is the target account, it connects to the development end according to the connection request, and after the connection is completed, receives and filters the updated data within the preset period;

[0061] S102: Obtain the development submission code of the configuration parameters, the system runs and completes its own test, continuously deploys the CI / CD process, and generates a version information file version.json during each code submission and build process;

[0062] Among them, the development submission code for obtaining configuration parameters, the system running and completing its own testing, and the continuous deployment CI / CD process include:

[0063] Obtain the source code submitted by the developer, and place it in the test environment to run automated tests in the continuous integration / deployment (CI / CD) process;

[0064] If the development submits source code and the automated test is bug-free, build the front-end application to generate the version information file version.Json, and obtain the version number, hash value, and timestamp of the version information file version.Json and deploy it to Nginx / CDN to ensure the accuracy of the version information;

[0065] S103: managing resources by preloading and caching the generated version information file version.json through Service Worker, and performing resource integrity verification on the generated version information file version.json before updating;

[0066] It includes: using service worker to detect the cache status of the generated version information file version.json;

[0067] If the cache is not complete, the new resource coalescing prefetching strategy is used to release the network and complete the caching of the generated version information file version.json during idle time.

[0068] Obtain the version information of the cached version information file version.json, and apply the hash value to verify the integrity before application;

[0069] S104: using a FETCH API to periodically request the generated version information file version.json within a predetermined period, and obtaining whether the requested version information file version.json is the same as the currently used version information file version.json. If they are the same, no update request is generated; if they are different, an update request is generated;

[0070] The generated version information file version.json is periodically requested using a FETCH API within a predetermined period to obtain whether the requested version information file version.json is the same as the currently used version information file version.json, including:

[0071] Get the client startup information, use the FETCH API to periodically request whether to generate the version information file version.json, and if the version information file version.json has been generated, get the current version information file version.json;

[0072] Compare the version information, use dynamic import to load the differential update module to check the version or hash change to confirm whether the versions are different, and rely on module changes to determine the difference between the generated version information file version.json and the currently used version information file version.json;

[0073] S105: Receive the generated update request, obtain user behavior characteristics and analyze the user interaction pattern to match the requested version information file version.json, determine the priority update of the most frequently used modules, differentially transmit the changed fragments of the downloaded and updated files, and adaptively control the network status update strategy. This technical solution realizes the local intelligent dynamic update of the front-end page, and through automated version management and intelligent update strategies, realizes efficient module updates in the production environment, while ensuring the accuracy and timeliness of version information, and improves user experience. Combining version management, intelligent differential updates, dynamic module loading and cache optimization, local dynamic updates of front-end pages are realized in the production environment, and the flexibility and efficiency of updates are enhanced through automation and machine learning technologies, while ensuring the accuracy and timely update of version information.

[0074] In S101 of this embodiment, after the connection is completed, receiving and filtering the update data within a preset period includes:

[0075] Receive update data within a preset period;

[0076] Obtaining client user behavior data, extracting common data items in the client user behavior data, and sorting the common data items in the user behavior data from high to low usage frequency;

[0077] Obtain broadband network data, group common data items of user behavior data according to network conditions, and obtain multiple data update module items.

[0078] In this embodiment, the difference between the generated version information file version.json and the currently used version information file version.json is determined based on the module change, including:

[0079] Use dynamic import to load the differential update module to check whether the version information in the information file version.json is the same;

[0080] If they are not the same, use dynamic import to load the difference update module and then check the hash change to confirm whether the versions are the same;

[0081] If they are not the same, obtain the source code files of the generated version information file version.json and the currently used version information file version.json, identify the difference code strings between the generated version information file version.json and the currently used version information file version.json through the code recognition model, and then transmit them to the Client loading module for updating.

[0082] This technical solution ensures the integrity and reliability of resources during network transmission and application stages through transport layer security and hash verification, regularly requests and checks the version.json file, uses dynamic import() to load update modules, and reduces interruptions to user interactions. The intelligent cache mechanism improves cache hit rate and access speed through algorithm optimization, and greatly improves update efficiency by using differential updates and user behavior analysis.

[0083] Reference Figure 5-6 As shown, a dynamic update system for a front-end page in a production environment is executed in the above-mentioned dynamic update method for a front-end page in a production environment. The dynamic update system includes: an information construction module, which is used to receive and filter update data within a preset period, and load configuration parameters set for the front-end page of the current production environment; a static file server, which is used to obtain the development submission code of the configuration parameters, the system runs and completes its own test, and continuously deploys the CI / CD process; a cliert loading module, which is used to obtain whether the requested version information file version.json is the same as the version of the currently used version information file version.json, and if not, an update request is generated; a resource cache module, which is used to use the FETCH API to periodically request the generated version information file version.json within a predetermined period, complete the cache of the version information file version.json, and realize efficient module updates in the production environment through automated version management and intelligent update strategies, while ensuring the accuracy and timeliness of version information, improving user experience, combining version management, intelligent differentiated updates, dynamic module loading and cache optimization, realizing partial dynamic updates of front-end pages in the production environment, enhancing the flexibility and efficiency of updates through automation and machine learning technologies, and ensuring the accuracy and timeliness of version information updates.

[0084] In this embodiment, the information construction module includes:

[0085] A behavior analysis unit, used to receive update data within a preset period and extract common data items from the client user behavior data;

[0086] A behavior acquisition unit, used to sort the usage frequency of common data items of user behavior data from high to low;

[0087] The information matching unit is used to obtain broadband network data, group common data items of user behavior data according to network conditions, obtain multiple data update module items, and ensure the integrity and reliability of resources during network transmission and application stages through transport layer security and hash verification. It regularly requests and checks the version.json file and uses dynamic import() to load update modules to reduce interruptions to user interactions. The intelligent caching mechanism improves cache hit rate and access speed through algorithm optimization, and greatly improves update efficiency by using differential updates and user behavior analysis.

[0088] Reference Figure 7 As shown, a computer-readable storage medium stores a computer program, and the computer program is executed by a processor to implement the above-mentioned dynamic update method of the front-end page for the production environment. The computer-readable storage medium realizes local intelligent dynamic update of the front-end page, and realizes efficient module update in the production environment through automated version management and intelligent update strategy, while ensuring the accuracy and timeliness of version information, improving user experience, combining version management, intelligent differentiated update, module dynamic loading and cache optimization, realizing local dynamic update of the front-end page in the production environment, enhancing the flexibility and efficiency of the update through automation and machine learning technology, while ensuring the accuracy and timeliness of version information update.

[0089] The version management and automated construction of this technical solution include:

[0090] Use automated build tools to generate version information files during each code submission and build process to ensure the consistency of version numbers, hash values, and timestamps;

[0091] Configure the CI / CD process to ensure that version information is updated immediately after each build;

[0092] Smart update strategies include:

[0093] Differential update: Use differential transmission technology to download and update only the changed parts of the file, reducing bandwidth and time overhead;

[0094] User behavior analysis: Analyze user interaction patterns through machine learning to prioritize updates to the most frequently used modules;

[0095] Bandwidth optimization: Through adaptive traffic control, the update strategy is adjusted according to the network conditions to ensure user experience;

[0096] Client dynamic detection and module loading include: regularly requesting and checking the version.json file, using dynamic import() to load updated modules to reduce interruptions to user interactions; the intelligent cache mechanism improves cache hit rate and access speed through algorithm optimization;

[0097] The use of Service Worker includes: managing resource preloading and caching through Service Worker, verifying resource integrity before updating, and ensuring data security;

[0098] Security and consistency assurance: Through transport layer security and hash verification, the integrity and reliability of resources during network transmission and application stages are ensured.

[0099] In this embodiment, the entire operation process can be controlled by a computer. In each operation link, sensors can be set to provide signal feedback to achieve sequential execution of steps. These are all common knowledge of current automated control and will not be described in detail in this embodiment.

[0100] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions and improvements made within the spirit and principles of the present invention should be included in the protection scope of the present invention.

Claims

1. A method for dynamically updating a front-end page in a production environment, characterized in that: Applied to the software update unit, specifically including the following steps: S101: receiving and filtering update data within a preset period, and loading configuration parameters set for the front-end page of the current production environment; S102: Obtain the development submission code of the configuration parameters, the system runs and completes its own test, continuously deploys the CI / CD process, and generates a version information file version.json during each code submission and build process; S103: managing resources by preloading and caching the generated version information file version.json through Service Worker, and performing resource integrity verification on the generated version information file version.json before updating; S104: using a FETCH API to periodically request the generated version information file version.json within a predetermined period, and obtaining whether the requested version information file version.json is the same as the currently used version information file version.json. If they are the same, no update request is generated; if they are different, an update request is generated; S105: Receive the generated update request, obtain user behavior characteristics and analyze the user interaction pattern to match the requested version information file version.json, determine the priority update of the most frequently used modules, differentially transmit the changed fragments of the downloaded and updated files, and adaptively control the network status to adjust the update strategy.

2. The method for dynamically updating a front-end page in a production environment according to claim 1, characterized in that: In S101, receiving and screening update data within a preset period includes: Receiving a connection request sent by a development end, wherein the connection request is used to request to establish a connection with the software update unit; Detect whether the current account of the development end is the target account; If the current account of the development end is the target account, the development end is connected according to the connection request, and after the connection is completed, the update data within a preset period is received and screened.

3. The method for dynamically updating a front-end page in a production environment according to claim 2, characterized in that: After the connection is completed, receiving and filtering update data within a preset period, including: Receive update data within a preset period; Obtaining client user behavior data, extracting common data items in the client user behavior data, and sorting the common data items in the user behavior data from high to low usage frequency; Obtain broadband network data, group common data items of user behavior data according to network conditions, and obtain multiple data update module items.

4. The method for dynamically updating a front-end page in a production environment according to claim 3, characterized in that: In S102, the development submission code of the configuration parameters is obtained, the system runs and completes its own test, and the CI / CD process is continuously deployed, including: Obtain the source code submitted by the developer, and place it in the test environment to run automated tests in the continuous integration / deployment (CI / CD) process; If the automated test of the source code submitted by the developer is bug-free, build the front-end application to generate the version information file version.Json, and obtain the version number, hash value, and timestamp of the version information file version.Json and deploy it to Nginx / CDN to ensure the accuracy of the version information.

5. The method for dynamically updating a front-end page in a production environment according to claim 4, characterized in that: In S103, the generated version information file version.json is preloaded and cached through the Service Worker management resource, and the resource integrity verification of the generated version information file version.json is performed before updating, including: Use service worker-to detect the cache status of the generated version information file version.json; If the cache is not complete, the new resource coalescing prefetching strategy is used to release the network and complete the caching of the generated version information file version.json during idle time. Get the version information of the cached version information file version.json, and apply the hash value verification to ensure integrity before application.

6. The method for dynamically updating a front-end page in a production environment according to claim 5, characterized in that: In S104, the generated version information file version.json is periodically requested using a FETCH API within a predetermined period to obtain whether the requested version information file version.json is the same as the currently used version information file version.json, including: Get the client startup information, use the FETCH API to periodically request whether to generate the version information file version.json, and if the version information file version.json has been generated, get the current version information file version.json; Compare the version information, use dynamic import to load the differential update module to check the version or hash change to confirm whether the versions are different, and rely on module changes to determine the distinguishing features of the generated version information file version.json and the currently used version information file version.json.

7. The method for dynamically updating a front-end page in a production environment according to claim 6, characterized in that: Dependency module changes determine the distinguishing features of the generated version information file version.json and the currently used version information file version.json, including: Use dynamic import to load the differential update module to check whether the version information in the information file version.json is the same; If they are not the same, use dynamic import to load the difference update module and then check the hash change to confirm whether the versions are the same; If they are not the same, obtain the source code files of the generated version information file version.json and the currently used version information file version.json, identify the difference code strings between the generated version information file version.json and the currently used version information file version.json through the code recognition model, and then transmit them to the Client loading module for updating.

8. A dynamic update system for front-end pages in a production environment, characterized in that: The method for dynamically updating a front-end page for a production environment according to any one of claims 1 to 7 is implemented, wherein the dynamic updating system comprises: The information construction module is used to receive and filter the update data within a preset period and load the configuration parameters set for the front-end page of the current production environment; Static file server, used to obtain the development submission code of configuration parameters, the system runs and completes its own testing, and continuously deploys the CI / CD process; The cliert loading module is used to obtain whether the requested version information file version.json is the same as the currently used version information file version.json. If they are different, an update request is generated; The resource cache module is used to use the FETCH API to periodically request the generated version information file version.json within a predetermined period to complete the cache of the version information file version.json.

9. The dynamic update system for front-end pages in a production environment as claimed in claim 8, characterized in that: The information building module includes: A behavior analysis unit, used to receive update data within a preset period and extract common data items from the client user behavior data; A behavior acquisition unit, used to sort the usage frequency of common data items of user behavior data from high to low; The information matching unit is used to obtain broadband network data, group common data items of user behavior data according to network conditions, and obtain multiple data update module items.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: The computer program is executed by the processor to implement the dynamic update method of the front-end page for a production environment as described in any one of claims 1-7.

Images