Front-end dynamic offline method and device, equipment, storage medium and program product

Abstract

The invention discloses a front-end dynamic offline method and device, equipment, a storage medium and a program product, and relates to the technical field of front ends. According to the scheme, when a front-end application is loaded, if a preset offline cache unit is not supported, a compatible offline cache unit is set as a final offline cache unit; if the preset offline cache unit is supported, setting the preset offline cache unit as a final offline cache unit; if the current network state is switched from the on-line state to the off-line state, using a final off-line cache unit to store data generated in the off-line state, and in response to a user trigger operation, displaying off-line data corresponding to the user trigger operation stored in the final off-line cache unit; and if the current network state is recovered from the offline state to the online state, synchronizing data generated in the offline state to a back-end server. According to the method, the multi-browser compatibility of the front-end offline cache can be improved on the premise of not damaging the original logic and code structure.

Description

Technical Field

[0001] The present invention relates to the field of front-end technology, and more specifically, to a front-end dynamic offline method, device, equipment, storage medium and program product. Background Art

[0002] With the rapid development of mobile Internet, the scale of mobile Internet users is also growing rapidly. Web front-end applications are facing more and more offline usage scenarios, such as outdoor travel and adventure, subways, tunnels, airplanes and other scenarios where network connections are unavailable or unstable. In addition, mobile Internet users have higher and higher expectations for applications. They not only hope to get a good user experience when online, but also hope that applications can provide corresponding functions when offline, such as reading, editing documents, playing games, mobile payments, location-based services, instant messaging, etc., to ensure the consistency and integrity of user experience. Therefore, front-end offline technology has become an important research direction in front-end development.

[0003] Chinese patent application No. 202280075622.3, application date 2024.06.25, discloses an automatic operation or automatic code generation of a service worker thread of a progressive web application (PWA), wherein the browser application includes a service worker thread API (Service Workers API), a cache API (Cache API), and a fetch API (Fetch API) to achieve publishing, searching, sharing, downloading, etc., and also allows users to create applications with rich query capabilities in both offline and online modes through IndexedDB. Although the patent provides a front-end offline solution, the solution is not compatible with browsers that do not support Service Workers and IndexedDB. Different browsers may have different support levels and implementation methods for offline technology, which may cause differences in user experience between different browsers and lead to user loss; in order to improve the compatibility of front-end offline technology, developers need to write separate code for different browsers or use different offline cache solutions, which will undoubtedly increase the workload of development and maintenance.

[0004] Therefore, there is an urgent need to provide a front-end dynamic offline solution that is compatible with multiple browsers without destroying the original logic and code structure. Summary of the invention

[0005] In view of this, the present invention provides a front-end dynamic offline method, device, equipment, storage medium and program product, which can improve the multi-browser compatibility of the front-end offline cache.

[0006] In order to achieve the above object, the present invention adopts the following technical scheme:

[0007] In a first aspect, the present invention provides a front-end dynamic offline method, the method comprising:

[0008] When the front-end application is loaded, the front-end device checks whether the current browser supports the preset offline cache unit;

[0009] If the preset offline cache unit is not supported, the front-end device determines a compatible offline cache unit and sets the compatible offline cache unit as the final offline cache unit;

[0010] If the preset offline cache unit is supported, the front-end device sets the preset offline cache unit as the final offline cache unit;

[0011] The front-end device monitors the changes in the current network status;

[0012] If the change of the current network state is that the current network state switches from an online state to an offline state, the front-end device uses the final offline cache unit to store the data generated in the offline state, and in response to the user trigger operation, displays the offline data corresponding to the user trigger operation stored in the final offline cache unit;

[0013] If the current network status changes from offline to online, the front-end device synchronizes the data generated in the offline state to the back-end server, and obtains the latest data from the back-end server when the update conditions are met to update the offline data stored in the final offline cache unit.

