Smooth updating method of single-page application program and terminal

Abstract

The invention discloses a smooth updating method for a single-page application program and a terminal. The method comprises the following steps: loading the application program and recording a timestamp for updating the application program; monitoring unprocessed exceptions of the program; and when an exception is monitored, reading the application program update timestamp recorded in the server, comparing the application program update timestamp with the locally recorded application program update timestamp, and when the two timestamps are inconsistent, automatically refreshing the browser for reloading. According to the scheme, the problem that when server resource loading fails due to updating of the single-page application program, user operation is blocked or page blank is encountered is solved, and the fluency and the satisfaction degree in the user interaction process are improved.

Description

Technical Field

[0001] The present invention relates to the field of single-page application programs, and in particular to a smooth updating method and terminal for a single-page application program. Background Art

[0002] With the rapid progress of social economy and technology, people are increasingly dependent on Web systems in their daily lives. This trend has prompted Web system developers to continuously accelerate product iteration cycles to meet the ever-changing needs of users. In this context, single-page applications (SPA) have occupied a prominent position in the market with their smooth user experience and fast response characteristics. However, while pursuing efficient iteration, the update process of single-page applications also faces a series of challenges, as follows:

[0003] Please refer to Figure 4 and Figure 5 , assuming the current application version is v1.0.0, its server resources are as follows Figure 4 As shown. The user first uses the browser to load the index.html resource, and then can access the . / js / xxxxxxx1.js and . / css / xxxxxxx1.css resources normally according to the static resource links in the index.html file. At this time, the application is updated to v2.0.0, and its server resources are as follows Figure 5 As shown. At this time, when the user accesses the original resource according to the static resource link in the index.html file that has loaded the v1.0.0 version, because the application has been updated to v2.0.0, there are no . / js / xxxxxxx2.js and . / css / xxxxxxx2.css resources in its resource files, and the browser will have a resource loading exception.

[0004] Therefore, in the face of static resource access failures that may be caused during the iterative upgrade of single-page applications (SPAs), which in turn cause trouble to users and degrade their experience, there is an urgent need for a set of effective strategies to ensure smooth updates, eliminate access anomalies, and comprehensively improve user experience. Summary of the invention

[0005] The technical problem to be solved by the present invention is: how to ensure the smooth update of a single-page application, how to avoid failures during iterative upgrades, and improve user experience.

[0006] In order to solve the above technical problems, the technical solution adopted by the present invention is:

[0007] In a first aspect, the present invention provides a method for smooth updating of a single-page application program, and the specific steps are as follows:

[0008] S1, load the application and record the timestamp of the application update;

[0009] S2, exception not handled by the listener;

[0010] S3. When an exception is detected, the timestamp of the application update recorded in the server is read and compared with the timestamp of the application update recorded locally. If the two are inconsistent, the browser is automatically refreshed for reloading.

[0011] On the other hand, the present invention provides a smooth update terminal for a single-page application, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor completes the following steps when executing the computer program:

[0012] S1, load the application and record the timestamp of the application update;

[0013] S2, exception not handled by the listener;

[0014] S3. When an exception is detected, the timestamp of the application update recorded in the server is read and compared with the timestamp of the application update recorded locally. If the two are inconsistent, the browser is automatically refreshed for reloading.

[0015] The beneficial effects of the present invention are: providing a smooth update method and terminal for a single-page application, by detecting the cause of program abnormality, determining whether the abnormal source is a static resource access abnormality, and then determining whether an update of the single-page application has occurred through the application update timestamps recorded before and after. When the server resource loading fails due to the update of the single-page application, the system will intelligently trigger the browser to automatically refresh, effectively avoiding the situation where the user operation is blocked or the page is blank, and improving the fluency and satisfaction of the user interaction process. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] Figure 1 A flowchart of a smooth update method for a single-page application;

[0017] Figure 2 It is a flow chart of a smooth update method of a single-page application program in an embodiment of the present invention;

