Dynamic offline package caching method and device, computer equipment and storage medium

Abstract

The invention belongs to the technical field of artificial intelligence, and relates to a dynamic offline packet caching method and related equipment, and the method comprises the steps: obtaining a routing configuration file according to a network request; obtaining a complete network address according to the routing configuration; creating a script label in a browser database; after the content script of the script tag is executed, if cache data is cached in the browser database, rendering the cache data to a display page; otherwise, requesting the back-end interface to obtain the loading data, rendering the loading data to the display page, and finally caching the loading data to the database cache. According to the application, an indexedDB cache file and a back-end interface are introduced, the user experience of a native app is approached, meanwhile, the user experience is greatly improved, the steps are simple, access is easy, the compatibility is high, nindexedDB belongs to a front-end technology, the nindexedDB can be separated from the native app for use, the difference between the interior and the exterior of the app can be rubbed down, the app does not need to be developed and specially processed by the native app, and the application prospect is wide. Compared with the traditional localStorage and sessionStorage, the storage space of the method is larger, and the method also supports binary stream and json storage.

Description

Technical Field

[0001] The present application relates to the field of artificial intelligence technology, and in particular to a dynamic offline package caching method, device, computer equipment and storage medium. Background Art

[0002] In the existing application scenarios of dynamic offline package caching, there are the following disadvantages:

[0003] 1. When the network speed is slow and the file size is large, the file needs to be reloaded every time the H5 page is re-entered, resulting in a long white screen time and poor page performance, leading to customer loss.

[0004] 2. Many H5 pages are embedded in apps. To make the H5 pages close to the native user experience, offline packages can be used. But in many cases, the pages are running outside the app, so offline packages cannot be used. There needs to be a solution similar to offline packages to solve the user experience problem of H5 pages outside the app. Although service-worker is an offline solution, service-worker has compatibility issues on mobile terminals.

[0005] 3. For an offline application, not only js, css, and img files need to be cached, but also the backend data. If localStorage and sesssionStorage are used, the storage size is small and data is easily lost. At the same time, it does not support the storage of json and needs to be converted into strings for storage.

[0006] It can be seen that the traditional dynamic offline package caching method has the problems of poor page performance, low compatibility and easy data loss. Summary of the invention

[0007] The purpose of the embodiments of the present application is to provide a dynamic offline package caching method, apparatus, computer equipment and storage medium to solve the problems of poor page performance, low compatibility and easy data loss in traditional dynamic offline package caching methods.

[0008] In order to solve the above technical problems, the embodiment of the present application provides a dynamic offline package caching method, which adopts the following technical solution:

[0009] Acquire a routing configuration file according to a network request, wherein the routing configuration file at least includes routing configuration information;

[0010] Match the routing configuration information with the current routing to obtain a hash value of the current page file;

[0011] Obtain the complete network address of the current page file according to the hash value;

[0012] Reading a browser database, and creating a script tag for caching the binary stream conversion of the current page file in the browser database;

[0013] After the content script of the script tag is executed, determining whether the browser database has cached data;

[0014] If the browser database caches cached data, the cached data is rendered to the display page;

[0015] If the browser database does not cache the cache data, the backend interface is requested to obtain the loading data, the loading data is rendered to the display page, and the loading data is cached in the browser database.

[0016] Furthermore, the step of reading the browser database and creating a script tag converted from the binary stream of the current page file in the browser database specifically includes the following steps:

[0017] Determine whether the browser database has cached the binary stream of the current page file;

[0018] If the browser database has the binary stream cached, then create the script tag;

[0019] If the browser database does not cache the binary stream, the binary stream of the current page file is obtained according to the network request, the script tag is created, and the requested binary stream of the current page file is cached in the browser database.

[0020] Furthermore, if the browser database does not cache the cache data, the step of requesting the backend interface to obtain the loading data, rendering the loading data to the display page, and caching the loading data in the database cache specifically includes the following steps:

[0021] Initiate a data request to the backend interface to obtain the loaded data;

[0022] Storing the loaded data in the browser database according to a preset cache strategy, and setting a cache time limit for the data stored in the browser database;

[0023] When the loading data needs to be called, the loading data is preferentially obtained from the browser database;

[0024] If the loaded data exists and is not invalid, directly return the loaded data;