[0014] The method provided by the present invention checks the browser compatibility by checking whether the browser loading the application supports the preset offline cache unit. If the browser does not support the preset offline cache technology, a compatible offline cache solution will be used without destroying the original logic and code structure, so that the user can still use the functions of the front-end application in an offline state, thereby improving the user experience; when the network is restored, the data generated in the offline state will be synchronized to the back-end server, and the latest data will be obtained to update the local cache when the conditions are met, thereby maintaining the consistency of the front-end data and the back-end server data. The present invention not only improves the consistency and integrity of the user experience, realizes compatibility under multiple systems, but also reduces the degree of dependence on the network, making the front-end application more robust and reliable.

[0015] In a possible implementation, the offline cache level of the compatible offline cache unit is lower than the offline cache level of the preset offline cache unit, and the current browser supports the compatible offline cache unit;

[0016] Among them, the offline cache level of the compatible offline cache unit is positively correlated with the offline cache capability of the compatible offline cache unit.

[0017] In a possible implementation, the method further includes:

[0018] If there are multiple compatible offline cache units, the compatible offline cache unit with the highest offline cache level is selected as the final offline cache unit.

[0019] In a possible implementation, when the update condition is met, obtaining the latest data from the backend server to update the offline data stored in the final offline cache unit includes:

[0020] In response to the automatic update instruction or the user update operation, the front-end device sends a data update request to the back-end server, receives the latest data returned by the back-end server, and updates the offline data stored in the final offline cache unit based on the latest data.

[0021] In a possible implementation, the front-end device uses the final offline cache unit to store data generated in an offline state, including:

[0022] The front-end device stores the data generated in the offline state in the final offline cache unit according to a preset storage method;

[0023] Among them, the preset storage method includes at least one of key-value pair storage, object storage and index storage.

[0024] In a possible implementation, the method further includes:

[0025] If the current network status switches from an online status to an offline status, the front-end device generates an offline status prompt message and displays the offline status prompt message on the user interface.

[0026] In a second aspect, the present invention provides a front-end dynamic offline device, which includes: a checking module, a first setting module, a second setting module, a monitoring module, an offline cache display module and an online synchronization update module; wherein,

[0027] A checking module, connected to the first setting module and the second setting module respectively, and used for the front-end device to check whether the current browser supports the preset offline cache unit when the front-end application is loaded;

[0028] A first setting module is connected to the checking module, the offline cache display module and the online synchronization update module respectively, and is used for the front-end device to determine a compatible offline cache unit if the preset offline cache unit is not supported, and set the compatible offline cache unit as the final offline cache unit;

[0029] A second setting module is connected to the checking module, the offline cache display module and the online synchronization update module respectively, and is used for the front-end device to set the preset offline cache unit as the final offline cache unit if the preset offline cache unit is supported;

[0030] The monitoring module is connected to the offline cache display module and the online synchronization update module respectively, and is used to monitor the changes in the current network status;

[0031] The offline cache display module is connected to the monitoring module, the first setting module and the second setting module respectively, and is used for, if the change of the current network state is that the current network state switches from the online state to the offline state, the front-end device uses the final offline cache unit to store the data generated in the offline state, and in response to the user trigger operation, displays the offline data corresponding to the user trigger operation stored in the final offline cache unit;

[0032] The online synchronization update module is connected to the monitoring module, the first setting module and the second setting module respectively, and is used for synchronizing the data generated in the offline state to the back-end server by the front-end device if the change of the current network state is that the current network state is restored from the offline state to the online state, and obtaining the latest data from the back-end server when the update conditions are met, so as to update the offline data stored in the final offline cache unit.

[0033] In a third aspect, the present invention provides a front-end device, comprising a processor and a memory; the memory stores a computer program or computer instructions that can be loaded by the processor and executed such as the front-end dynamic offline method of the first aspect and any possible implementation thereof.

[0034] In a fourth aspect, the present invention provides a computer-readable storage medium storing a computer program or computer instructions that can be loaded by a processor and executed by a front-end dynamic offline method such as the first aspect and any possible implementation thereof.

[0035] In a fifth aspect, the present invention provides a computer program product, including a computer program or computer instructions, which, when loaded and executed by a processor, implement the steps of the front-end dynamic offline method as in the first aspect and any possible implementation thereof.

