Webpage offline method and device

Abstract

The invention relates to a webpage offline method and device, in particular to the field of computer science, a site project is packaged by webpack and then corresponding static resources and a static resource dependency relationship file are uploaded to a static basic server, a service worker dependency package, an IndexedDB dependency package and a WebSocket dependency package are initialized, and a static resource dependency relationship file is uploaded to the static basic server; real-time two-way communication between the client side and the server side is achieved by using a WebSocket API to establish long connection with the server in a client side code, it is guaranteed that a user obtains latest content, the server side actively pushes latest version information of static resources to the connected client side through WebSocket, the number of network requests is reduced, the page loading speed is increased, and the user experience is improved. The method comprises the following steps: creating a Service Worker file, writing an interception request and an update record to IndexedDB cache logic, deploying a client code containing a Service Worker code to a production environment, monitoring the change of a network state by monitoring online time, and dividing the change into a normal state, a disconnection state and a recovery state.

Description

Technical Field

[0001] The present invention relates to the field of computer science, and more specifically, to a webpage offline method and device. Background Art

[0002] In the face of unstable network environments, the existing cache mechanism cannot fully meet the needs of users. As people rely more and more on the Internet in their daily lives, this problem becomes more and more prominent. Users often encounter abnormally poor network connections in areas with unstable signals, such as highways, subway tunnels, and corridor corners, which makes it impossible to access web pages or operate applications normally.

[0003] The current mainstream caching mechanism mainly targets static resources, including JavaScript files, CSS files, HTML files, font files and images, which are cached through browser network protocols or service workers to improve page loading speed and user experience. However, the existing implementation methods for dynamic resources fail to achieve effective caching, including interface requests and various returned data, resulting in users still facing access difficulties and poor operation in an unstable network environment. Summary of the invention

[0004] The present invention aims at the technical problems existing in the prior art and provides a method and device for offline webpage conversion, so as to solve the problems raised in the above-mentioned background technology.

[0005] The technical solution of the present invention to solve the above technical problem is as follows: A webpage offline method comprises the following steps:

[0006] S101. In the site resource preparation phase, the site project is packaged using webpack and the corresponding static resources and static resource dependency files are uploaded to the static base server. In the site dependency library preparation phase, the servi ce worker dependency package, IndexedDB dependency package, and WebSockets dependency package are initialized;

[0007] S102. Real-time two-way communication between the client and the server is achieved by using the WebSocket API in the client code to establish a long connection with the server. The server actively pushes the latest version information of the static resource to the client that has established the connection using WebSocket, and uses the latest version information of the static resource to forcibly update and replace the version information of the corresponding static resource in the local cache;

[0008] S103. Create a Service Worker file and write interception requests and update records to the IndexedDB cache logic, listen to the fetch event in the Service Worker and intercept the request in the event handler and check whether the corresponding data exists in the cache, and deploy the client code containing the Service Worker code to the production environment;

[0009] S104. By monitoring the on li ne time to monitor changes in network status, and divided into normal state, disconnected state and recovery state, disconnected through the network and then restored, recorded user operation information and request interface update service database;

[0010] S105. Use JavaScript and the navigator.online property to monitor changes in network status according to the returned results, and call static, dynamic update and forced cache steps to optimize and interact with the fallback mechanism according to the importance of the page and user needs;

[0011] In a preferred embodiment, in S101, Webpack is used to package the project and generate static resource files in the site resource preparation stage. The generated static resource file name specified by the Webpack configuration item includes the version information of this packaging. The static resource dependency file is generated during the packaging process by the Webpack plug-in. The static resource file and the static resource dependency file are uploaded to the designated directory of the static basic server through the FTP tool and ensured to be publicly accessible. The access configuration for the static resource file is added through the site configuration part of the Ngi nx configuration file.

[0012] Furthermore, in the site dependency library preparation stage, the service worker dependency package, the IndexedDB dependency package and the WebSockets dependency package are initialized. The service worker dependency package is initialized to configure and register the Service Worker in the project, and the Workbox dependency package is installed using npm. The logical instructions of request interception and caching strategy are processed by writing Service Worker scripts. The IndexedDB dependency package is initialized to initialize the IndexedDB database, create object storage space, and read and write data by editing logic. The WebSockets dependency package is initialized to directly use the browser's native WebSocket API and write the logic of the WebSocket connection.