[0025] If the loaded data does not exist or has expired, a request is initiated to the backend interface again to obtain the latest data, and the newly obtained latest data is stored in the browser database again, and the cache timeliness of the latest data is updated.

[0026] Furthermore, after the step of requesting the backend interface to obtain the loading data if the browser database does not cache the cache data, rendering the loading data to the display page, and caching the loading data in the database cache, the following step is also included:

[0027] The data in the browser database that exceeds the cache time limit is cleaned up according to a preset cleaning mechanism.

[0028] Furthermore, after the content script of the script tag is executed, the step of determining whether the browser database has cached data specifically includes the following steps:

[0029] After the content script of the script tag is executed, it is determined whether the target page requires user identity authentication according to the preset page permission configuration;

[0030] If the target page does not require identity authentication, directly determine whether the browser database has cached data;

[0031] If the target page requires identity authentication, the user authentication process is triggered to send an authentication request to the backend, and the authentication result sent by the backend is obtained;

[0032] If the authentication result is passed, the scripts and data resources required by the target page are dynamically loaded to complete page rendering;

[0033] If the authentication result fails, jump to the preset no-authorization prompt page or return to the previous page.

[0034] Furthermore, after the step of requesting the backend interface to obtain the loading data if the browser database does not cache the cache data, rendering the loading data to the display page, and caching the loading data in the database cache, the following step is also included:

[0035] When a data update message sent by the backend interface is obtained, the content of the data update message is parsed, and the changed data fields and the latest data values ​​are extracted;

[0036] According to the changed data field and the latest data value, the corresponding data field in the browser database is updated, and the latest data value overwrites the original cached data;

[0037] When the latest data value is overwritten, the interface refresh mechanism is triggered to refresh the display page.

[0038] In order to solve the above technical problems, the embodiment of the present application further provides a dynamic offline package caching device, which adopts the following technical solution:

[0039] A configuration file acquisition module, used to acquire a routing configuration file according to a network request, wherein the routing configuration file at least includes routing configuration information;

[0040] A route matching acquisition module is used to match the current route according to the route configuration information to obtain the hash value of the current page file;

[0041] An address acquisition module, used for acquiring the complete network address of the current page file according to the hash value;

[0042] A tag creation module, used for reading a browser database and creating a script tag for caching the binary stream conversion of the current page file in the browser database;

[0043] A cache data confirmation module, used to determine whether the browser database has cache data cached after the content script of the script tag is executed;

[0044] A first cache data rendering module, configured to render the cache data to a display page if the browser database has cache data;

[0045] The second cache data rendering module is used to request the backend interface to obtain the loading data if the browser database does not cache the cache data, render the loading data to the display page, and cache the loading data in the database cache.

[0046] Furthermore, the label creation module includes:

[0047] A binary stream confirmation submodule, used to determine whether the browser database has cached the binary stream of the current page file;

[0048] A first tag creation submodule, which creates the script tag if the browser database has the binary stream cached therein;

[0049] The second tag creation submodule obtains the binary stream of the current page file according to the network request if the browser database does not cache the binary stream, creates the script tag, and caches the requested binary stream of the current page file into the browser database.

[0050] In order to solve the above technical problems, the embodiment of the present application further provides a computer device, which adopts the following technical solution:

[0051] The method comprises a memory and a processor, wherein the memory stores computer-readable instructions, and the processor implements the steps of the above-mentioned dynamic offline package caching method when executing the computer-readable instructions.

[0052] In order to solve the above technical problems, the embodiment of the present application further provides a computer-readable storage medium, which adopts the following technical solution:

[0053] The computer-readable storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by the processor, the steps of the dynamic offline package caching method described above are implemented.

[0054] The present application provides a dynamic offline package caching method, comprising: obtaining a routing configuration file according to a network request, wherein the routing configuration file at least includes routing configuration information; matching the routing configuration information with the current route to obtain a hash value of the current page file; obtaining a complete network address of the current page file according to the hash value; reading a browser database, and creating a script tag for caching a binary stream conversion of the current page file in the browser database; after the content script of the script tag is executed, determining whether the browser database has cached data; if the browser database has cached data, rendering the cached data to a display page; if the browser database has no cached data, requesting a backend interface to obtain loading data, rendering the loading data to the display page, and caching the loading data in the database cache. Compared with the existing technology, this application refers to indexedDB cache files and back-end interfaces to enable H5 pages to support network-free access within the app, approaching the user experience of native apps. At the same time, large amounts of storage will not affect user operations, greatly improving the customer experience. The steps are simple and easy to access, with high compatibility. In addition, indexedDB is a front-end technology and can be used independently of native apps. It can smooth out the differences between the inside and outside of the app and does not require special processing for native app development. Compared with traditional localStorage and sessionStorage, it has larger storage space and supports binary streams and json storage. BRIEF DESCRIPTION OF THE DRAWINGS