[0036] For the specific description of the second to fifth aspects and their various implementations in the present invention, reference can be made to the detailed description in the first aspect and its various implementations; and for the beneficial effects of the second to fifth aspects and their various implementations, reference can be made to the analysis of the beneficial effects in the first aspect and its various implementations, which will not be repeated here. BRIEF DESCRIPTION OF THE DRAWINGS

[0037] The accompanying drawings, which are incorporated in and constitute a part of the specification, illustrate embodiments of the invention and, together with the description, serve to explain the principles of the invention.

[0038] Figure 1It is a flow chart of a front-end dynamic offline method according to an embodiment of the present invention;

[0039] Figure 2 It is another flow chart of a front-end dynamic offline method according to an embodiment of the present invention;

[0040] Figure 3 It is a flowchart of a specific application of a front-end dynamic offline method according to an embodiment of the present invention;

[0041] Figure 4 It is a block diagram of the internal structure of a front-end dynamic offline device according to an embodiment of the present invention;

[0042] Figure 5 It is a block diagram of the internal structure of a front-end device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0043] Various exemplary embodiments of the present invention will now be described in detail with reference to the accompanying drawings. It should be noted that the relative arrangement of components and steps, numerical expressions and numerical values ​​set forth in these embodiments do not limit the scope of the present invention unless otherwise specifically stated.

[0044] The following description of at least one exemplary embodiment is merely illustrative in nature and is in no way intended to limit the invention, its application, or uses.

[0045] Technologies, methods, and equipment known to ordinary technicians in the relevant art may not be discussed in detail, but where appropriate, the technologies, methods, and equipment should be considered part of the specification.

[0046] In all examples shown and discussed herein, any specific values ​​should be interpreted as merely exemplary and not limiting. Therefore, other examples of the exemplary embodiments may have different values.

[0047] In order to facilitate understanding of the technical solution of the present invention, the terms involved in the present invention are briefly introduced below.

[0048] 1. Front-end device: usually refers to the client device, that is, the user directly uses the device to access network services or applications. It is responsible for displaying web pages or application interfaces to users and providing user interaction functions.

[0049] 2. Backend server: refers to the server responsible for processing requests sent by the client (such as web browsers, mobile applications, etc.) in the server-client architecture.

[0050] 3. Service Worker: It is a background thread script that acts as a proxy server between web applications, browsers, and the network. It runs in the background, independent of the web page, and can control the network requests of the page, cache resources, and provide capabilities without a network connection; it adds resources to the cache through the Cache interface, processes network requests in the fetch event, and returns cached resources.

[0051] 4. IndexedDB: It is a client-side database used in the browser. It provides a way to store and retrieve large amounts of structured data. It supports transaction operations, can perform multiple database operations in one atomic operation, ensure data consistency, and supports indexes, which can be used for efficient data queries.

[0052] 5. localStorage: It is a web storage API that allows websites to store data in the user's browser. The data will be persisted until it is explicitly cleared.

[0053] 6. Key-value storage: It is a very basic data storage method, in which data is stored in the form of key (Key) and value (Value), where the key is a unique identifier used to retrieve the corresponding value.

[0054] 7. Object storage: It is a data storage method based on objects, where each object can contain data and related metadata, allowing developers to store and access data in a consistent manner without considering the internal structure of the data. It is usually provided by cloud service providers.

[0055] 8. Index storage: It is a data storage system with an index mechanism, which allows fast retrieval of data through indexes.

[0056] Embodiment 1:

[0057] The embodiment of the present invention provides a front-end dynamic offline method, the execution subject of which is a front-end device. Figure 1 , which is a flow chart of the front-end dynamic offline method provided by an embodiment of the present invention. Figure 1 As shown, the front-end dynamic offline method provided by the present invention mainly includes the following steps (steps S101 to S106):

[0058] Step S101, when the front-end application is loaded, the front-end device checks whether the current browser supports the preset offline cache unit;