[0013] In a preferred embodiment, in S102, real-time two-way communication between the client and the server is achieved by using the WebSocket API in the client code to establish a long connection with the server. The update status of static resources is monitored by the server. The server actively pushes the latest version information of static resources to the client with which the connection has been established using WebSocket. The client receives the latest version information of static resources from the server through WebSocket and parses the information content, and triggers the update logic of reloading specific static resource files, and uses the latest version information of static resources to force the update and replacement of the version information of the corresponding static resources in the local cache.

[0014] Furthermore, the server-side code containing the WebSocket notification logic is packaged and uploaded to the server in the production environment, the WebSocket connection parameters are configured, Prometheus is deployed to monitor the performance of the WebSocket connection and set monitoring indicators, corresponding alarm rules are set according to the monitoring indicators, and relevant personnel are notified in time when the WebSocket connection is abnormal or the performance degrades, and the server-side code is configured to generate detailed WebSocket connection logs.

[0015] In a preferred embodiment, the S103 creates a Service Worker file and writes interception requests and update records to the IndexedDB cache logic, listens to fetch events in the Service Worker and intercepts requests in the event handler and checks whether corresponding data exists in the cache, creates an IndexedDB database in the client code to store historical data and calculation results through the interface, designs the database structure, including storing request URLs, request parameters, and response data, uses the Service Worker to perform mean calculations on the interface historical data stored in the IndexedDB, and deploys the client code containing the Service Worker code to the production environment.

[0016] In a preferred embodiment, in S104, the changes in network status are monitored by monitoring the on line time, and the status is divided into normal status, disconnected status and recovered status, wherein the normal network status intercepts the user's request and stores the request conditions and returned content in the client local cache according to the Cache API, and checks whether the local cache has corresponding data before responding during the interception process, wherein the disconnected network status intercepts the user's request and reads the local cache data according to the request conditions by calling the cache, wherein the network recovery status automatically pulls the remote service content and updates the local cache according to the user operation record, and at the same time initiates the corresponding user operation request to the server to obtain the updated data.

[0017] In a preferred embodiment, in S105, JavaScript is used to monitor changes in network status based on the returned results through the navigator.online attribute, and an event listener for the network status is set when the page is loaded. When the monitored network connection is disconnected, the offline mode operation is triggered, and static, dynamic update and forced cache steps are called according to the importance of the page and user needs to optimize and interact with the fallback mechanism.

[0018] The present application also proposes a web page offline device, including: Service Worker, IndexedDB and Cache API, wherein Service Worker is used to process scripts for network requests to intercept network requests and respond to cached data or request data from the server, IndexedDB is used to provide database operations on the client and allow web applications to store and retrieve data, and supports efficient index queries, and Cache API is used to perform cache control on the client side for network requests and responses.

[0019] The beneficial effects of the present invention are as follows: by including version information in the static resource file name and recording the dependency and version information between each static resource file in the static resource dependency file, it is ensured that the client can identify the latest version of the static resource and timely update the local cache, so as to ensure that the user obtains the latest content; by using Webpack for packaging, multiple resource files can be merged into a smaller number of files, the number of network requests can be reduced, and the page loading speed can be improved; by initializing service worker, IndexedDB and WebSockets, offline access support and real-time communication functions are added to the website; by using WebSocket to establish a long connection, real-time two-way communication between the client and the server is realized, data and information are transmitted in real time, a more instant and efficient communication method is provided and the user experience is improved, and automatic update and replacement of static resources is realized; wherein the long connection method can actively notify the user end to update the static resources each time the static resources of the site are updated, so as to achieve the purpose of saving resources and improving the user experience; by deploying Prometheus to monitor the performance of the WebSocket connection, connection anomalies and performance degradation can be discovered in time; by intercepting requests through Service Worker and checking the IndexedDB cache, offline support for historical data is realized; Worker intercepts requests and returns cached data to speed up data response. It creates an IndexedDB database to aggregate data and returns it to the client, implements fault handling and automatic data synchronization, and uses service worker plus indexDB user-side database to dynamically record user operation records, allowing users to continue using the site in weak or disconnected network conditions, giving users a better experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] Figure 1 is a flow chart of the method of the present invention; DETAILED DESCRIPTION