[0055] In order to more clearly illustrate the scheme in the present application, a brief introduction is given below to the drawings required for use in the description of the embodiments of the present application. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0056] Figure 1 is an exemplary system architecture diagram to which the present application may be applied;

[0057] Figure 2 This is a flowchart of the implementation of the dynamic offline package caching method provided by this application;

[0058] Figure 3 It is a structural diagram of the dynamic offline package caching device provided by the present application;

[0059] Figure 4 It is a structural diagram of an embodiment of a computer device according to the present application. DETAILED DESCRIPTION

[0060] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as those commonly understood by technicians in the technical field of the present application; the terms used in the specification of the application herein are only for the purpose of describing specific embodiments and are not intended to limit the present application; the terms "including" and "having" and any variations thereof in the specification and claims of the present application and the above-mentioned drawings are intended to cover non-exclusive inclusions. The terms "first", "second", etc. in the specification and claims of the present application or the above-mentioned drawings are used to distinguish different objects, not to describe a specific order.

[0061] Reference to "embodiments" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase in various locations in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0062] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings.

[0063] like Figure 1 As shown, the system architecture 100 may include a terminal device 101, a network 102 and a server 103. The terminal device 101 may be a laptop 1011, a tablet computer 1012 or a mobile phone 1013. The network 102 is used to provide a medium for a communication link between the terminal device 101 and the server 103. The network 102 may include various connection types, such as wired, wireless communication links or optical fiber cables, etc.

[0064] The user can use the terminal device 101 to interact with the server 103 through the network 102 to receive or send messages, etc. Various communication client applications can be installed on the terminal device 101, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social platform software, etc.

[0065] The terminal device 101 can be any electronic device with a display screen and supporting web browsing. In addition to the laptop computer 1011, tablet computer 1012 or mobile phone 1013, the terminal device 101 can also be an e-book reader, an MP3 player (Moving Picture Experts Group Audio Layer III), an MP4 (Moving Picture Experts Group Audio Layer IV), a laptop computer, a desktop computer, etc.

[0066] The server 103 may be a server that provides various services, such as a background server that provides support for a web page displayed on the terminal device 101 .

[0067] It should be noted that the dynamic offline package caching method provided in the embodiment of the present application is generally executed by a server / terminal device, and accordingly, the dynamic offline package caching device is generally arranged in the server / terminal device.

[0068] It should be understood that Figure 1 The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be provided according to implementation requirements.

[0069] Continue to refer Figure 2 , shows a flow chart of an embodiment of a dynamic offline package caching method according to the present application. The dynamic offline package caching method comprises: step S201, step S202, step S203, step S204, step S205, step S206 and step S207.

[0070] In step S201, a routing configuration file is obtained according to a network request, wherein the routing configuration file at least includes routing configuration information.

[0071] In an embodiment of the present application, before performing offline package caching, the present application pre-develops a page rendering engine, which includes:

[0072] 1. Find the URL of the remote js of the corresponding page according to the current page;

[0073] 2. Load the js script according to AMD's specifications;

[0074] 3. Render the page after loading js.

[0075] In an embodiment of the present application, the page rendering engine is packaged, deployed in the nginx service and built into the app.

[0076] In an embodiment of the present application, all developed pages are packaged using webpack to generate js files according to the AMD specification, and a routing configuration file is generated at the same time. The routing configuration file contains the hash value of the page js and the page routing configuration, and the packaged js files are deployed on the nginx service.

[0077] In an embodiment of the present application, after completing the above deployment operation, the page rendering engine of the present application obtains manifest.json through an ajax request, and uses indexedDB to cache the json file so that it can be obtained from the cache in the subsequent absence of network.

[0078] In step S202, the route configuration information is matched with the current route to obtain a hash value of the current page file.