[0018] Figure 3 It is a schematic diagram of a smooth update terminal of a single-page application program in an embodiment of the present invention;

[0019] Figure 4 A schematic diagram of the server resources for the current version of a single-page application;

[0020] Figure 5A diagram of the server resources for a new version of a single-page application.

[0021] Description of labels:

[0022] 1. A smooth update terminal for a single-page application; 2. A memory; 3. A processor. DETAILED DESCRIPTION

[0023] In order to explain the technical content, achieved objectives and effects of the present invention in detail, the following is an explanation in combination with the implementation modes and the accompanying drawings.

[0024] Please refer to Figure 1 as well as Figure 2 It is understandable that when a single-page application is iteratively upgraded, the application has been updated and the necessary resource files are missing from the current resource files, resulting in abnormal resource loading. In the face of static resource access failures that may be caused during the iterative upgrade of a single-page application (SPA), which causes trouble to users and impairs their experience, the present invention proposes the following solutions:

[0025] A smooth update method for a single-page program application, comprising the steps of:

[0026] S1, load the application and record the timestamp of the application update;

[0027] S2, exception not handled by the listener;

[0028] S3. When an exception is detected, the timestamp of the application update recorded in the server is read and compared with the timestamp of the application update recorded locally. If the two are inconsistent, the browser is automatically refreshed for reloading.

[0029] From the above description, it can be seen that the beneficial effects of the present invention are:

[0030] By detecting the cause of program exceptions, we can determine whether the source of the exception is an abnormal access to static resources, and then determine whether an update of the single-page application has occurred through the application update timestamps recorded before and after. When the server resource loading fails due to an update of the single-page application, the system will intelligently trigger the browser to automatically refresh, effectively avoiding the situation where user operations are blocked or the page is blank, and improving the fluency and satisfaction of the user interaction process.

[0031] Furthermore, the step S2 is specifically as follows:

[0032] Set a global listener in the program to listen for unhandled exceptions.

[0033] From the above description, it can be seen that by setting a global listener in the program, listening to the unhandled exceptions of the program, detecting the cause of the exception and judging whether it is caused by the static resource access exception based on the detected cause of the exception, the location of the abnormal fault is achieved, which facilitates the smooth update of the subsequent single-page application.

[0034] Furthermore, the step S3 comprises the steps of:

[0035] S31. When an exception is detected, determine whether the exception information contains a static resource storage path;

[0036] S32. Only when the abnormal information includes the static resource storage path, read the timestamp of the application update in the server.

[0037] From the above description, it can be known that the source of the exception is determined based on the monitored exception information, and after the source of the exception is confirmed, it is combined with the timestamp of the application update in the server to facilitate determining whether the program is updated.

[0038] Furthermore, the step S1 further includes the following steps:

[0039] S0. Add a text file containing the current time to the root directory and upload it to the server.

[0040] From the above description, it can be known that the timestamp of the current application update can be obtained through the server.

[0041] Furthermore, the static resources include js resources and css resources, and the static resource storage path includes a js resource storage path and a css resource storage path;

[0042] The js resource and the css resource are accessed through static resource links.

[0043] From the above description, it can be seen that the user's browser first loads the index.html resource, and then can normally access the js resources and css resources according to the static resource link in the index.html file to build a single-page application and provide a good user interaction experience.

[0044] Please refer to Figure 3 A smooth update terminal for a single-page application includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, the steps in a smooth update method for a single-page application are completed.

[0045] From the above description, it can be seen that the beneficial effect of the present invention is: providing an execution carrier of a smooth update method for a single-page application, when executing the above method, by detecting the cause of the program exception, it is determined whether the source of the exception is a static resource access exception, and then by the application update timestamps recorded before and after, it is determined whether an update of the single-page application has occurred. When the server resource loading fails due to the update of the single-page application, the system will intelligently trigger the browser to automatically refresh, effectively avoiding the situation where the user operation is blocked or the page is blank, and improving the fluency and satisfaction of the user interaction process.