[0021] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of this application.

[0022] In the description of this application, the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features. In the description of this application, "plurality" means two or more, unless otherwise clearly and specifically defined.

[0023] In the description of the present application, the term "for example" is used to mean "used as an example, illustration or description". Any embodiment described as "for example" in the present application is not necessarily to be construed as being more preferred or advantageous than other embodiments. The following description is given to enable any technician in the field to implement and use the present invention. In the following description, details are listed for the purpose of explanation. It should be understood that a person of ordinary skill in the art can recognize that the present invention can be implemented without using these specific details. In other examples, well-known structures and processes will not be elaborated in detail to avoid unnecessary details to obscure the description of the present invention. Therefore, the present invention is not intended to be limited to the embodiments shown, but is consistent with the widest scope consistent with the principles and features disclosed in the present application.

[0024] This embodiment provides Figure 1 A webpage offline method is shown, which specifically includes the following steps:

[0025] S101. In the site resource preparation phase, the site project is packaged using webpack and the corresponding static resources and static resource dependency files are uploaded to the static base server. In the site dependency library preparation phase, the servi ce worker dependency package, IndexedDB dependency package, and WebSockets dependency package are initialized;

[0026] Furthermore, in the site resource preparation stage, Webpack is used to package the project and generate static resource files, including JavaScript, CSS and images. The static resource file name generated by the Webpack configuration item specifies that it contains the version information of this packaging, where the version information includes the build timestamp, build number and version identifier, which is used for the client to identify and update the local cache after receiving the latest version information. The Webpack plug-in generates a static resource dependency file in the packaging process, which records the dependencies between each static resource file and its own version information. The static resource files and the static resource dependency files are uploaded to the specified directory of the static basic server through the FTP tool and ensure that they are publicly accessible. The access configuration for the static resource files is added through the site configuration part of the Ngi nx configuration file to correctly map the URL of the static resource files.

[0027] Furthermore, in the site dependency library preparation stage, the service worker dependency package, the IndexedDB dependency package and the WebSockets dependency package are initialized, wherein the service worker dependency package is initialized to configure and register the Service Worker in the project, and the Workbox dependency package is installed using npm. The logical instructions of request interception and caching strategy are processed by writing Service Worker scripts. The IndexedDB dependency package is initialized to initialize the IndexedDB database, create object storage space, and read and write data by editing logic. The WebSockets dependency package is initialized to directly use the browser's native WebSocket API and write the logic of the WebSocket connection, including establishing a connection, sending data, and receiving data.

[0028] S102. Real-time two-way communication between the client and the server is achieved by using the WebSocket API in the client code to establish a long connection with the server. The server actively pushes the latest version information of the static resource to the client that has established the connection using WebSocket, and uses the latest version information of the static resource to forcibly update and replace the version information of the corresponding static resource in the local cache;

[0029] Furthermore, real-time two-way communication between the client and the server is achieved by using the WebSocket API in the client code to establish a long connection with the server. The server monitors the update status of static resources, including JavaScript, CSS, and images. When the static resources are updated, the server prepares the updated information and waits to push it to the client. The server uses WebSocket to actively push the latest version information of the static resources to the client with which the connection has been established, including the name, version number, and update time of the static resources. The client receives the latest version information of the static resources from the server through WebSocket and parses the information content, and triggers the update logic of reloading specific static resource files. The latest version information of the static resources is used to force the update and replacement of the version information of the corresponding static resources in the local cache.