[0079] In an embodiment of the present application, the page rendering engine matches the routing configuration on the obtained routing configuration file information with the current routing to obtain the hash value of the current page file.

[0080] In step S203, the complete network address of the current page file is obtained according to the hash value.

[0081] In an embodiment of the present application, after the hash value of the current page file is obtained, the complete URL address of the page js file is obtained according to the hash value.

[0082] In step S204, the browser database is read, and a script tag for caching the binary stream conversion of the current page file is created in the browser database.

[0083] In step S205, after the content script of the script tag is executed, it is determined whether the browser database has cached data.

[0084] In step S206, if the browser database has cached data, the cached data is rendered to the display page.

[0085] In step S207, if the browser database does not cache the cache data, the backend interface is requested to obtain the loading data, the loading data is rendered to the display page, and the loading data is cached in the database cache.

[0086] In an embodiment of the present application, when the script content of the script tag is executed, the page is rendered and displayed. However, in the process of rendering the page, it may be necessary to request back-end interface data. If the app device is offline, first query whether there is cached data of the interface in indexedDB. If there is data, the data can be returned to avoid the situation where the page has no data. If the app device is online, it can return offline data first, render the page first, and synchronously request the interface online. After the data is returned, replace the data on the page. At the same time, use indexedDB to cache the latest data of the interface to avoid the interface responding too slowly and the user waiting time too long.

[0087] In the application embodiment, whether it is a file or a backend interface request, the application needs to first ask indexedDB whether there is a cache. If so, the cache is used first. If not, the first load is performed and the indexedDB cache is used. After caching, the page can also use the cache when it is offline to avoid a white screen.

[0088] In an embodiment of the present application, a dynamic offline package caching method is provided, including: obtaining a routing configuration file according to a network request, wherein the routing configuration file includes at least routing configuration information; matching the routing configuration information with the current route to obtain a hash value of the current page file; obtaining a complete network address of the current page file according to the hash value; reading a browser database, and creating a script tag for binary stream conversion of the cached current page file in the browser database; after the content script of the script tag is executed, determining whether the browser database has cached data; if the browser database has cached data, rendering the cached data to a display page; if the browser database has not cached data, requesting a backend interface to obtain loading data, rendering the loading data to a display page, and caching the loading data in a database cache. Compared with the existing technology, this application refers to indexedDB cache files and back-end interfaces to enable H5 pages to support network-free access within the app, approaching the user experience of native apps. At the same time, large amounts of storage will not affect user operations, greatly improving the customer experience. The steps are simple and easy to access, with high compatibility. In addition, indexedDB is a front-end technology and can be used independently of native apps. It can smooth out the differences between the inside and outside of the app and does not require special processing for native app development. Compared with traditional localStorage and sessionStorage, it has larger storage space and supports binary streams and json storage.

[0089] In some optional implementations of the embodiments of the present application, the above step S204 specifically includes the following steps:

[0090] Determine whether the browser database has cached the binary stream of the current page file;

[0091] If the browser database cache has a binary stream, create a script tag;

[0092] If the browser database does not cache the binary stream, the binary stream of the current page file is obtained according to the network request, a script tag is created, and the requested binary stream of the current page file is cached in the browser database.

[0093] In an embodiment of the present application, a query is made as to whether there is a binary stream of a cached js file in indexedDB. If so, a script tag is created, and the content of the script tag is the text converted from the binary stream cached in indexedDB. If not cached, ajax is used to request js, and after obtaining the binary stream of the js file, a script tag is created, and the content of the script tag is the text converted from the binary stream of js, and the binary stream obtained by the request is cached in indexedDB.

[0094] In some optional implementations of the embodiments of the present application, step S207 specifically includes the following steps:

[0095] Initiate a data request to the backend interface to obtain the loaded data;

[0096] The loaded data is stored in the browser database according to the preset cache strategy, and the cache validity period is set for the data stored in the browser database;

[0097] When loading data needs to be called, the loading data is obtained from the browser database first;

[0098] If the loaded data exists and is not invalid, the loaded data is returned directly;

[0099] If the loaded data does not exist or has expired, a request is made to the backend interface again to obtain the latest data, and the newly obtained latest data is stored in the browser database again, and the cache timeliness of the latest data is updated.