[0059] Step S102: If the preset offline cache unit is not supported, the front-end device determines a compatible offline cache unit and sets the compatible offline cache unit as a final offline cache unit;

[0060] Step S103: If the preset offline cache unit is supported, the front-end device sets the preset offline cache unit as the final offline cache unit;

[0061] Step S104, the front-end device monitors the changes in the current network status;

[0062] Step S105: if the current network state changes from an online state to an offline state, the front-end device uses the final offline cache unit to store the data generated in the offline state, and in response to the user trigger operation, displays the offline data corresponding to the user trigger operation stored in the final offline cache unit;

[0063] Step S106, if the change of the current network status is that the current network status is restored from an offline state to an online state, the front-end device synchronizes the data generated in the offline state to the back-end server, and obtains the latest data from the back-end server when the update conditions are met to update the offline data stored in the final offline cache unit.

[0064] In the embodiment of the present invention, the browser compatibility is checked by checking whether the browser loading the application supports the preset offline cache unit. If the browser does not support the preset offline cache technology, a compatible offline cache solution will be used without destroying the original logic and code structure, so that the user can still use the functions of the front-end application in an offline state; when the network is restored, the data generated in the offline state will be synchronized to the back-end server, and the latest data will be obtained to update the local cache when the conditions are met, so as to maintain the consistency of the front-end data and the back-end server data. The present invention not only improves the consistency and integrity of the user experience, realizes the compatibility under multiple systems, but also reduces the dependence on the network, making the front-end application more robust and reliable.

[0065] Embodiment 2:

[0066] The embodiment of the present invention also provides a front-end dynamic offline method, the execution subject of which is a front-end device. Figure 2 , which is a flow chart of the front-end dynamic offline method provided by an embodiment of the present invention. Figure 2 As shown, the front-end dynamic offline method provided by the present invention mainly includes the following steps (steps S201 to S206):

[0067] Step S201, when the front-end application is loaded, the front-end device checks whether the current browser supports the preset offline cache unit;

[0068] Step S202: If the preset offline cache unit is not supported, the front-end device determines a compatible offline cache unit and sets the compatible offline cache unit as the final offline cache unit;

[0069] Step S203: If the preset offline cache unit is supported, the front-end device sets the preset offline cache unit as the final offline cache unit;

[0070] Step S204, the front-end device monitors the changes in the current network status;

[0071] Step S205: if the current network state changes from an online state to an offline state, the front-end device uses the final offline cache unit to store the data generated in the offline state, and in response to the user trigger operation, displays the offline data corresponding to the user trigger operation stored in the final offline cache unit;

[0072] Step S206, if the change in the current network status is that the current network status is restored from an offline state to an online state, the front-end device synchronizes the data generated in the offline state to the back-end server, and in response to the automatic update instruction or the user update operation, sends a data update request to the back-end server, receives the latest data returned by the back-end server, and updates the offline data stored in the final offline cache unit based on the latest data.

[0073] In step S206, the automatic update instruction can be a pre-set periodic instruction, allowing local data update in the network online mode. If the trigger time of the automatic update instruction is in the offline time period, the update is delayed and the data update is performed after the network is restored. The user update operation refers to the user sending a local data update request to the front-end device through an input device (such as a keyboard, touch screen button, etc.). Of course, this operation is also only allowed to be triggered when the network is online.

[0074] In some optional embodiments, the preset offline storage unit can be based on the Service Worker script and the Cache API. Since the Service Worker provides an independent background JS thread that can process offline resource requests and updates, it is a key technology for realizing dynamic offline in multiple systems.

[0075] Register the Service Worker in the main thread and specify the script file of the Service Worker. The Service Worker is loaded and executed in the background thread. When the installation is completed, the install event is triggered. In the install event processing function, the Cache API can be used to cache the resources required by the application. When the Service Worker is updated, the updatefound event is triggered, and then the install event is triggered on the new version of the Service Worker. Before the new version of the Service Worker is activated, the old version of the Service Worker will still process requests.