[0030] Furthermore, the server-side code containing the WebSocket notification logic is packaged and uploaded to the server in the production environment. The WebSocket connection parameters are configured, including the connection address, port, and security settings to ensure that the WebSocket connection passes through existing firewalls and proxies. Prometheus is deployed to monitor the performance of the WebSocket connection and set monitoring indicators, including the number of connections, message transmission delay, and the number of abnormal disconnections. The corresponding alarm rules are set according to the monitoring indicators. When the WebSocket connection is abnormal and the performance degrades, the relevant personnel are notified in time. The server-side code is configured to generate detailed WebSocket connection logs, including connection establishment, message transmission, and disconnection and reconnection.

[0031] S103. Create a Service Worker file and write interception requests and update records to the IndexedDB cache logic, listen to the fetch event in the Service Worker and intercept the request in the event handler and check whether the corresponding data exists in the cache, and deploy the client code containing the Service Worker code to the production environment;

[0032] Furthermore, a Service Worker file is created and the interception request and update record are written to the IndexedDB cache logic. The fetch event is listened to in the Service Worker and the request is intercepted in the event handler to check whether the corresponding data exists in the cache. If the corresponding data does not exist, a request is initiated to the server and the response data is stored in the IndexedDB cache. When there is a new interface request, the Service Worker checks whether the corresponding data exists in the IndexedDB cache. If the corresponding data exists, the cached data is directly returned, otherwise a request is initiated to the server and the response data is stored in the IndexedDB cache. An IndexedDB database is created in the client code to store historical data and calculation results through the interface. The database structure is designed, including storing request URLs, request parameters, and response data. The Service Worker is used to perform mean calculation on the interface historical data stored in the IndexedDB to obtain the return value of the data and return it to the client after aggregation operations. The client code containing the Service Worker code is deployed to the production environment.

[0033] S104. By monitoring the on li ne time to monitor changes in network status, and divided into normal state, disconnected state and recovery state, disconnected through the network and then restored, recorded user operation information and request interface update service database;

[0034] Furthermore, by monitoring the on line time, changes in network status are monitored and divided into normal status, disconnected status and recovery status. In the normal network status, user requests are intercepted and the request conditions and returned content are stored in the client local cache according to the Cache API. During the interception process, before responding, a check is made as to whether the local cache has corresponding data. If so, the cached data is directly returned; otherwise, a request is initiated to the server, and the response data is stored in the client local cache. In the disconnected network status, user requests are intercepted and the local cache data is read according to the request conditions by calling the cache. When a cache call error occurs, the user operation is recorded and stored in the local cache. In the recovery network status, remote service content is automatically pulled according to the user operation record and the local cache is updated. At the same time, a request corresponding to the user operation is initiated to the server to obtain updated data.

[0035] S105. Use JavaScript and the navigator.online property to monitor changes in network status according to the returned results, and call static, dynamic update and forced cache steps to optimize and interact with the fallback mechanism according to the importance of the page and user needs;

[0036] Furthermore, JavaScript is used to monitor changes in network status based on the returned results through the navigator.online property, and an event listener for the network status is set when the page is loaded. When the network connection is detected to be disconnected, offline mode operations are triggered, including hiding some network-supported functions and displaying prompt information to inform users that they are currently offline. Static, dynamic update and forced caching steps are called according to the importance of the page and user needs to optimize and interact with the fallback mechanism.

[0037] An embodiment of the present invention also provides a web page offline method device, including: Service Worker, IndexedDB and Cache API, wherein Service Worker is used to process the script of network requests to intercept network requests and respond to cached data or request data from the server, IndexedDB is used to provide database operations on the client and allow web applications to store and retrieve data, and support efficient index queries, and Cache API is used to cache network requests and responses on the client.

[0038] It should be noted that in the above embodiments, the description of each embodiment has its own emphasis, and for parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0039] Those skilled in the art will appreciate that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0040] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded computer, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0041] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0042] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0043] Although the preferred embodiments of the present invention have been described, those skilled in the art may make other changes and modifications to these embodiments once they have learned the basic creative concept. Therefore, the appended claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present invention.

[0044] Obviously, those skilled in the art can make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if these modifications and variations of the present invention fall within the scope of the claims of the present invention and their equivalents, the present invention is also intended to include these modifications and variations.

Claims