[0100] In the embodiment of the present application, when a user or application needs to display or process certain data (such as a product list, user information, etc.), the client (such as a web browser) will initiate an HTTP request to the server (backend interface) through the network. This request contains specific information about the data to be obtained (such as data type, query conditions, etc.).

[0101] In an embodiment of the present application, after receiving the request, the server will query the corresponding data from the database or other data source according to the information in the request, and then return the data to the client in a specific format (such as JSON, XML).

[0102] In an embodiment of the present application, in order to reduce the number of requests to the server and improve the response speed of the application and the user experience, the client stores the data obtained from the server locally, that is, in the browser database (such as IndexedDB, LocalStorage, SessionStorage, etc., the specific one to be used depends on the data requirements and size).

[0103] In the embodiment of the present application, in order to prevent users from obtaining outdated data, a validity period (cache time limit) is set for the cached data. This validity period can be a fixed time length (such as 1 hour, 1 day, etc.), or it can be dynamically set based on the update frequency of the data itself.

[0104] In the embodiment of the present application, when the application needs to display or process the data again, it will first try to retrieve the data from the browser database. The purpose of doing so is to reduce network delay and increase data access speed.

[0105] In the embodiment of the present application, after the data is retrieved, it is checked whether the data is still within the cache validity period. If the data exists and has not expired, the data is directly returned to the application for use without initiating a request to the server again.

[0106] In the embodiments of the present application, the client can efficiently manage the loading and caching of data, which not only reduces the burden on the server but also improves the performance of the application and the user experience.

[0107] In some optional implementations of the embodiments of the present application, after step S207, the following steps are further included:

[0108] Clean up data in the browser database that has exceeded the cache validity period according to the preset cleanup mechanism.

[0109] In the embodiment of the present application, the preset cleaning mechanism refers to a set of rules or policies defined at the beginning of system design to guide when and how to clean up the data in the browser database. These mechanisms may be formulated based on various factors such as time, space, and data access frequency.

[0110] In the embodiments of the present application, by regularly cleaning up expired data, it can be ensured that users and applications always have access to the latest information; reducing the amount of unnecessary data in the database can reduce query and access delays and improve application response speed; cleaning up expired data helps to free up valuable storage space, allowing the device to store more useful data; the automated cleaning mechanism can reduce the need for manual intervention and reduce maintenance costs and complexity.

[0111] In some optional implementations of the embodiments of the present application, the above step S205 specifically includes the following steps:

[0112] When the content script of the script tag is executed, it is determined whether the target page requires user identity authentication according to the preset page permission configuration;

[0113] If the target page does not require identity authentication, it directly determines whether the browser database has cached data;

[0114] If the target page requires identity authentication, the user authentication process is triggered to send an authentication request to the backend and obtain the authentication result sent by the backend;

[0115] If the authentication result is passed, the scripts and data resources required by the target page are dynamically loaded to complete the page rendering;

[0116] If the authentication result fails, it will jump to the preset no-authorization prompt page or return to the previous page.

[0117] In the embodiment of the present application, the above operations help to protect the security of sensitive pages and data, while providing a flexible user access control mechanism.

[0118] In some optional implementations of the embodiments of the present application, after step S207, the following steps are further included:

[0119] When the data update message sent by the backend interface is obtained, the content of the data update message is parsed and the changed data fields and the latest data values ​​are extracted;

[0120] Update the corresponding data fields in the browser database according to the changed data fields and the latest data values, and overwrite the original cached data with the latest data values;

[0121] When the latest data value is overwritten, the interface refresh mechanism is triggered to refresh the display page.

[0122] In an embodiment of the present application, when a data update message sent by the back-end interface is obtained, the front-end ensures the real-time and accuracy of the user interface by a series of operations such as parsing the message content, extracting the changed data, updating the cache, and triggering interface refresh.

[0123] The embodiments of the present application can acquire and process relevant data based on artificial intelligence technology. Among them, artificial intelligence (AI) is the theory, method, technology and application system that uses digital computers or machines controlled by digital computers to simulate, extend and expand human intelligence, perceive the environment, acquire knowledge and use knowledge to obtain the best results.

[0124] AI basic technologies generally include sensors, dedicated AI chips, cloud computing, distributed storage, big data processing technology, operation / interaction systems, mechatronics, etc. AI software technologies mainly include computer vision technology, robotics technology, biometrics technology, speech processing technology, natural language processing technology, and machine learning / deep learning.