[0046] Furthermore, the step S2 is specifically as follows:

[0047] Set a global listener in the program to listen for unhandled exceptions.

[0048] From the above description, it can be seen that by setting a global listener in the program, listening to the unhandled exceptions of the program, detecting the cause of the exception and judging whether it is caused by the static resource access exception based on the detected cause of the exception, the location of the abnormal fault is achieved, which facilitates the smooth update of the subsequent single-page application.

[0049] Furthermore, the step S3 comprises the steps of:

[0050] S31. When an exception is detected, determine whether the exception information contains a static resource storage path;

[0051] S32. Only when the abnormal information includes the static resource storage path, read the timestamp of the application update in the server.

[0052] From the above description, it can be known that the source of the exception is determined based on the monitored exception information, and after the source of the exception is confirmed, it is combined with the timestamp of the application update in the server to facilitate determining whether the program is updated.

[0053] Furthermore, the step S1 further includes the following steps:

[0054] S0. Add a text file containing the current time to the root directory and upload it to the server.

[0055] From the above description, it can be known that the timestamp of the current application update can be obtained through the server.

[0056] Furthermore, the static resources include js resources and css resources, and the static resource storage path includes a js resource storage path and a css resource storage path;

[0057] The js resource and the css resource are accessed through static resource links.

[0058] From the above description, it can be seen that the user's browser first loads the index.html resource, and then can normally access the js resources and css resources according to the static resource link in the index.html file to build a single-page application and provide a good user interaction experience.

[0059] The present invention provides a smooth update method and terminal for a single-page application, which is mainly applied to a scenario where a server resource loading failure caused by an update of a single-page application causes user operations to fail to take effect or a page loading blank is encountered. The following is a specific description in conjunction with an embodiment:

[0060] Please refer to Figure 1 and Figure 2 , Embodiment 1 of the present invention is:

[0061] A smooth upgrade method for a single-page application comprises the following steps:

[0062] S1, load the application and record the timestamp of the application update;

[0063] In this embodiment, when the application is loaded, 101 reads the time when the application is updated in the server and caches it.

[0064] S2, monitoring program unhandled exceptions; in this embodiment, 102 sets a global listener window.addEventListener ("unhandledrejection", (e) = > {...}) in the program to monitor program unhandled exceptions.

[0065] S3. When an exception is detected, the timestamp of the application update recorded in the server is read and compared with the timestamp of the application update recorded locally. If the two are inconsistent, the browser is automatically refreshed for reloading.

[0066] Please refer to Figure 1 and Figure 2 , Embodiment 2 of the present invention is:

[0067] A smooth upgrade method for a single-page application, wherein the user first loads the index.html resource using a browser, and then can normally access the corresponding resource according to the static resource link in the index.html file. The js resource storage path needs to contain / js / , and the css resource storage path needs to contain / css / .

[0068] The difference between this embodiment and the first embodiment is that, in this embodiment, step S0 is further included:

[0069] Add a text file containing the current time to the root directory and upload it to the server.

[0070] In this embodiment, the release_time.txt file containing the current time is added to the root directory and uploaded to the server.

[0071] Based on the first embodiment, step S3 further includes the following steps:

[0072] S31. When an exception is detected, determine whether the exception information contains a static resource storage path;

[0073] S32, only when the static resource storage path is included in the abnormal information, read the timestamp updated by the application in the server. In this embodiment, 103 when an abnormality is monitored, according to whether the abnormality cause includes [ / css / ][ / js / ] (static resource storage path); 104 determines whether the abnormality is caused by abnormal static resource access; if it includes [ / css / ][ / js / ], it means that the abnormality may be caused by abnormal static resource access.

[0074] Specifically, if the exception is not caused by static resource access, no operation is performed; if the exception is caused by static resource access exception, the update time of the application in the server is read again, 105 the application upgrade time is loaded and compared with the local cache time, 106 to determine whether it is consistent with the upgrade time cached during loading.