[0076] Monitor network status changes in Service Worker. When the network is disconnected, load offline data from IndexedDB and display it to the user. When the network is restored, the offline data can be synchronized to the server.

[0077] For offline data that needs to be stored persistently, you can use IndexedDB to store it. In other words, the preset offline storage unit is based on the Service Worker script and the Cache API combined with IndexedDB.

[0078] In this embodiment, the offline cache level of the compatible offline cache unit is generally lower than the offline cache level of the preset offline cache unit, and the current browser supports the compatible offline cache unit; wherein, the offline cache level of the compatible offline cache unit is positively correlated with the offline cache capability of the compatible offline cache unit, that is, the stronger the offline cache capability of the offline cache unit, the higher its offline cache level.

[0079] When the current browser does not support the preset offline cache unit, a downgrade process can be performed, that is, an offline cache unit with a lower offline cache capability is selected as a compatible offline cache unit.

[0080] Furthermore, if there are multiple compatible offline cache units to choose from, they can be selected from high to low according to the offline cache level, and the compatible offline cache unit with the highest offline cache level is preferentially selected as the final offline cache unit. Of course, multiple compatible offline cache units can also be selected for use in combination.

[0081] In some optional embodiments, when caching data generated in an offline state, it can be stored in a final offline cache unit according to a preset storage method; wherein the preset storage method includes at least one of key-value pair storage, object storage, and index storage.

[0082] The specific preset storage method can be set according to the specific application scenario. For example, when you need to quickly access simple data items, you can choose the key-value pair storage method; when you need to process a large amount of unstructured data, you can choose the object storage method; when you need to perform complex queries and fast retrieval, you can choose the index storage method.

[0083] In some optional embodiments, if the current network status switches from an online status to an offline status, offline status prompt information is generated and displayed on the user interface so that the user can understand the current network status and application status.

[0084] Embodiment three:

[0085] In actual applications, the above-mentioned embodiment 2 and the preferred embodiment can be integrated according to actual application requirements. In order to facilitate technical personnel in the field to understand how to implement the actual application and how to combine with the preferred embodiment, the above-mentioned front-end dynamic offline method is described in detail below with reference to specific scenarios as an example.

[0086] For the specific implementation process, please refer to Figure 3 , Figure 3 FIG. 1 is a schematic diagram of a specific application of a front-end dynamic offline method in an embodiment of the present invention. Figure 3 As shown, the method includes the following steps (steps S301 to S307):

[0087] Step S301, when the front-end application is loaded, the front-end device checks whether the current browser supports ServiceWorker and IndexedDB;

[0088] Step S302: If the current browser does not support Service Worker or IndexedDB, the front-end device sets LocalStorage or SessionStorage as the final offline cache unit;

[0089] Step S303: If the current browser supports Service Worker but does not support IndexedDB, the front-end device constructs a final offline cache unit based on the Service Worker script, Cache API, and Web SQL, or the Service Worker script, Cache API, and IndexedDB polyfill;

[0090] Step S304: If the current browser supports Service Worker and IndexedDB, the front-end device forms a final offline cache unit based on the Service Worker script, Cache API and IndexedDB;

[0091] Step S305, the front-end device monitors the change of the current network status;

[0092] Step S306: If the change of the current network state is that the current network state switches from an online state to an offline state, the front-end device uses the final offline cache unit to store the data generated in the offline state, and in response to the user trigger operation, displays the offline data corresponding to the user trigger operation stored in the final offline cache unit;

[0093] Step S307, if the change of the current network status is that the current network status is restored from an offline state to an online state, the front-end device synchronizes the data generated in the offline state to the back-end server, and obtains the latest data from the back-end server when the update conditions are met to update the offline data stored in the final offline cache unit.