[0125] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through computer-readable instructions, and the computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, the aforementioned storage medium can be a non-volatile storage medium such as a disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0126] It should be understood that, although the steps in the flowchart of the accompanying drawings are displayed in sequence as indicated by the arrows, these steps are not necessarily executed in sequence in the order indicated by the arrows. Unless otherwise specified herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least a part of the steps in the flowchart of the accompanying drawings may include multiple sub-steps or multiple stages, and these sub-steps or stages are not necessarily executed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be executed in turn or alternately with other steps or at least a part of the sub-steps or stages of other steps.

[0127] Further references Figure 3 , as a response to the above Figure 2 The present application provides an embodiment of a dynamic offline package caching device, and the embodiment of the device is similar to Figure 2 Corresponding to the method embodiment shown, the device can be specifically applied to various electronic devices.

[0128] like Figure 3 As shown, the dynamic offline package caching device 200 of the embodiment of the present application includes:

[0129] The configuration file acquisition module 210 is used to acquire a routing configuration file according to a network request, wherein the routing configuration file at least includes routing configuration information;

[0130] The route matching acquisition module 220 is used to match the current route according to the route configuration information to obtain the hash value of the current page file;

[0131] The address acquisition module 230 is used to obtain the complete network address of the current page file according to the hash value;

[0132] The tag creation module 240 is used to read the browser database and create a script tag for caching the binary stream conversion of the current page file in the browser database;

[0133] The cache data confirmation module 250 is used to determine whether the browser database has cache data cached after the content script of the script tag is executed;

[0134] A first cache data rendering module 260 is used to render the cache data to a display page if the browser database has cache data;

[0135] The second cache data rendering module 270 is used to request the backend interface to obtain the loading data if the browser database does not cache the cache data, render the loading data to the display page, and cache the loading data in the database cache.

[0136] In an embodiment of the present application, a dynamic offline package caching device 200 is provided, including: a configuration file acquisition module 210, which is used to acquire a routing configuration file according to a network request, wherein the routing configuration file at least includes routing configuration information; a routing matching acquisition module 220, which is used to match the current route according to the routing configuration information to obtain a hash value of the current page file; an address acquisition module 230, which is used to obtain the complete network address of the current page file according to the hash value; a tag creation module 240, which is used to read a browser database and create a script tag for binary stream conversion of a cached current page file in the browser database; a cache data confirmation module 250, which is used to determine whether the browser database has cached data after the content script of the script tag is executed; a first cache data rendering module 260, which is used to render the cached data to a display page if the browser database has cached data; and a second cache data rendering module 270, which is used to request a backend interface to obtain loading data if the browser database does not have cached data, render the loading data to a display page, and cache the loading data in a database cache. Compared with the existing technology, this application refers to indexedDB cache files and back-end interfaces to enable H5 pages to support network-free access within the app, approaching the user experience of native apps. At the same time, large amounts of storage will not affect user operations, greatly improving the customer experience. The steps are simple and easy to access, with high compatibility. In addition, indexedDB is a front-end technology and can be used independently of native apps. It can smooth out the differences between the inside and outside of the app and does not require special processing for native app development. Compared with traditional localStorage and sessionStorage, it has larger storage space and supports binary streams and json storage.

[0137] In some optional implementations of the embodiments of the present application, the label creation module includes:

[0138] The binary stream confirmation submodule is used to determine whether the browser database has cached the binary stream of the current page file;

[0139] The first tag creation submodule creates a script tag if the browser database cache has a binary stream;

[0140] The second tag creation submodule obtains the binary stream of the current page file according to the network request if the browser database does not cache the binary stream, creates a script tag, and caches the requested binary stream of the current page file in the browser database.

[0141] To solve the above technical problems, the present application also provides a computer device. Figure 4 , Figure 4 This is a basic structural block diagram of a computer device according to an embodiment of the present application.

[0142] The computer device 300 includes a memory 310, a processor 320, and a network interface 330 that are interconnected and communicated through a system bus. It should be noted that the figure only shows a computer device 300 having components 310-330, but it should be understood that it is not required to implement all the components shown, and more or fewer components can be implemented instead. Among them, those skilled in the art can understand that the computer device here is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to microprocessors, application specific integrated circuits (Application Specific Integrated Circuit, ASIC), programmable gate arrays (Field-Programmable Gate Array, FPGA), digital processors (Digital Signal Processor, DSP), embedded devices, etc.