[0075] If the two timestamps are consistent, it means that there is no new version of the program, and the single-page application does not perform any operation; if the two timestamps are inconsistent, it means that the server program has been updated, that is, the program has a new version, and 107 refreshes the browser to reload it. After reloading, it is the new version of the single-page application.

[0076] Please refer to Figure 3 , Embodiment 3 of the present invention is:

[0077] A smooth update terminal 1 for a single-page application comprises a memory 2, a processor 3 and a computer program stored in the memory 2 and executable on the processor 3. When the processor 3 executes the computer program, the steps in the smooth update method for a single-page application in any one of the above-mentioned embodiments 1 to 2 are completed.

[0078] In summary, the present invention provides a single-page application smooth update method and terminal, which detects the cause of program exception, determines whether the source of the exception is a static resource access exception, and then determines whether the single-page application has been updated by the application update timestamps recorded before and after. When the server resource loading fails due to the update of the single-page application, the system will intelligently trigger the browser to automatically refresh, effectively avoiding the situation where the user operation is blocked or the page is blank, and improving the fluency and satisfaction of the user interaction process.

[0079] The above descriptions are merely embodiments of the present invention and are not intended to limit the patent scope of the present invention. Any equivalent transformations made using the contents of the present invention's specification and drawings, or directly or indirectly applied in related technical fields, are also included in the patent protection scope of the present invention.

Claims

1. A smooth update method for a single-page application, characterized in that: Includes steps: S1, load the application and record the timestamp of the application update; S2, exception not handled by the listener; S3. When an exception is detected, the timestamp of the application update recorded in the server is read and compared with the timestamp of the application update recorded locally. If the two are inconsistent, the browser is automatically refreshed for reloading.

2. According to claim 1, a method for smoothly updating a single-page application is characterized in that: The step S2 is specifically as follows: Set a global listener in the program to listen for unhandled exceptions.

3. According to the method for smooth update of a single-page application program of claim 1, it is characterized in that: The step S3 comprises the steps of: S31. When an exception is detected, determine whether the exception information contains a static resource storage path; S32. Only when the abnormal information includes the static resource storage path, read the timestamp of the application update in the server.

4. According to the method for smooth update of a single-page application program of claim 3, it is characterized in that: The step S1 also includes the following steps: S0. Add a text file containing the current time to the root directory and upload it to the server.

5. According to the method for smooth update of a single-page application program as claimed in claim 1, it is characterized in that: Static resources include js resources and css resources, and the static resource storage path includes the js resource storage path and the css resource storage path; The js resource and the css resource are accessed through static resource links.

6. A smooth update terminal for a single-page application, characterized in that: The invention comprises a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the following steps are performed: S1, load the application and record the timestamp of the application update; S2, exception not handled by the listener; S3. When an exception is detected, the timestamp of the application update recorded in the server is read and compared with the timestamp of the application update recorded locally. If the two are inconsistent, the browser is automatically refreshed for reloading.

7. A single-page application program smooth update terminal according to claim 6, characterized in that: The step S2 is specifically as follows: Set a global listener in the program to listen for unhandled exceptions.

8. A single-page application program smooth update terminal according to claim 6, characterized in that: The step S3 comprises the steps of: S31. When an exception is detected, determine whether the exception information contains a static resource storage path; S32. Only when the abnormal information includes the static resource storage path, read the timestamp of the application update in the server.

9. A single-page application program smooth update terminal according to claim 8, characterized in that: The step S1 also includes the following steps: S0. Add a text file containing the current time to the root directory and upload it to the server.

10. A single-page application program smooth update terminal according to claim 7, characterized in that: Static resources include js resources and css resources, and the static resource storage path includes the js resource storage path and the css resource storage path; The js resource and the css resource are accessed through static resource links.

Images