1. A webpage offline method, characterized in that: The specific steps include: S101. In the site resource preparation stage, the site project is packaged using webpack and the corresponding static resources and static resource dependency files are uploaded to the static basic server. In the site dependency library preparation stage, the service worker dependency package, IndexedDB dependency package, and WebSockets dependency package are initialized; S102. Real-time two-way communication between the client and the server is achieved by using the WebSocket API in the client code to establish a long connection with the server. The server actively pushes the latest version information of the static resource to the client that has established the connection using WebSocket, and uses the latest version information of the static resource to forcibly update and replace the version information of the corresponding static resource in the local cache; S103. Create a Service Worker file and write interception requests and update records to the IndexedDB cache logic, listen to the fetch event in the Service Worker and intercept the request in the event handler and check whether the corresponding data exists in the cache, and deploy the client code containing the Service Worker code to the production environment; S104 monitors changes in network status by monitoring online time, and is divided into normal state, disconnected state and recovery state, disconnects from the network and then recovers, records user operation information and requests the interface to update the service database; S105. Use JavaScript and the navigator.online property to monitor changes in network status according to the returned results, and call static, dynamic update and forced cache steps according to page importance and user needs to optimize and interact with the fallback mechanism.

2. A webpage offline method according to claim 1, characterized in that: In S101, Webpack is used to package the project and generate static resource files in the site resource preparation stage. The generated static resource file name specified by the Webpack configuration item includes the version information of this packaging, and the static resource dependency file is generated during the packaging process through the Webpack plug-in.

3. A webpage offline method according to claim 1, characterized in that: In S101, the service worker dependency package is initialized to configure and register the Service Worker in the project, and the logical instructions of request interception and caching strategy are processed by writing the Service Worker script. The IndexedDB dependency package is initialized to initialize the IndexedDB database, create object storage space, and read and write data by editing the logic. The WebSockets dependency package is initialized to directly use the browser's native WebSocket API and write the logic of the WebSocket connection.

4. A webpage offline method according to claim 1, characterized in that: In S102, the client code uses the WebSocket API to establish a long connection with the server to achieve real-time two-way communication between the client and the server. The server monitors the update status of static resources. The server uses WebSocket to actively push the latest version information of static resources to the client with which the connection has been established. The client receives the latest version information of static resources from the server through WebSocket and parses the information content, and uses the latest version information of static resources to forcefully update and replace the version information of the corresponding static resources in the local cache.

5. A webpage offline method according to claim 1, characterized in that: In S102, the server-side code including the WebSocket notification logic is packaged and uploaded to the server in the production environment, the WebSocket connection parameters are configured, and Prometheus is deployed to monitor the performance of the WebSocket connection and set monitoring indicators.

6. A webpage offline method according to claim 1, characterized in that: The S103 creates a ServiceWorker file and writes interception requests and update records into the IndexedDB cache logic, creates an IndexedDB database in the client code to store historical data and calculation results through the interface, designs the database structure, and deploys the client code including the ServiceWorker code to the production environment.

7. A webpage offline method according to claim 1, characterized in that: In S104, the change of the network status is monitored by monitoring the online time, and is divided into a normal state, a disconnected state and a restored state.

8. A webpage offline method according to claim 7, characterized in that: In the normal network state, user requests are intercepted and the request conditions and returned content are stored in the client's local cache according to the Cache API. During the interception process, the local cache is checked for corresponding data before the response. In the network disconnected state, user requests are intercepted and the local cache data is read according to the request conditions by calling the cache. In the network recovery state, remote service content is automatically pulled according to the user operation record and the local cache is updated. At the same time, a request corresponding to the user operation is initiated to the server to obtain updated data.

9. A webpage offline method according to claim 1, characterized in that: In S105, JavaScript is used to monitor changes in network status according to the returned results through the navigator.online attribute, and an event listener for the network status is set when the page is loaded. Static, dynamic update and forced cache steps are called according to the importance of the page and user needs to optimize and interact with the fallback mechanism.

10. A webpage offline device, characterized in that: The device includes: Service Worker, IndexedDB and Cache API, execute instructions in Service Worker, IndexedDB and Cache API to implement a web page offline method according to any one of claims 1-9.

Images