[0094] In this embodiment, for browsers that support Service Worker, caching of offline data is achieved through Service Worker scripts in conjunction with Cache API; this mechanism provides developers with powerful offline caching capabilities, which helps to improve the performance and user experience of Web applications. For browsers that do not support Service Worker, localStorage, SessionStorage, etc. can be used as alternatives to implement simple offline cache processing. For browsers that do not support IndexedDB, Web SQL or IndexedDB polyfill can be used as a substitute. Then, based on front-end technologies such as Service Worker, Cache API, and IndexedDB, through steps such as registering Service Worker, caching offline resources, processing offline data, and being compatible with multiple system environments, the goal of efficiently and stably providing offline functions in a variety of system environments is achieved, which not only improves the consistency and integrity of the user experience, but also reduces the degree of dependence on the network, making the front-end application more robust and reliable.

[0095] It should be noted that in the above embodiments, the front-end device can be a mobile device, PC, smart phone, tablet computer, e-book reader, portable computer, smart TV or other terminal device with Internet access function, and this embodiment does not make specific limitations on this.

[0096] Embodiment 4:

[0097] Based on the same inventive concept, an embodiment of the present invention further provides a front-end dynamic offline device for implementing the front-end dynamic offline method involved above. The implementation scheme for solving the problem provided by the device is similar to the implementation scheme recorded in the above method, so the specific limitations in one or more front-end dynamic offline device embodiments provided below can refer to the limitations of the front-end dynamic offline method above, and will not be repeated here.

[0098] Figure 4 FIG. 4 shows a structural block diagram of a front-end dynamic offline device 400. Figure 4 As shown, the front-end dynamic offline device 400 includes: a checking module 401, a first setting module 402, a second setting module 403, a monitoring module 404, an offline cache display module 405 and an online synchronization update module 406; wherein,

[0099] The checking module 401 is connected to the first setting module 402 and the second setting module 403 respectively, and is used for the front-end device to check whether the current browser supports the preset offline cache unit when the front-end application is loaded;

[0100] The first setting module 402 is connected to the checking module 401, the offline cache display module 405 and the online synchronization update module 406 respectively, and is used for the front-end device to determine a compatible offline cache unit if the preset offline cache unit is not supported, and set the compatible offline cache unit as the final offline cache unit;

[0101] The second setting module 403 is connected to the checking module 401, the offline cache display module 405 and the online synchronization update module 406 respectively, and is used for the front-end device to set the preset offline cache unit as the final offline cache unit if the preset offline cache unit is supported;

[0102] The monitoring module 404 is connected to the offline cache display module 405 and the online synchronization update module 406 respectively, and is used to monitor the changes of the current network status;

[0103] The offline cache display module 405 is connected to the monitoring module 404, the first setting module 402 and the second setting module 403 respectively, and is used for, if the change of the current network state is that the current network state switches from the online state to the offline state, the front-end device uses the final offline cache unit to store the data generated in the offline state, and in response to the user trigger operation, displays the offline data corresponding to the user trigger operation stored in the final offline cache unit;

[0104] The online synchronization update module 406 is connected to the monitoring module 404, the first setting module 402 and the second setting module 403 respectively, and is used for synchronizing the data generated in the offline state to the back-end server by the front-end device if the change of the current network state is that the current network state is restored from the offline state to the online state, and obtaining the latest data from the back-end server when the update conditions are met, so as to update the offline data stored in the final offline cache unit.

[0105] In some optional embodiments, the offline cache level of the compatible offline cache unit is lower than the offline cache level of the preset offline cache unit, and the current browser supports the compatible offline cache unit; wherein the offline cache level is positively correlated with the offline cache capability of the offline cache unit.

[0106] As an optional implementation of this embodiment, the first setting module 402 is specifically configured to select a compatible offline cache unit with the highest offline cache level as the final offline cache unit if there are multiple compatible offline cache units.

[0107] In some optional embodiments, the online synchronization update module 406 is specifically used to send a data update request to the backend server in response to an automatic update instruction or a user update operation, receive the latest data returned by the backend server, and update the offline data stored in the final offline cache unit based on the latest data.

[0108] In some optional embodiments, the offline cache display module 404 is specifically used to store the data generated in the offline state into the final offline cache unit according to a preset storage method; wherein the preset storage method includes at least one of key-value pair storage, object storage and index storage.