[0143] The computer device may be a computing device such as a desktop computer, a notebook, a PDA, a cloud server, etc. The computer device may interact with a user through a keyboard, a mouse, a remote controller, a touch pad, or a voice control device.

[0144] The memory 310 includes at least one type of readable storage medium, and the readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (for example, SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 310 can be an internal storage unit of the computer device 300, such as a hard disk or memory of the computer device 300. In other embodiments, the memory 310 can also be an external storage device of the computer device 300, such as a plug-in hard disk equipped on the computer device 300, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card, etc. Of course, the memory 310 can also include both the internal storage unit of the computer device 300 and its external storage device. In the embodiment of the present application, the memory 310 is generally used to store the operating system and various application software installed on the computer device 300, such as computer-readable instructions of the dynamic offline package caching method. In addition, the memory 310 can also be used to temporarily store various data that have been output or are to be output.

[0145] The processor 320 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chip in some embodiments. The processor 320 is generally used to control the overall operation of the computer device 300. In the embodiment of the present application, the processor 320 is used to run the computer-readable instructions stored in the memory 310 or process data, such as computer-readable instructions for running the dynamic offline package caching method.

[0146] The network interface 330 may include a wireless network interface or a wired network interface. The network interface 330 is generally used to establish a communication connection between the computer device 300 and other electronic devices.

[0147] The computer device provided by this application references indexedDB cache files and back-end interfaces to enable H5 pages to be accessed without a network connection within the app, approaching the user experience of native apps. At the same time, large amounts of storage will not affect user operations, greatly improving the customer experience. The steps are simple and easy to access, with high compatibility. In addition, indexedDB is a front-end technology that can be used independently of native apps, and can smooth out the differences between the inside and outside of apps without the need for special processing in native app development. Compared with traditional localStorage and sessionStorage, it has a larger storage space and supports binary streams and json storage.

[0148] The present application also provides another implementation, that is, providing a computer-readable storage medium, wherein the computer-readable storage medium stores computer-readable instructions, and the computer-readable instructions can be executed by at least one processor to enable the at least one processor to perform the steps of the dynamic offline package caching method as described above.

[0149] The computer-readable storage medium provided by this application references indexedDB cache files and back-end interfaces to enable H5 pages to support network-free access within the app, approaching the user experience of native apps. At the same time, large amounts of storage will not affect user operations, greatly improving the customer experience. The steps are simple and easy to access, with high compatibility. In addition, indexedDB is a front-end technology and can be used independently of native apps. It can smooth out the differences between the inside and outside of the app and does not require special processing for native app development. Compared with traditional localStorage and sessionStorage, it has larger storage space and supports binary streams and json storage.

[0150] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in each embodiment of the present application.

[0151] Obviously, the embodiments described above are only some embodiments of the present application, rather than all embodiments. The preferred embodiments of the present application are given in the accompanying drawings, but they do not limit the patent scope of the present application. The present application can be implemented in many different forms. On the contrary, the purpose of providing these embodiments is to make the understanding of the disclosure of the present application more thorough and comprehensive. Although the present application is described in detail with reference to the aforementioned embodiments, for those skilled in the art, it is still possible to modify the technical solutions recorded in the aforementioned specific implementation methods, or to perform equivalent replacement of some of the technical features therein. Any equivalent structure made using the contents of the specification and drawings of this application, directly or indirectly used in other related technical fields, is similarly within the scope of patent protection of this application.

Claims

1. A dynamic offline package caching method, characterized in that: The steps include: Acquire a routing configuration file according to a network request, wherein the routing configuration file at least includes routing configuration information; Match the routing configuration information with the current routing to obtain a hash value of the current page file; Obtain the complete network address of the current page file according to the hash value; Reading a browser database, and creating a script tag for caching the binary stream conversion of the current page file in the browser database; After the content script of the script tag is executed, determining whether the browser database has cached data; If the browser database caches cached data, the cached data is rendered to the display page; If the browser database does not cache the cache data, the backend interface is requested to obtain the loading data, the loading data is rendered to the display page, and the loading data is cached in the browser database.

2. The dynamic offline package caching method according to claim 1, characterized in that: The step of reading the browser database and creating a script tag converted with the binary stream of the current page file in the browser database specifically includes the following steps: Determine whether the browser database has cached the binary stream of the current page file; If the browser database has the binary stream cached, then create the script tag; If the browser database does not cache the binary stream, the binary stream of the current page file is obtained according to the network request, the script tag is created, and the requested binary stream of the current page file is cached in the browser database.

3. The dynamic offline package caching method according to claim 1, characterized in that: If the browser database does not cache the cache data, the step of requesting the backend interface to obtain the loading data, rendering the loading data to the display page, and caching the loading data in the database cache specifically includes the following steps: Initiate a data request to the backend interface to obtain the loaded data; Storing the loaded data in the browser database according to a preset cache strategy, and setting a cache time limit for the data stored in the browser database; When the loading data needs to be called, the loading data is preferentially obtained from the browser database; If the loaded data exists and is not invalid, directly return the loaded data; If the loaded data does not exist or has expired, a request is initiated to the backend interface again to obtain the latest data, and the newly obtained latest data is stored in the browser database again, and the cache timeliness of the latest data is updated.

4. The dynamic offline package caching method according to claim 1, characterized in that: After the step of requesting the backend interface to obtain the loading data if the browser database does not cache the cache data, rendering the loading data to the display page, and caching the loading data in the database cache, the following step is also included: The data in the browser database that exceeds the cache time limit is cleaned up according to a preset cleaning mechanism.

5. The dynamic offline package caching method according to claim 1, characterized in that: The step of determining whether the browser database has cached data after the content script of the script tag is executed specifically includes the following steps: After the content script of the script tag is executed, it is determined whether the target page requires user identity authentication according to the preset page permission configuration; If the target page does not require identity authentication, directly determine whether the browser database has cached data; If the target page requires identity authentication, the user authentication process is triggered to send an authentication request to the backend, and the authentication result sent by the backend is obtained; If the authentication result is passed, the scripts and data resources required by the target page are dynamically loaded to complete page rendering; If the authentication result fails, jump to the preset no-authorization prompt page or return to the previous page.

6. The dynamic offline package caching method according to claim 1, characterized in that: After the step of requesting the backend interface to obtain the loading data if the browser database does not cache the cache data, rendering the loading data to the display page, and caching the loading data in the database cache, the following step is also included: When a data update message sent by the back-end interface is obtained, the content of the data update message is parsed, and the changed data fields and the latest data values ​​are extracted; According to the changed data field and the latest data value, the corresponding data field in the browser database is updated, and the latest data value overwrites the original cached data; When the latest data value is overwritten, the interface refresh mechanism is triggered to refresh the display page.

7. A dynamic offline package caching device, characterized in that: include: A configuration file acquisition module, used to acquire a routing configuration file according to a network request, wherein the routing configuration file at least includes routing configuration information; A route matching acquisition module is used to match the current route according to the route configuration information to obtain the hash value of the current page file; An address acquisition module, used for acquiring the complete network address of the current page file according to the hash value; A tag creation module, used for reading a browser database and creating a script tag for caching the binary stream conversion of the current page file in the browser database; A cache data confirmation module, used to determine whether the browser database has cache data cached after the content script of the script tag is executed; A first cache data rendering module, configured to render the cache data to a display page if the browser database has cache data; The second cache data rendering module is used to request the backend interface to obtain the loading data if the browser database does not cache the cache data, render the loading data to the display page, and cache the loading data in the database cache.

8. The dynamic offline packet caching device according to claim 7, characterized in that: The label creation module includes: A binary stream confirmation submodule, used to determine whether the browser database has cached the binary stream of the current page file; A first tag creation submodule, which creates the script tag if the browser database has the binary stream cached therein; The second tag creation submodule obtains the binary stream of the current page file according to the network request if the browser database does not cache the binary stream, creates the script tag, and caches the requested binary stream of the current page file into the browser database.

9. A computer device comprising a memory and a processor, characterized in that: The memory stores computer-readable instructions, and when the processor executes the computer-readable instructions, the steps of the dynamic offline package caching method according to any one of claims 1 to 6 are implemented.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-readable instructions, and when the computer-readable instructions are executed by a processor, the steps of the dynamic offline package caching method according to any one of claims 1 to 6 are implemented.

Images