Page state recovery method and system
By saving the JavaScript status data of the H5 page before the WebView is recycled by memory, and using reconstruction marks to restore the visual state during reconstruction, the problem of inconsistent status after the mobile H5 page reconstruction is solved, ensuring the consistency of visual state before and after the page reconstruction.
Patent Information
- Application Number
- CN202411181876.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-08-27
- Publication Date
- 2024-12-13
AI Technical Summary
After the system memory is recycled, the WebView cannot be restored to the visual state before the reconstruction after the H5 page on the mobile terminal, resulting in inconsistent page status.
By sending a notification message to the H5 page before the initial WebView is memory recycled, JavaScript status data is saved, and rebuild tags are sent when the new WebView instance is loaded, the saved JavaScript status data is used to restore the page to the visual state before the view rendering. .
Ensure that the page is restored to the visual state before reconstruction after WebView is rebuilt, avoiding the problem of the page state being unable to be restored, and achieving consistency of the visual state.
Smart Images
Figure CN119128298A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of page display technology, and in particular to a page status recovery method and system. Background Art
[0002] The mobile Android and iOS pages are both designed based on the View page structure. When the operating system re-renders the page after memory recovery, the UI will be rebuilt and the state can be restored. However, since WebView is designed based on an independent process rendering mode on the mobile terminal and the state of the H5 page belongs to the WebView black box mechanism design, this will cause the state recovery mechanism provided by the operating system to be unsuitable for the H5 page of WebView. Therefore, on the mobile terminal, the problem of the visual state of the H5 page cannot be restored to the visual state before the reconstruction after the WebView is rebuilt due to system memory recovery often occurs. Summary of the invention
[0003] In view of this, the present application provides a page state recovery method and system, which can ensure that after the WebView is rebuilt, the page is restored to its visual state and the continuity of interaction before the reconstruction.
[0004] Specifically, the present application is implemented through the following technical solutions:
[0005] In a first aspect, the present application provides a page status recovery method, which is applied to a page status recovery system, wherein the page status recovery system includes a client and an H5 page, and the method includes:
[0006] After the client uses the initial WebView to load the H5 page, before the initial WebView is recycled by the system memory, the client sends a notification message to the H5 page;
[0007] After receiving the notification message, the H5 page locally saves the JavaScript status data of the H5 page;
[0008] After the client detects that a new WebView instance is rebuilt due to memory recycling, when the H5 page is loaded using the new WebView instance, a reconstruction mark is sent to the H5 page, so as to inform the H5 page that it is currently in a reconstruction loading state through the reconstruction mark;
[0009] Before the H5 page is loaded by using the new WebView instance to render the page view, if a reconstruction mark is detected, the JavaScript state data of the H5 page is read from the local storage, and the JavaScript state data is used to perform view recovery rendering, so that the H5 page is restored to the visual state before the WebView instance was rebuilt.
[0010] The second aspect of the present application provides a page status recovery system, the system comprising a client and an H5 page; wherein:
[0011] The client is used to send a notification message to the H5 page after the H5 page is loaded by the initial WebView and before the initial WebView is recycled by the system memory;
[0012] The H5 page is used to save the JavaScript status data of the H5 page locally after receiving the notification message;
[0013] The client is further configured to, after detecting that a new WebView instance is rebuilt due to memory recycling, send a reconstruction mark to the H5 page when the H5 page is loaded using the new WebView instance, so as to inform the H5 page that it is currently in a reconstruction loading state through the reconstruction mark;
[0014] The H5 page is also used to read the JavaScript state data of the H5 page from the local storage if a reconstruction mark is detected before the H5 page is loaded using the new WebView instance and the view is restored and rendered using the JavaScript state data, so that the H5 page is restored to the visual state before the WebView instance is rebuilt.
[0015] The page state recovery method and system provided in the present application send a notification message to the H5 page after the client uses the initial WebView to load the H5 page and before the initial WebView is recycled by the system memory, and after the H5 page receives the notification message, the JavaScript state data of the H5 page is saved locally. Then, after the client detects that a new WebView instance is rebuilt due to memory recycling, when the H5 page is loaded using the new WebView instance, a reconstruction mark is sent to the H5 page to inform the H5 page that it is currently in a reconstruction loading state through the reconstruction mark. Finally, before the H5 page uses the new WebView instance to load the H5 page and render the page view, if a reconstruction mark is detected, the JavaScript state data of the H5 page is read from the local storage, and the JavaScript state data is used for view recovery rendering, so that the H5 page is restored to the visual state before the WebView instance is rebuilt. In this way, by selectively saving JavaScript state data when the page state changes, and adding a reconstruction mark when memory is recycled and reloaded, after the operating system recycles the WebView memory and rebuilds the WebView, when the reconstruction mark is detected, the visual state before reconstruction is restored based on the saved JavaScript state data, avoiding the problem that the H5 page state cannot be restored after the operating system recycles the memory and rebuilds the new WebView to load the H5 page, thereby ensuring the consistency of the visual state before and after the page is rebuilt. BRIEF DESCRIPTION OF THE DRAWINGS
[0016] Figure 1 A flowchart of a first embodiment of a page status recovery method provided by the present application;
[0017] Figure 2 This is a schematic diagram of restoring a visual state according to an exemplary embodiment of the present application;
[0018] Figure 3 A flowchart of a second embodiment of the page status recovery method provided by the present application;
[0019] Figure 4 A schematic diagram of restoring a page response state according to an exemplary embodiment of the present application;
[0020] Figure 5 This is a schematic diagram of the interaction between the client and the H5 page, showing an exemplary embodiment of the present application. DETAILED DESCRIPTION
[0021] Here, exemplary embodiments are described in detail, and examples thereof are shown in the accompanying drawings. When the following description refers to the drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The implementations described in the following exemplary embodiments do not represent all implementations consistent with the present application.
[0022] The terms used in this application are only for the purpose of describing specific embodiments and are not intended to limit this application. The singular forms of "a", "said" and "the" used in this application are also intended to include plural forms, unless the context clearly indicates other meanings. It should also be understood that the term "and / or" used in this article refers to and includes any or all possible combinations of one or more associated listed items.
[0023] It should be understood that although the terms first, second, third, etc. may be used in the present application to describe various information, these information should not be limited to these terms. These terms are only used to distinguish the same type of information from each other. For example, without departing from the scope of the present application, the first information may also be referred to as the second information, and similarly, the second information may also be referred to as the first information. Depending on the context, the word "if" as used herein may be interpreted as "at the time of" or "when" or "in response to determining".
[0024] The present application provides a page state recovery method and system, which can ensure that after the WebView is rebuilt, the page is restored to its visual state before the reconstruction.
[0025] The page state recovery method and system provided in the present application send a notification message to the H5 page after the client uses the initial WebView to load the H5 page and before the initial WebView is recycled by the system memory, and after the H5 page receives the notification message, the JavaScript state data of the H5 page is saved locally. Then, after the client detects that a new WebView instance is rebuilt due to memory recycling, when the H5 page is loaded using the new WebView instance, a reconstruction mark is sent to the H5 page to inform the H5 page that it is currently in a reconstruction loading state through the reconstruction mark. Finally, before the H5 page uses the new WebView instance to load the H5 page and render the page view, if a reconstruction mark is detected, the JavaScript state data of the H5 page is read from the local storage, and the JavaScript state data is used for view recovery rendering, so that the H5 page is restored to the visual state before the WebView instance is rebuilt. In this way, by selectively saving JavaScript state data when the page state changes, and adding a reconstruction mark when memory is recycled and reloaded, after the operating system recycles the WebView memory and rebuilds the WebView, when the reconstruction mark is detected, the visual state before reconstruction is restored based on the saved JavaScript state data, avoiding the problem that the H5 page state cannot be restored after the operating system recycles the memory and rebuilds the new WebView to load the H5 page, thereby ensuring the consistency of the visual state before and after the page is rebuilt.
[0026] Specific embodiments are given below to introduce the technical solution of the present application in detail.
[0027] Figure 1 This is a flow chart of the first embodiment of the page status recovery method provided by this application. Please refer to Figure 1 The method provided in this embodiment is applied to a page status recovery system, the page status recovery system includes a client and an H5 page, and the method includes:
[0028] S101. After the client uses the initial WebView to load the H5 page, before the initial WebView is recycled by the system memory, the client sends a notification message to the H5 page.
[0029] It should be noted that when the client loads the H5 page, it will create an initial WebView, and then use the initial WebView to load the H5 page.
[0030] The following describes the scenario where the initial WebView is recycled by the system memory. Specifically, when the initial WebView is pushed onto the stack or switched to the background, the initial WebView is recycled by the system memory. In the specific implementation, the life cycle events provided by the system can be used (Android system can monitor the onPause event method of the Activity where the WebView is located, and iOS ...
[0031] ApplicationDidEnterBackground, UIApplicationDidEnterBackgroundNotification and other event notifications are used to determine whether the WebView is pushed or switched to the background.
[0032] It should be noted that when the initial WebView is pushed onto the stack by other pages or the application is switched to the background, the system reclaims memory, and the initial WebView where the current page is located is reclaimed by the system memory, resulting in the loss of page status data.
[0033] S102: After receiving the notification message, the H5 page saves the JavaScript status data of the H5 page locally.
[0034] Specifically, after receiving the notification message, the H5 page locally saves the JavaScript state data of the H5 page, so that when the page is reloaded, the visual state can be restored using the locally saved JavaScript state data.
[0035] In specific implementation, the JavaScript status data of the H5 page can be recorded through localStorage or other local storage methods. LocalStorage is a local storage mechanism that can keep the data persistent when the page is closed or the application is switched to the background.
[0036] S103. After detecting that a new WebView instance is rebuilt due to memory recycling, the client sends a reconstruction mark to the H5 page when using the new WebView instance to load the H5 page, so as to inform the H5 page that it is currently in a reconstruction loading state through the reconstruction mark.
[0037] It should be noted that after memory recycling occurs on the client, a new WebView instance will be re-established. In specific implementation, on the Android platform, you can monitor the onRenderProcessGone method provided by WebViewClient to detect memory recycling or rendering process crash and then rebuild a new WebView instance.
[0038] Furthermore, in a possible implementation, when it is detected that the initial WebView is to be rebuilt due to system recycling, the initial WebView is marked as a WebView recycled by the system.
[0039] Optionally, in one embodiment, a reconstruction mark can be sent to the H5 page via the URL of the H5 page or a registered JavaScript global variable.
[0040] Specifically, a parameter can be added to the URL to mark the H5 page as being in a memory recovery and reconstruction loading state. For example, in one embodiment, a parameter named reload=true can be added to the URL. In this way, when executing the JavaScript resource of the H5 page, the URL can be parsed to check whether the reload parameter exists, and the H5 page can be judged whether it is in a reconstruction loading state based on the parameter value. For another example, in another embodiment, the H5 page can be marked as being in a memory recovery and reconstruction loading state by registering a JavaScript global variable. In this way, when executing the JavaScript resource of the H5 page, it can be checked whether the window.isReload variable exists and the value is true to judge whether the H5 page is in a reconstruction loading state.
[0041] It should be noted that the rebuild tag is used to inform the H5 page that it is currently in the memory recovery and rebuild loading state. In this way, the H5 page can take corresponding actions to handle the reloading of the page.
[0042] S104. Before the H5 page is loaded by using the new WebView instance to render the page view, if a reconstruction mark is detected, the JavaScript state data of the H5 page is read from the local storage, and the JavaScript state data is used to perform view recovery rendering, so that the H5 page is restored to the visual state before the WebView instance is rebuilt.
[0043] It should be noted that the H5 page will detect the reconstruction mark before rendering the page view. If the reconstruction mark is detected, the view of the current H5 page will be rendered based on the JavaScript state data of the previously saved H5 page, so that the current H5 page can return to the visual state before the WebView instance was rebuilt.
[0044] Figure 2 This is a schematic diagram showing a method of restoring a visual state according to an exemplary embodiment of the present application. Figure 2When the user exits the App and successfully invokes a third-party payment, the user does not return to the App for a long time, triggering system memory recycling. At this time, through the method provided by this application, since the previously saved JavaScript state data is rendered, the H5 page can be restored to the visual state before the WebView instance was rebuilt.
[0045] The page state recovery rendering method provided in this implementation sends a notification message to the H5 page after the client uses the initial WebView to load the H5 page and before the initial WebView is recycled by the system memory. After the H5 page receives the notification message, the JavaScript state data of the H5 page is saved locally. Then, after the client detects that a new WebView instance is rebuilt due to memory recycling, when the H5 page is loaded using the new WebView instance, the client sends a reconstruction mark to the H5 page, so as to inform the H5 page that it is currently in a reconstruction loading state through the reconstruction mark. Finally, before the H5 page uses the new WebView instance to load the H5 page and render the page view, if the reconstruction mark is detected, the JavaScript state data of the H5 page is read from the local storage, and the JavaScript state data is used for view recovery rendering, so that the H5 page is restored to the visual state before the WebView instance is rebuilt. In this way, by selectively saving JavaScript state data when the page state changes, and adding a reconstruction mark when memory is recycled and reloaded, after the operating system recycles the WebView memory and rebuilds the WebView, when the reconstruction mark is detected, the visual state before reconstruction is restored based on the saved JavaScript state data, avoiding the problem that the H5 page state cannot be restored after the operating system recycles the memory and rebuilds the new WebView to load the H5 page, thereby ensuring the consistency of the visual state before and after the page is rebuilt.
[0046] It should be noted that in actual applications, in order to better improve the user experience, in addition to ensuring the consistency of the visual state of the H5 page before and after reconstruction, the responsiveness of the H5 page can also be restored to achieve the purpose of consistency of the page display state and logical coherence before and after reconstruction. This is explained below.
[0047] Figure 3 This is a flow chart of the second embodiment of the page status recovery method provided by this application. Please refer to Figure 3 , based on the above embodiment, the method includes:
[0048] S301. Before calling the asynchronous bridging operation to execute the asynchronous task, the H5 page establishes a correspondence between the identifier of the callback function of each asynchronous task and the callback method.
[0049] It should be noted that in the H5 page, JavaScript is used to call the asynchronous bridge operation provided by the client to execute an asynchronous task (the asynchronous task is a client asynchronous task). This asynchronous task usually refers to a method or operation in the client native code, such as sending a network request, obtaining device information, etc. The H5 page requests the client to execute the corresponding asynchronous task by calling the asynchronous bridge operation.
[0050] Specifically, before the H5 page calls the bridge operation to execute the asynchronous task, the H5 page will pre-create the identifiers of the callback functions of each asynchronous task and the callback methods corresponding to each identifier. Furthermore, the corresponding relationship between the identifiers of the callback functions of each asynchronous task and the callback methods will be established. For example, in an exemplary embodiment, for asynchronous task 1, the identifier of the callback function created is CallbackID_1, and the corresponding callback method is function cb_1(){...}; for another example, in another exemplary embodiment, for asynchronous task 2, the identifier of the callback function created is CallbackID_2, and the corresponding callback method is function cb_2(){...}; for another example, in another exemplary embodiment, for asynchronous task n, the identifier of the callback function created is CallbackID_n, and the corresponding callback method is function cb_n(){...}.
[0051] Furthermore, in combination with the above example, at this time, the correspondence between the identifier of the callback function of each asynchronous task and the callback method is as follows:
[0052] CallbackID_1-function cb_1(){...}; CallbackID_2-function cb_2(){...}; CallbackID_n-function cb_n(){...}.
[0053] It should be noted that when the H5 page calls the asynchronous bridging operation to execute an asynchronous task, it will send the call information corresponding to each asynchronous task to the client. The call information may include the callback function identifier CallbackID, the task type ActionType and other parameters.
[0054] Furthermore, when the client receives the call information corresponding to each asynchronous task, it can execute the corresponding asynchronous task according to the value of the task type ActionType. In addition, each asynchronous task is also associated with the identifier CallbackID of the callback function. For each asynchronous task, the client will record the corresponding relationship between the identifier of the callback function in the call information corresponding to the asynchronous task and the execution result. For example, in one embodiment, the corresponding relationship between the identifier of the callback function and the execution result recorded by the client is as follows: CallbackID_1-null, CallbackID_2-Result2, CallbackID_n-Resultn.
[0055] Furthermore, after the execution is completed, the client will call back the execution result to the H5 page through the CallbackID, thereby instructing the H5 page to execute the callback method corresponding to the CallbackID. For example, in one embodiment, after the asynchronous task n is executed, CallbackID_n-Resultn is returned to the H5 page, and the H5 page executes the callback method functioncb_n(){...} corresponding to CallbackID_n.
[0056] Referring to the previous description, it can be understood that the callback method will be executed after the asynchronous task is completed to process the returned result or execute the corresponding logic.
[0057] S302: After detecting that a new WebView instance is rebuilt due to memory recycling, the client mounts the corresponding relationship between the identifiers of the callback functions of each asynchronous task before rebuilding the WebView instance and the execution results to the new WebView instance.
[0058] In a specific implementation, a data structure may be defined to mount the corresponding relationship between the identifier of the callback function and the execution result of each asynchronous task before rebuilding the WebView instance to the new WebView instance. For example, in one embodiment, a Map structure is used to mount the corresponding relationship between the identifier of the callback function and the execution result to the new WebView instance.<CallbackID,Result> The structure is used to save the correspondence between the callback function identifier and the execution result.
[0059] S303: After the H5 page uses the JavaScript state data to perform view recovery rendering, the H5 page obtains the corresponding relationship between the identifier of the callback function of each asynchronous task and the execution result from the client.
[0060] Specifically, after the H5 page uses the JavaScript state data to restore the view, it will further obtain the Map from the client.<CallbackID,Result> , for subsequent behavioral recovery.
[0061] Furthermore, the client can return the corresponding relationship between the identifier of each asynchronous task callback function and the execution result to the H5 page in the form of a string. For example, in combination with the above example, the client returns the following data to the H5 page: {CallbackID_1 = null, CallbackID_2 = Result2, CallbackID_n = Resultn}.
[0062] Among them, when the execution result is null, it means that there is no execution result, which means that the asynchronous task has not been completed (is being executed) and the callback method is not executed; when the execution result is Result, it means that the asynchronous task has been executed and there is an execution result.
[0063] S304, the H5 page reconstructs the executable callback method corresponding to the identifier according to the correspondence between the identifier of the callback function of each asynchronous task and the execution result, and the correspondence between the identifier of the callback function of each asynchronous task and the callback method.
[0064] It should be noted that when the client executes an asynchronous task, it will save the callback function identifier and the corresponding execution result of each asynchronous task, and when the H5 page calls the asynchronous bridge operation to execute the asynchronous task, it will save the correspondence between the identifier of each callback function and the actual callback method.
[0065] In this step, the H5 page can parse the identifiers in the correspondence between the identifiers of the callback functions of each asynchronous task and the execution results, and then, for the parsed identifiers, find the callback method corresponding to the parsed identifier from the correspondence between the identifiers of the callback functions of each asynchronous task and the callback method, and then reconstruct the callback method executable on the JavaScript side, that is, reconstruct the callback method corresponding to the parsed identifier.
[0066] Combined with the above example, for example, in one embodiment, the callback function identifier and the corresponding execution result of each asynchronous task saved by the client are: CallbackID_1 = null, CallbackID_2 = Result2, CallbackID_n = Resultn, and the corresponding relationship between the identifier of the callback function to be restored in the H5 page and the actual callback method is: CallbackID_1-function cb_1(){...}; CallbackID_2-function cb_2(){...}; CallbackID_n-function cb_n(){...}. At this time, the executable callback methods function cb_2(){...} and function cb_n(){...} are rebuilt.
[0067] S305. For each asynchronous task, the H5 page executes the callback method corresponding to the asynchronous task to restore the page response state when the execution status of the asynchronous task is completed and the callback method corresponding to the asynchronous task is not executed before the WebView instance is rebuilt.
[0068] Referring to the previous description, when the execution result is Result, it means that the asynchronous task has been completed. In this step, the completed corresponding relationship is first found from the corresponding relationship between the identifier of the callback function of each asynchronous task and the execution result, and then for the completed corresponding relationship, it is determined whether the callback method corresponding to the identifier of the callback function recorded in the corresponding relationship is executed before the WebView instance is rebuilt. If not, the callback method is executed immediately.
[0069] Combined with the above example, the corresponding relationship found includes: {CallbackID_2 = Result2, CallbackID_n = Resultn}. Further, the callback method function cb_n(){...} corresponding to CallbackID_n has been executed before the WebView instance is rebuilt. At this time, the callback method function cb_2(){...} corresponding to CallbackID_2 is executed.
[0070] It should be noted that when the client detects that the WebView instance is rebuilt due to memory recycling, by saving the correspondence between the identifiers and execution results of the callback functions of each asynchronous task that has not been completed before the reconstruction, and restoring the correspondence on the new WebView instance, it can be ensured that even if the WebView is rebuilt, the callback mechanism of the previous asynchronous task can still work normally. In this way, after the H5 page re-renders the state data, it obtains the above correspondence from the client, and then re-registers the executable callback method according to the correspondence and the previously established correspondence between the identifiers and callback methods of each asynchronous task. Then, for the asynchronous task that was not executed before the WebView was rebuilt, when the execution result of the asynchronous task is detected on the reloaded H5 page, its corresponding callback method is called to restore the response state of the page during the execution of the asynchronous task. In this way, it can ensure that the visual state and logical state of the H5 page before and after the WebView is rebuilt remain consistent, providing a good user experience.
[0071] Figure 4 This is a schematic diagram of a recovery page response state shown in an exemplary embodiment of the present application, please refer to Figure 4 It can be seen that after rebuilding the new WebView instance, the page response state before the reconstruction has been restored to achieve consistency in the page display state and logical coherence before and after the reconstruction.
[0072] For further information, please also refer to Figure 2 and Figure 4 When the user exits the App and successfully invokes a third-party payment, the system memory recycling is triggered if the user does not return to the App for a long time. The method provided in this application can ensure that the H5 page that is rebuilt after the App switches to the foreground normally displays the payment success status notification, that is, the consistency of the page display status before and after the reconstruction and the logical coherence can be achieved.
[0073] The page state recovery method provided in this embodiment executes the callback method of the client asynchronous task that occurred before reconstruction but was not executed immediately after reconstruction, so as to achieve the consistency of the page display state and the logical coherence before and after reconstruction, and can quickly restore the page response state, thereby improving the user experience and the coherence of business logic.
[0074] Figure 5 This is a schematic diagram of the interaction between the client and the H5 page, showing an exemplary embodiment of the present application. Figure 5 The interaction process between the client and the H5 page may include:
[0075] S501: The client creates an initial WebView.
[0076] S502: The client uses the initial WebView to load the H5 page.
[0077] S503. After loading is completed, H5 creates identifiers of callback functions and callback methods of each asynchronous task before calling the asynchronous bridge operation to execute the asynchronous task, and establishes a corresponding relationship between the identifiers of the callback functions of each asynchronous task and the callback methods.
[0078] S504, the H5 page sends the call information corresponding to each asynchronous task to the client to call the asynchronous bridge operation to execute each asynchronous task; wherein the call information corresponding to each asynchronous task includes the identifier of the callback function and the task type.
[0079] S505: The client executes the Task corresponding to the client according to the task type indicated by the call information corresponding to each asynchronous task, and records the corresponding relationship between the identifier of the callback function indicated by the call information and the execution result.
[0080] S506: Before the initial WebView is recycled by the system memory, the client sends a notification message to the H5 page.
[0081] S507, the H5 page locally saves the JavaScript status data of the H5 page.
[0082] S508: The client rebuilds a new WebView instance, and mounts the corresponding relationship between the identifiers and execution results of the callback functions of each asynchronous task before rebuilding the WebView instance to the new WebView instance.
[0083] S509: When the client uses the new WebView instance to load the H5 page, the client sends a reconstruction tag to the H5 page.
[0084] S510. Before the H5 page is rendered in the view, if a reconstruction mark is detected, the JavaScript state data of the H5 page is read from the local storage, and the view is restored and rendered using the JavaScript state data to restore the visual state.
[0085] S511. The H5 page obtains the corresponding relationship between the identifier of the callback function of each asynchronous task and the execution result from the client.
[0086] S512, H5 page reconstructs the executable callback method corresponding to the identifier according to the correspondence between the identifier of the callback function of each asynchronous task and the execution result, and the correspondence between the identifier of the callback function of each asynchronous task and the callback method.
[0087] S513, H5 page, for each asynchronous task, when the execution status of the asynchronous task is completed and the callback method corresponding to the asynchronous task is not executed before the WebView instance is rebuilt, execute the callback method corresponding to the asynchronous task to restore the page response status.
[0088] The specific implementation process and implementation principle of each step can be found in the description of the previous embodiment and will not be repeated here.
[0089] The method provided in this embodiment can ensure that after the WebView instance is rebuilt, the page can be restored to the visual state and response state before the reconstruction.
[0090] Corresponding to the aforementioned embodiment of a page state recovery method, the present application also provides an embodiment of a page state recovery system.
[0091] The system provided in this embodiment includes a client and an H5 page; wherein,
[0092] The client is used to send a notification message to the H5 page after the H5 page is loaded by the initial WebView and before the initial WebView is recycled by the system memory;
[0093] The H5 page is used to save the JavaScript status data of the H5 page locally after receiving the notification message;
[0094] The client is further configured to, after detecting that a new WebView instance is rebuilt due to memory recycling, send a reconstruction mark to the H5 page when the H5 page is loaded using the new WebView instance, so as to inform the H5 page that it is currently in a reconstruction loading state through the reconstruction mark;
[0095] The H5 page is also used to read the JavaScript state data of the H5 page from the local storage if a reconstruction mark is detected before the H5 page is loaded using the new WebView instance and the view is restored and rendered using the JavaScript state data, so that the H5 page is restored to the visual state before the WebView instance is rebuilt.
[0096] The system of this embodiment can be used to perform Figure 2 The steps, specific implementation principles and implementation processes of the method embodiment shown are similar and will not be repeated here.
[0097] Optionally, the H5 page is further used to establish a correspondence between the identifier of the callback function of each asynchronous task and the callback method before calling the asynchronous bridging operation to execute the asynchronous task;
[0098] The client is further configured to mount the corresponding relationship between the identifiers of the callback functions of each asynchronous task before rebuilding the WebView instance and the execution results to the new WebView instance after detecting that the new WebView instance is rebuilt due to memory recycling;
[0099] The H5 page is further used to obtain the corresponding relationship between the identifier of the callback function of each asynchronous task and the execution result from the client after the view is restored and rendered using the JavaScript state data;
[0100] The H5 page is further used to register the executable callback method corresponding to the identifier according to the corresponding relationship between the identifier of the callback function of each asynchronous task and the execution result, and the corresponding relationship between the identifier of the callback function of each asynchronous task and the callback method;
[0101] The H5 page is also used to execute the callback method corresponding to each asynchronous task to restore the page response state when the execution status of the asynchronous task is completed and the callback method corresponding to the asynchronous task is not executed before the WebView instance is rebuilt.
[0102] Optionally, the client is further used to send a reconstruction mark to the H5 page via the URL of the H5 page or a registered JavaScript global variable.
[0103] Optionally, when the initial WebView is pushed onto the stack or switched to the background, the initial WebView is recycled by the system memory.
[0104] Optionally, the client is also specifically used to assemble the correspondence between the identifier of the callback function of each asynchronous task and the execution result into a WebView lost call event, and notify the H5 page of the WebView lost call event; wherein, when the WebView loads the H5 page, the H5 page will register the WebView lost call event, so that the H5 page can receive and respond to the WebView lost call event notification from the client.
[0105] The above description is only a preferred embodiment of the present application and is not intended to limit the present application. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present application shall be included in the scope of protection of the present application.
Claims
1. A page status recovery method, characterized in that: The page state recovery method is applied to a page state recovery system, the page state recovery system includes a client and an H5 page, and the method includes: After the client uses the initial WebView to load the H5 page, before the initial WebView is recycled by the system memory, the client sends a notification message to the H5 page; After receiving the notification message, the H5 page locally saves the JavaScript status data of the H5 page; After the client detects that a new WebView instance is rebuilt due to memory recycling, when the H5 page is loaded using the new WebView instance, a reconstruction mark is sent to the H5 page, so as to inform the H5 page that it is currently in a reconstruction loading state through the reconstruction mark; Before the H5 page is loaded by using the new WebView instance to render the page view, if a reconstruction mark is detected, the JavaScript state data of the H5 page is read from the local storage, and the JavaScript state data is used to perform view recovery rendering, so that the H5 page is restored to the visual state before the WebView instance was rebuilt.
2. The method according to claim 1, characterized in that The method further comprises: Before calling the asynchronous bridging operation to execute the asynchronous task, the H5 page establishes a correspondence between the identifier of the callback function of each asynchronous task and the callback method; After detecting that a new WebView instance is rebuilt due to memory recycling, the client mounts the corresponding relationship between the identifiers and execution results of the callback functions of each asynchronous task before rebuilding the WebView instance to the new WebView instance; After the H5 page uses the JavaScript state data to perform view recovery rendering, the H5 page obtains the corresponding relationship between the identifier of the callback function of each asynchronous task and the execution result from the client; The H5 page reconstructs the executable callback method corresponding to the identifier according to the corresponding relationship between the identifier of the callback function of each asynchronous task and the execution result, and the corresponding relationship between the identifier of the callback function of each asynchronous task and the callback method; For each asynchronous task, the H5 page executes the callback method corresponding to the asynchronous task to restore the page response state when the execution status of the asynchronous task is completed and the callback method corresponding to the asynchronous task is not executed before the WebView instance is rebuilt.
3. The method according to claim 1, characterized in that The sending of the reconstruction mark to the H5 page includes: A reconstruction tag is sent to the H5 page through the URL of the H5 page or a registered JavaScript global variable.
4. The method according to claim 1, characterized in that: When the initial WebView is pushed onto the stack or switched to the background, the initial WebView is recycled by the system memory.
5. The method according to claim 1, characterized in that The method further comprises: The client assembles the correspondence between the identifiers of the callback functions of each asynchronous task and the execution results into a WebView lost call event, and notifies the H5 page of the WebView lost call event; wherein, when the WebView loads the H5 page, the H5 page registers the WebView lost call event so that the H5 page can receive and respond to the WebView lost call event notification from the client.
6. A page status recovery system, characterized in that: The system includes a client and an H5 page; wherein, The client is used to send a notification message to the H5 page after the H5 page is loaded by the initial WebView and before the initial WebView is recycled by the system memory; The H5 page is used to save the JavaScript status data of the H5 page locally after receiving the notification message; The client is further configured to, after detecting that a new WebView instance is rebuilt due to memory recycling, send a reconstruction mark to the H5 page when the H5 page is loaded using the new WebView instance, so as to inform the H5 page that it is currently in a reconstruction loading state through the reconstruction mark; The H5 page is also used to read the JavaScript state data of the H5 page from the local storage if a reconstruction mark is detected before the H5 page is loaded using the new WebView instance and the view is restored and rendered using the JavaScript state data, so that the H5 page is restored to the visual state before the WebView instance is rebuilt.
7. The system according to claim 6, characterized in that The H5 page is also used to establish a correspondence between the identifier of the callback function of each asynchronous task and the callback method before calling the asynchronous bridge operation to execute the asynchronous task; The client is further configured to mount the corresponding relationship between the identifiers of the callback functions of each asynchronous task before rebuilding the WebView instance and the execution results to the new WebView instance after detecting that the new WebView instance is rebuilt due to memory recycling; The H5 page is further used to obtain the corresponding relationship between the identifier of the callback function of each asynchronous task and the execution result from the client after the view is restored and rendered using the JavaScript state data; The H5 page is further used to register the executable callback method corresponding to the identifier according to the corresponding relationship between the identifier of the callback function of each asynchronous task and the execution result, and the corresponding relationship between the identifier of the callback function of each asynchronous task and the callback method; The H5 page is also used to execute the callback method corresponding to each asynchronous task to restore the page response state when the execution status of the asynchronous task is completed and the callback method corresponding to the asynchronous task is not executed before the WebView instance is rebuilt.
8. The system according to claim 6, characterized in that The client is also used to send a reconstruction tag to the H5 page through the URL of the H5 page or a registered JavaScript global variable.
9. The system according to claim 6, characterized in that When the initial WebView is pushed onto the stack or switched to the background, the initial WebView is recycled by the system memory.
10. The system according to claim 6, characterized in that The client is also specifically used to assemble the correspondence between the identifier of the callback function of each asynchronous task and the execution result into a WebView lost call event, and notify the H5 page of the WebView lost call event; wherein, when the WebView loads the H5 page, the H5 page will register the WebView lost call event so that the H5 page can receive and respond to the WebView lost call event notification from the client.