[0109] In some optional embodiments, the offline cache display module 405 is further specifically configured to generate offline status prompt information if the current network status switches from an online status to an offline status, and display the offline status prompt information on the user interface.

[0110] It should be noted that the above-mentioned functional modules can be integrated together to form an independent unit, for example, integrated into a processing unit, or each module can exist physically separately, or two or more modules can be integrated to form an independent unit. The above-mentioned integrated unit can be implemented in the form of hardware or in the form of a software functional unit. If the function is implemented in the form of a software functional module and sold or used as an independent product, it can be stored in a computer-readable storage medium.

[0111] Embodiment five:

[0112] Based on the same inventive concept, the embodiment of the present invention further provides a front-end device 500, the internal structure of the front-end device 500 is as follows: Figure 5 The front-end device 500 includes a memory 501 , a processor 502 and a communication bus 503 ; the memory 501 and the processor 502 are connected via the communication bus 503 .

[0113] The memory 501 may be used to store instructions, programs, codes, code sets or instruction sets. The memory 501 may include a program storage area and a data storage area, wherein the program storage area may store instructions for implementing an operating system, instructions for at least one function, and instructions for implementing the front-end dynamic offline method provided in the above embodiment, etc.; the data storage area may store data involved in a front-end dynamic offline method provided in the above embodiment, etc.

[0114] The processor 502 may include one or more processing cores. The processor 502 executes various functions and processes data of the present invention by running or executing instructions, programs, code sets or instruction sets stored in the memory 501, calling the data stored in the memory 501. The processor 502 may be at least one of an application-specific integrated circuit (ASIC), a digital signal processor (DSP), a digital signal processing device (DSPD), a programmable logic device (PLD), a field programmable gate array (FPGA), a central processing unit (CPU), a controller, a microcontroller and a microprocessor. It is understandable that for different devices, the electronic device used to implement the above-mentioned processor function may also be other, and the embodiment of the present invention is not specifically limited.

[0115] The communication bus 503 may include a path to transmit information between the above components. The communication bus 503 may be a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus. The communication bus 503 may be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Figure 5 Only one double arrow is used in the diagram, but it does not mean that there is only one bus or one type of bus. Figure 5 The electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.

[0116] Those skilled in the art will understand that Figure 5 The structure shown in the figure is only a block diagram of a part of the structure related to the scheme of the present invention, and does not constitute a limitation on the front-end device to which the scheme of the present invention is applied. The specific front-end device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0117] In particular, according to an embodiment of the present invention, the process described in the above flowchart may be implemented as a computer software program.

[0118] The technical solution of the present invention, in essence, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product, and the computer software product is stored in a storage medium, that is, the embodiment of the present invention also provides a computer-readable storage medium, which includes a number of computer programs or computer instructions, which are used to enable an electronic device (which can be a personal computer, server or network device, etc.) or a processor to perform all or part of the steps of the methods of various embodiments of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory, random access memory, disk or optical disk, etc., various media that can store program codes.

[0119] An embodiment of the present invention includes a computer program product, which includes a computer program carried on a computer readable medium, the computer program including a computer program for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network, and / or installed from a removable medium. When the computer program is executed by a central processing unit (CPU), various functions defined in the present invention are performed.

[0120] Although some specific embodiments of the present invention have been described in detail by way of example, it will be appreciated by those skilled in the art that the above examples are for illustration only and are not intended to limit the scope of the present invention. It will be appreciated by those skilled in the art that the above embodiments may be modified without departing from the scope and spirit of the present invention. The scope of the present invention is defined by the appended claims.

Claims

1. A front-end dynamic offline method, characterized in that: The method comprises: When the front-end application is loaded, the front-end device checks whether the current browser supports the preset offline cache unit; If the preset offline cache unit is not supported, the front-end device determines a compatible offline cache unit and sets the compatible offline cache unit as the final offline cache unit; If the preset offline cache unit is supported, the front-end device sets the preset offline cache unit as the final offline cache unit; The front-end device monitors changes in the current network status; If the change of the current network state is that the current network state switches from an online state to an offline state, the front-end device uses the final offline cache unit to store the data generated in the offline state, and in response to a user trigger operation, displays the offline data corresponding to the user trigger operation stored in the final offline cache unit; If the change in the current network status is that the current network status recovers from an offline state to an online state, the front-end device synchronizes the data generated in the offline state to the back-end server, and obtains the latest data from the back-end server when the update conditions are met to update the offline data stored in the final offline cache unit.

2. The front-end dynamic offline method according to claim 1, characterized in that: The offline cache level of the compatible offline cache unit is lower than the offline cache level of the preset offline cache unit, and the current browser supports the compatible offline cache unit; The offline cache level of the compatible offline cache unit is positively correlated with the offline cache capability of the compatible offline cache unit.

3. The front-end dynamic offline method according to claim 2, characterized in that: Also includes: If there are multiple compatible offline cache units, the compatible offline cache unit with the highest offline cache level is selected as the final offline cache unit.

4. The front-end dynamic offline method according to any one of claims 1 to 3, characterized in that: The acquiring the latest data from the backend server when the update condition is met to update the offline data stored in the final offline cache unit includes: In response to an automatic update instruction or a user update operation, the front-end device sends a data update request to the back-end server, receives the latest data returned by the back-end server, and updates the offline data stored in the final offline cache unit based on the latest data.

5. The front-end dynamic offline method according to any one of claims 1 to 3, characterized in that: The front-end device uses the final offline cache unit to store the data generated in the offline state, including: The front-end device stores the data generated in the offline state in the final offline cache unit according to a preset storage method; Among them, the preset storage method includes at least one of key-value pair storage, object storage and index storage.

6. The front-end dynamic offline method according to any one of claims 1 to 3, characterized in that: Also includes: If the current network state is switched from an online state to an offline state, the front-end device generates offline state prompt information and displays the offline state prompt information on a user interface.

7. A front-end dynamic offline device, characterized in that: The device comprises: a checking module, a first setting module, a second setting module, a monitoring module, an offline cache display module and an online synchronization update module; wherein, The checking module is connected to the first setting module and the second setting module respectively, and is used for the front-end device to check whether the current browser supports the preset offline cache unit when the front-end application is loaded; The first setting module is connected to the checking module, the offline cache display module and the online synchronization update module respectively, and is used for the front-end device to determine a compatible offline cache unit if the preset offline cache unit is not supported, and set the compatible offline cache unit as the final offline cache unit; The second setting module is connected to the checking module, the offline cache display module and the online synchronization update module respectively, and is used for the front-end device to set the preset offline cache unit as the final offline cache unit if the preset offline cache unit is supported; The monitoring module is connected to the offline cache display module and the online synchronization update module respectively, and is used to monitor the changes of the current network status; The offline cache display module is connected to the monitoring module, the first setting module and the second setting module respectively, and is used for, if the change of the current network state is that the current network state switches from an online state to an offline state, the front-end device uses the final offline cache unit to store the data generated in the offline state, and in response to a user trigger operation, displays the offline data corresponding to the user trigger operation stored in the final offline cache unit; The online synchronization update module is connected to the monitoring module, the first setting module and the second setting module respectively, and is used for synchronizing the data generated in the offline state to the back-end server by the front-end device if the change of the current network state is that the current network state is restored from an offline state to an online state, and obtaining the latest data from the back-end server when the update conditions are met, so as to update the offline data stored in the final offline cache unit.

8. A front-end device, characterized in that: including a processor and a memory; The memory stores a computer program or computer instruction that can be loaded by the processor and executes the front-end dynamic offline method as described in any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program or computer instructions that can be loaded by a processor and execute the front-end dynamic offline method as described in any one of claims 1 to 6.

10. A computer program product comprising a computer program or computer instructions, characterized in that When the computer program or the computer instruction is loaded and executed by the processor, the steps of the front-end dynamic offline method as claimed in any one of claims 1 to 6 are implemented.

Images