Page loading method, device, storage medium and electronic device

Abstract

The present disclosure relates to the field of computer technology, and specifically to a page loading method, a page loading device, a storage medium, and an electronic device. The page loading method includes collecting dependent files through a front-end offline package software development kit (SDK) in an application, and storing the dependent files in a local cache space; when the application is running, intercepting and processing the dependent file request sent by the application based on the current page; querying from the local cache space whether there is a request dependent file corresponding to the dependent file request; when the request dependent file exists, forwarding the request dependent file according to the intercepted dependent file request, so that the application loads the content of the current page. The page loading method provided by the present disclosure can reduce the intrusiveness and complexity of offline package services.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to a page loading method, a page loading device, a storage medium, and an electronic device. Background Art

[0002] An offline package is a package that packages static resources on a page, including HTML, JavaScript, CSS, etc., into a compressed package. The package is pre-downloaded to the local computer and then opened on the client to load the offline package directly from the local computer. This minimizes the impact of the network environment on the H5 page.

[0003] Existing offline package service technologies typically involve front-end applications accessing offline packages, based on the front-end deployment system. Static applications can directly enable offline package functionality, while dynamic applications require an offline package plugin. During the build process, these packages are packaged and submitted to the deployment platform's offline package service. However, these approaches all present challenges such as high intrusion, limited platform support, high development costs, high complexity, low flexibility, and lack of standardization.

[0004] The information provided is only for enhancement of understanding of the background of the disclosure and therefore it may contain information that does not form the prior art that is already known to a person of ordinary skill in the art. Summary of the Invention

[0005] The purpose of the present disclosure is to provide a page loading method, a page loading device, a storage medium and an electronic device, aiming to solve the problem that offline package services are highly invasive and complex.

[0006] Other features and advantages of the present disclosure will become apparent from the following detailed description, or may be learned in part by practice of the present disclosure.

[0007] According to one aspect of an embodiment of the present disclosure, a page loading method is provided, comprising: collecting dependent files through a front-end offline package software development toolkit (SDK) in an application, and storing the dependent files in a local cache space; intercepting and processing a dependent file request sent by the application based on a current page while the application is running; querying from the local cache space whether there is a request dependent file corresponding to the dependent file request; and when the request dependent file exists, forwarding the request dependent file according to the intercepted dependent file request, so that the application loads the content of the current page.

[0008] In one embodiment, based on the aforementioned solution, before collecting dependent files through the front-end offline package software development kit SDK in the application, the method also includes: adding a cache construction function in the configuration file of the application, and adding a cache execution function in the entry file of the application to access the front-end offline package SDK in the application.

[0009] In one embodiment, based on the aforementioned solution, the collecting of dependent files through the front-end offline package software development kit SDK in the application includes: in response to the build instruction of the application, calling the cache build function to generate an offline index file; in response to the startup instruction of the application, calling the cache execution function to register the offline index file; after registration is completed, obtaining the dependent file based on the offline index file.

[0010] In one embodiment, based on the aforementioned scheme, calling the cache construction function to generate an offline index file includes: calling the cache construction function to obtain a dependency list of the application; determining a mapping table and index of the dependency file based on the dependency list; and generating the offline index file according to the mapping table and index.

[0011] In one embodiment, based on the aforementioned scheme, determining the mapping table and index of the dependent file based on the dependency list includes: extracting the hypertext markup language HTML dependent file in the dependency list and calculating the hash value corresponding to the HTML dependent file; copying the HTML dependent file and renaming the copied HTML dependent file based on the hash value; creating a mapping relationship between the HTML dependent file and the copied HTML dependent file to obtain the mapping table; and replacing the original file name of the HTML dependent file in the dependency list with the renamed file name to obtain the index.

[0012] In one embodiment, based on the aforementioned scheme, when the dependent file request is an HTML request, querying from the local cache space whether there is a request dependent file corresponding to the dependent file request includes: based on the mapping table in the offline index file of the application, replacing the target field in the uniform resource locator URL corresponding to the HTML request to obtain a replaced URL; and querying from the local cache space according to the replaced URL whether there is the request dependent file.

[0013] In one embodiment, based on the aforementioned scheme, when the dependent file request is a non-HTML request, querying from the local cache space whether there is a request dependent file corresponding to the dependent file request includes: based on the URL corresponding to the non-HTML request, querying from the local cache space whether there is the request dependent file.

[0014] According to a second aspect of an embodiment of the present disclosure, a page loading device is provided, including: a collection module, used to collect dependent files through a front-end offline package software development toolkit SDK in an application, and store the dependent files in a local cache space; an interception module, used to intercept and process dependent file requests sent by the application based on the current page when the application is running; a query module, used to query from the local cache space whether there is a request dependent file corresponding to the dependent file request; and a forwarding module, used to forward the request dependent file according to the intercepted dependent file request when the request dependent file exists, so that the application loads the content of the current page.

[0015] According to a third aspect of an embodiment of the present disclosure, a computer-readable storage medium is provided, on which a computer program is stored. When the program is executed by a processor, the page loading method in the above embodiment is implemented.

[0016] According to a fourth aspect of an embodiment of the present disclosure, an electronic device is provided, characterized in that it includes: one or more processors; a storage device for storing one or more programs, when the one or more programs are executed by the one or more processors, the one or more processors implement the page loading method as in the above embodiment.

[0017] The exemplary embodiments of the present disclosure may have some or all of the following beneficial effects:

[0018] In the technical solutions provided by some embodiments of the present disclosure, the front-end offline package SDK is pre-connected to the application, and then the dependent files are collected through the SDK when the application is started, and the dependent files are stored in the local cache space. Then, when the application is running, the dependent file request can be intercepted and processed, and when the requested dependent file is found in the local cache space, it will be returned. The page loading method in the present disclosure only needs to connect to the SDK to implement the page loading method. On the one hand, it is extremely low intrusive to the front-end code and non-invasive to other ends. The access is simple, the complexity is reduced, and there is no need for server-side development, and no complex offline package version, update, difference calculation, download and other services, and the cost is controllable. On the other hand, after connecting to the SDK, the cache hit strategy and update strategy can be freely configured, which has extremely high flexibility.

[0019] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] The above and other objects, features and advantages of the exemplary embodiments of the present disclosure will become readily understood by reading the detailed description below with reference to the accompanying drawings, in which several embodiments of the present disclosure are shown by way of example and not limitation, wherein:

[0021] Figure 1 A schematic diagram schematically illustrates a flow chart of a page loading method in an exemplary embodiment of the present disclosure;

[0022] Figure 2 A schematic diagram of a process for collecting dependent files in an exemplary embodiment of the present disclosure is schematically shown;

[0023] Figure 3 A flowchart of a method for generating an offline index file in an exemplary embodiment of the present disclosure is schematically shown;

[0024] Figure 4 A flowchart schematically illustrates a method for querying request-dependent files in an exemplary embodiment of the present disclosure;

[0025] Figure 5 A flowchart schematically illustrates another method for querying request-dependent files in an exemplary embodiment of the present disclosure;

[0026] Figure 6 A flowchart schematically illustrates a page loading method based on an offline file in an exemplary embodiment of the present disclosure;

[0027] Figure 7 A schematic diagram schematically illustrates the composition of a page loading device in an exemplary embodiment of the present disclosure;

[0028] Figure 8 A schematic diagram schematically illustrates a computer-readable storage medium in an exemplary embodiment of the present disclosure;

[0029] Figure 9 The following schematically shows a structural diagram of a computer system of an electronic device in an exemplary embodiment of the present disclosure.

[0030] In the drawings, the same or corresponding reference numerals denote the same or corresponding parts. DETAILED DESCRIPTION

[0031] The principles and spirit of the present disclosure will be described below with reference to several exemplary embodiments. It should be understood that these embodiments are provided only to enable those skilled in the art to better understand and thus implement the present disclosure, rather than to limit the scope of the present disclosure in any way. On the contrary, these embodiments are provided to make the present disclosure more thorough and complete, and to be able to convey the scope of the present disclosure fully to those skilled in the art.

[0032] Those skilled in the art know that the embodiments of the present disclosure can be implemented as a device, equipment, method, or computer program product. Therefore, the present disclosure can be specifically implemented in the following forms: completely hardware, completely software (including firmware, resident software, microcode, etc.), or a combination of hardware and software.

[0033] According to the embodiments of the present disclosure, a page loading method, a page loading device, an electronic device, and a computer-readable storage medium are provided.

[0034] In this article, the number of any elements in the drawings is for illustration rather than limitation, and any naming is only for distinction and does not have any limiting meaning.

[0035] Below, with reference to several representative embodiments of the present disclosure, the principles and spirit of the present disclosure will be elaborated in detail. SUMMARY OF THE INVENTION

[0037] The inventor of the present invention found that in the prior art, for the offline package service technology, in the technical solution adopted by Company Cloud, static type applications provided by the front-end deployment system can directly enable the offline package function; for dynamic type applications, an offline package plugin needs to be connected, and during the construction process, the offline package is packaged and submitted to the offline package service on the deployment platform. Here, we mainly take static applications as an example to elaborate on the related solutions.

[0038] First, the front-end application accesses the offline package. While the front-end application is being built, deployed, and released on the deployment platform, ① static type resources are packaged into an offline package (full package) and released to the CDN for the App to download; ② at the same time, the offline package is submitted to the offline package service system to calculate information such as the full package, differential package, offline package ID, MD5, etc. Generally speaking, the front-end part is: the deployment of the front-end itself + the generation of the offline package.

[0039] Then, the client offline package is processed. Here, iOS is taken as an example for elaboration, and the process for Android is basically the same. When the App is started, first read the configuration of the App to obtain the settings related to the offline package, including:

[0040] · The name of the App, such as: music-Company Cloud, moyi-Xinyu, etc.;

[0041] Download path, such as [sandbox] / Documents / UserData / WebviewCache;

[0042] Whether to preload Ajax requests, such as true;

[0043] Polling period, such as 7200 seconds, means that the interface will be requested every 7200 seconds to check for updates;

[0044] The interface address of the offline package service. The default is the background interface address of the App, such as: https: / / api.music.163.com.

[0045] Build the offline package manager from the settings, and then call the manager's initCache method to initialize the local environment of the offline package, including:

[0046] Creation of a local directory, skipped if it already exists;

[0047] Create a local database, skipping it if it already exists; read the offline package information from the database and cache it in memory;

[0048] Inject your own NSurlProtocol subclass WebCacheProtocol into the system to intercept all requests occurring in the WKWebView page.

[0049] After initialization is complete, it starts sending requests to the configured offline package service interface address to obtain the latest complete offline package information and compares it with the offline package information in the local database to check the update status of the offline package. Each offline package contains the following information:

[0050] Package ID

[0051] Local version number;

[0052] Latest version number;

[0053] ·state;

[0054] A list of associated domain names, as there may be different CDN domain names;

[0055] The download URL of the full package;

[0056] MD5 of the entire package, used for integrity verification;

[0057] The download URL of the incremental package (may not be available);

[0058] MD5 of the incremental packet, used for integrity verification (maybe none);

[0059] Ajax list that needs to be preloaded.

[0060] If the local offline package ID is not in the latest list, it is marked as "not present"; if the local offline package ID is in the latest list and the local version number is the same as the version number of the offline package with the same ID in the latest list, it is marked as "latest"; otherwise, it is marked as "needs to be updated"; if it is in the latest list but not locally, it is marked as "needs to be downloaded".

[0061] After the previous step, the local offline package list and the latest offline package list are deduplicated and merged, and all statuses are updated. The status of each offline package in this list is traversed. If the status is:

[0062] Latest: Updates the metadata of the offline package (usually no changes);

[0063] Does not exist: Delete the local file and the corresponding record in the database;

[0064] · Update required: Download the incremental package (if available) or the full package, and update the corresponding record in the database. After the MD5 verification passes, decompress and overwrite the existing local file.

[0065] Required download: Download the full package and add a new database record. After the MD5 verification passes, unzip it to the specified directory.

[0066] The above steps will be performed every time the system is started, or every "polling cycle" after startup, to ensure that local information and files are relatively new.

[0067] When a new URL is opened with WKWebView in an app, WebCacheProtocol will operate as follows:

[0068] 1. Determine whether the offline package function is globally enabled. If yes, jump to step 7.

[0069] 2. Check whether the URL contains the pageforceonline parameter to force online request. If so, jump to step 7.

[0070] 3. Check whether the domain name of the URL is in the list of associated domain names of a certain offline package. If not, jump to 7;

[0071] 4. Check whether the local offline resource corresponding to the urlquery exists. If not, jump to step 7.

[0072] 5. Determine whether the resource Data corresponding to the URL is cached in memory. If so, return it directly and jump to 8;

[0073] 6. Read the local file corresponding to the URL, update the memory cache, then return and jump to 8;

[0074] 7. If the offline package cache is not hit, a normal network request is initiated and data is returned;

[0075] 8. End.

[0076] At the same time, when WKWebView opens a new URL for the first time, we will find the preloaded Ajax list of its corresponding offline package, send the network request in advance and cache the result in memory. When the offline package is loaded in WKWebView and the corresponding Ajax request needs to be sent through JSBrdige, the data can be obtained directly from the memory.

[0077] In the existing technology, the technical solution adopted by A Moumou Company is consistent with the ideas and principles of the aforementioned solution. The front-end generates offline packages during construction and deployment; the server provides services such as offline package download, differential calculation, metadata pulling, version management, etc.; the client accesses the offline package function, matches requests according to certain rules, intercepts them locally, and replaces them with local offline package data.

[0078] However, there are several notable differences: Yunmou doesn't differentiate between request types, intercepting both GET and POST requests. This is related to Yunmou's interface pre-request functionality and has little to do with the offline package itself. Yunmou's resource matching, including the path, relies on the directory structure within the offline package. In contrast, Amou's solution has dedicated URL and file mapping configurations. Yunmou's offline package contains only front-end static files, and some metadata and configuration are obtained from the interface. In contrast, Amou's solution contains both in-package configuration information and data content. The in-package configuration information is similar to our metadata and configuration, while the data content is similar to our front-end static files. Amou's solution distinguishes between global, public, and business. Yunmou doesn't have a global concept. Amou's solution doesn't involve optimizations related to incremental packages (differential packages).

[0079] By understanding the above technical solutions, it is not difficult to find that the existing offline package technology has the following problems:

[0080] 1. Highly Intrusive: Traditional solutions generally require integration with Android and iOS SDKs, significantly intruding on existing apps. Apps that require offline package functionality must integrate with the SDK and undergo modification.

[0081] 2. Limited platform support: Traditional solutions typically only support Android and iOS. They cannot support web-based platforms (PC, H5), such as desktop browsers, or H5 links shared to other apps.

[0082] 3. High development cost and complexity: Support for both Android and iOS is required, and specific strategies must be aligned on both platforms. Updates and iterations require development on both platforms. Furthermore, the server must develop corresponding offline package update and distribution services.

[0083] 4. Low flexibility: This is reflected in two aspects. First, any iteration of functions requires dual-end releases. Second, the strategy is relatively fixed, and the front-end (JS) has little room for maneuver.

[0084] 5. Non-standardization: While the implementation ideas are generally the same, the details, such as functionality and APIs, vary widely. The difference between Yun and A is an example.

[0085] Therefore, in order to solve the problems existing in the prior art, the present disclosure provides a page loading method. Various non-limiting embodiments of the present disclosure are described in detail below.

[0086] Application Scenario Overview

[0087] It should be noted that the following application scenarios are only provided to facilitate understanding of the spirit and principles of the present disclosure, and the embodiments of the present disclosure are not limited in this respect. On the contrary, the embodiments of the present disclosure can be applied to any applicable scenario.

[0088] The present disclosure can be applied to scenarios where pages are loaded in an application. For example, when a front-end application is running, if a page depends on various js, css, images and other files, when the page is loaded, these dependent files will be requested, that is, the page sends a dependent file request to the application service, and then obtains the corresponding dependent files for loading the page.

[0089] Exemplary Methods

[0090] The implementation details of the technical solution of the embodiment of the present disclosure are described in detail below.

[0091] Figure 1 The following schematically shows a flow chart of a page loading method in an exemplary embodiment of the present disclosure. Figure 1 As shown, the page loading method includes steps S101 to S104:

[0092] Step S101: collecting dependent files through the front-end offline package SDK in the application and storing the dependent files in a local cache space;

[0093] Step S102: When the application is running, intercepting and processing the dependent file request sent by the application based on the current page;

[0094] Step S103, querying the local cache space to see whether there is a requested dependent file corresponding to the dependent file request;

[0095] Step S104: when the request-dependent file exists, forwarding the request-dependent file according to the intercepted dependent file request, so that the application program loads the content of the current page.

[0096] In the technical solutions provided by some embodiments of the present disclosure, the front-end offline package SDK is pre-connected to the application, and then the dependent files are collected through the SDK when the application is started, and the dependent files are stored in the local cache space. Then, when the application is running, the dependent file request can be intercepted and processed, and when the requested dependent file is found in the local cache space, it will be returned. The page loading method in the present disclosure only needs to connect to the SDK to implement the page loading method. On the one hand, it is extremely low intrusive to the front-end code and non-invasive to other ends. The access is simple, the complexity is reduced, and there is no need for server-side development, and no complex offline package version, update, difference calculation, download and other services, and the cost is controllable. On the other hand, after connecting to the SDK, the cache hit strategy and update strategy can be freely configured, which has extremely high flexibility.

[0097] Below, each step of the page loading method in this example implementation will be described in more detail with reference to the accompanying drawings and embodiments.

[0098] In step S101, dependent files are collected through the front-end offline package SDK in the application, and the dependent files are stored in a local cache space.

[0099] Specifically, the core functions of the page loading method provided by the present disclosure are mainly concentrated in the front-end offline package SDK (Software Development Kit). When the front-end application is built, the SDK collects corresponding resources to obtain dependent files and stores them.

[0100] Therefore, in one embodiment of the present disclosure, before collecting dependent files through the front-end offline package SDK in the application, the method also includes: adding a cache construction function to the configuration file of the application, and adding a cache execution function to the entry file of the application, so as to access the front-end offline package SDK in the application.

[0101] Specifically, the front-end SDK mainly exposes two methods:

[0102] (1) CacheBuildPlugin(): This is a plugin used by front-end applications during build and deployment. This plugin's main functions are collecting dependency resources, generating offline packages, and generating sw.js files. sw.js is the default file name; its purpose will be explained in detail later.

[0103] (2) Cache execution function register(): The method for registering and installing sw.js when the front-end application is running.

[0104] The mainstream webpack can be used for specific execution. If webpack is not used as the build tool, the SDK can also be run directly in command line mode, which is suitable for almost all projects.

[0105] Therefore, when integrating the SDK, you need to add CacheBuildPlugin() to the front-end application's build process, that is, place it in the application's configuration file. CacheBuildPlugin() mainly has the following parameters:

[0106] ① Parameter strategies: You can configure multiple cache strategies, which can be flexibly selected according to your needs. For example: CacheFirst: The default value. Prioritizes the cache. If no cache is available, it will be downgraded to a network request. CacheOnly: Only the cache is used. NetworkFirst: Optimizes the use of network requests. If there is no response to the network request, the cache is used. StaleWhileRevalidate: Prioritizes the cache and initiates a network request to update the cached data.

[0107] ② The filename parameter modifies the file name of the JS file ultimately output by the CacheBuildPlugin. This parameter is generally left unmodified and defaults to sw.js. The output JS file is registered with the Service Worker using the register() method and carries most of the offline package's functionality, which will be discussed in more detail later.

[0108] ③Parameter publicPath: This parameter is used to correct the path and can be ignored for now.

[0109] It should be noted that CacheBuildPlugin() is currently mainly used in webpack, and in theory it can also support other build tools such as vite.

[0110] On the other hand, add register() to the entry file of the application so that the register() method can be executed when the front-end application starts.

[0111] For example, taking the react framework as an example, assuming that the entry file of the current project is main.jsx, then you only need to import and execute it in main.jsx; if the filename is customized in CacheBuildPlugin or the command line, you can pass it in when calling register.

[0112] After accessing the SDK, the step of collecting dependent files in step S101 is executed. Figure 2 The following schematically shows a flow chart of collecting dependent files in an exemplary embodiment of the present disclosure. Figure 2 As shown, the method for collecting dependent files in step S101 is as follows:

[0113] Step S201, in response to the construction instruction of the application, calling the cache construction function to generate an offline index file;

[0114] Step S202: In response to the startup instruction of the application, calling the cache execution function to register the offline index file;

[0115] Step S203: After registration is completed, the dependent file is obtained based on the offline index file.

[0116] Specifically, collecting dependent files is the process of collecting resources. "Dependency" is exactly what it means. For example, the operation of a front-end application depends on many resources, such as HTML, JS, and CSS. These are also known as dependent files. HTML itself depends on the JS and CSS files it imports. Offline package technology pre-downloads these "dependent" resources and caches them locally to improve front-end page loading speed.

[0117] In step S201, in response to the application's build instruction, the cache build function is called to generate an offline index file. Specifically, the following steps are included:

[0118] Step 1: Call the cache construction function to obtain the dependency list of the application;

[0119] Specifically, for example, in webpack mode, you can directly use webpack's stats to filter out the required dependency files. In command-line mode, or when webpack stats are unavailable, you can directly read local folders, traverse the front-end build artifacts, and collect dependencies. For example, if the command is swcache build ". / dist", the SDK will traverse and collect the ". / dist" directory.

[0120] After the dependency collection is completed, we get the entire dependency list. The dependency list is essentially an array, such as:

[0121]

[0122] Step 2: Determine the mapping table and index of the dependent file based on the dependency list.

[0123] With the dependency list in the previous step, the offline index file sw.js can be generated. The offline index file in this application is completely different from the structure and content of the offline package in the prior art.

[0124] The offline index file sw.js primarily consists of a mapping table and an index. The mapping table is used to cache HTML files, while the index is used to cache other resource files. Conventional offline packages are simply compressed packages of static files, subsequently updated using incremental packages. These packages, or compressed packages of static and configuration files, may contain files from multiple business lines.

[0125] The following describes in detail the process of creating the mapping table and index. Specifically, in one embodiment of the present disclosure, the specific content of step 2 is as follows:

[0126] Step 2.1, extract the HTML dependency file in the dependency list, and calculate the hash value corresponding to the HTML dependency file;

[0127] Filter out the HTML files in the list, namely path.html and guide.html. Then read the contents of the HTML files and calculate the MD4 hash values, assuming they are h836dj35 and 83isyrn6 respectively.

[0128] Step 2.2, copying the HTML dependency file, and renaming the copied HTML dependency file based on the hash value;

[0129] Copy the file and rename it, writing the hash value into the file name, so that there are two more files path.h836dj35.html and guide.83isyrn6.html.

[0130] Step 2.3: Create a mapping relationship between the HTML dependency file and the copied HTML dependency file to obtain the mapping table;

[0131] Construct a mapping table, where the key is the original HTML file name and the value is the file name with the hash value.

[0132] Step 2.4: Replace the original file name of the HTML dependency file in the dependency list with the renamed file name to obtain the index.

[0133] Construct an index and replace the original HTML file name with a new file name with a hash value.

[0134] Taking the dependency list mentioned above as an example, the mapping tables and indexes created are:

[0135]

[0136] Step 3: Generate the offline index file according to the mapping table and the index.

[0137] With the mapping table and index, the next step is to generate sw.js. You can pre-embed the placeholders of the index and mapping table in sw.js, directly read the file, replace the placeholders with real data, and save it.

[0138] Figure 3 A flowchart of a method for generating an offline index file in an exemplary embodiment of the present disclosure is schematically shown. Figure 3 As shown, the method for generating an offline index file specifically includes the following steps:

[0139] Step S301, execute CacheBuildPlugin, step S302, collect dependencies according to webpack status; or

[0140] Step S303, executing the command line tool, step S304, traversing the local folder to collect dependencies;

[0141] Step S305, generating a dependency list based on the dependency;

[0142] Step S306, generating a mapping table + index;

[0143] Step S307, generate sw.js according to sw.js.

[0144] In step S202, in response to the startup instruction of the application, the cache execution function is called to register the offline index file.

[0145] Specifically, when the front-end application starts, the cache execution function register() method is executed to register and install the sw.js file generated in step S201 into the ServiceWorker. Among them, Serviceworker essentially acts as a proxy server between the web application and the browser, and can also act as a proxy between the browser and the network when the network is available. Serviceworker is an event-driven worker registered under a specified source and path. It uses JavaScript to control the associated pages or websites, intercept and modify access and resource requests, and cache resources in a fine-grained manner. You can fully control the performance of the application in specific situations (the most common situation is that the network is unavailable).

[0146] In step S203, after registration is completed, the dependent file is obtained based on the offline index file.

[0147] Specifically, after the sw.js file is installed, sw.js will automatically download the files in the index and cache them in the local storage of Webview / WKWebview. This way, updates to sw.js and local files are fine-grained, and the success rate of downloads and updates is higher.

[0148] In step S102, when the application is running, the dependent file request sent by the application based on the current page is intercepted and processed.

[0149] Specifically, when the front-end application is running, if the page depends on various js, css, images and other files, when the page is loaded, it will request these dependent files, that is, the page will send dependent file requests to the application service.

[0150] At this time, the registered sw.js will intercept these requests (Webview's own characteristics can be achieved through Service Worker interception of requests), and then be used for subsequent resource replacement in the offline package.

[0151] There are two types of dependent file requests: one is for requesting HTML-type dependent files, known as HTML requests; the other is for requesting non-HTML-type dependent files, known as non-HTML requests. HTML (HyperText Markup Language) is a standard markup language used to create web pages. You can use HTML to build your own website, and HTML runs on and is parsed by the browser.

[0152] In step S103, the local cache space is queried to determine whether there is a requested dependent file corresponding to the dependent file request.

[0153] Specifically, after the registered sw.js intercepts a request for a dependent file, it searches the local storage space to see if the file is cached. If found, it directly returns the file from the local storage space. This achieves offline access to files such as JS without requiring a network request. The query method varies for different dependent file requests, as detailed below.

[0154] In one embodiment of the present disclosure, when the dependent file request is an HTML request, querying from the local cache space whether there is a request dependent file corresponding to the dependent file request includes: replacing the target field in the uniform resource locator (URL) corresponding to the HTML request based on a mapping table in an offline index file of the application to obtain a replaced URL; and querying from the local cache space according to the replaced URL whether there is the request dependent file.

[0155] Specifically, HTML-type dependent files need to be replaced using a mapping table first, and then the replaced URLs are used to store the matches locally.

[0156] Figure 4 A flowchart of a method for querying request dependent files in an exemplary embodiment of the present disclosure is schematically shown, with reference to Figure 4 As shown, the steps of the query request dependent file method are as follows: the current page requests path.html, and the request is intercepted by Service Worker. First, it is mapped to the local cache address path.[contenthash].html, that is, path.h836dj35.html, based on the mapping relationship of html. Then, the path.[contenthash].html cache is queried in the local Cashes cache space. After the query exists, Service Worker returns the file in the local cache space to the page.

[0157] This is done because, with the exception of HTML, most resource file names for all current dependencies contain hashes. The hash is generated based on the file's content. Changes to the file's content immediately cause the file's name to change, so the new file won't match the old cache. However, the HTML file name is part of the page URL. To ensure readability and uniqueness, the HTML file name remains unchanged with each release, so it will always match the old cache. This problem can be resolved by mapping the file in a mapping table. With each build and deployment, if the HTML content changes, the mapping will also change.

[0158] In one embodiment of the present disclosure, when the dependent file request is a non-HTML request, querying from the local cache space whether there is a request dependent file corresponding to the dependent file request includes: querying from the local cache space whether there is the request dependent file based on the URL corresponding to the non-HTML request.

[0159] Specifically, non-HTML type dependent files can be directly stored and matched locally using URLs.

[0160] Figure 5 A flowchart schematically illustrates another method for querying dependent files in an exemplary embodiment of the present disclosure, with reference to Figure 5 As shown, the steps of the query request dependent file method are as follows: the current page requests path.[contenthash].js, the request is intercepted by ServiceWorker, ServiceWorker queries the path.[contenthash].js cache in the local Cashes cache space, and after the query exists, ServiceWorker returns the file in the local cache space to the page.

[0161] In step S104, when the request-dependent file exists, the request-dependent file is forwarded according to the intercepted dependent file request, so that the application program loads the content of the current page.

[0162] Specifically, if a request dependent file corresponding to the dependent file request exists in the local Cashes cache space, the request dependent file is returned to the application according to the original dependent file request for page loading.

[0163] In one embodiment of the present disclosure, the method further includes: configuring a timing parameter in the cache construction function; and after storing the dependent file in the local cache space, deleting the target file in the dependent file based on the timing parameter.

[0164] Specifically, the cache build function CacheBuildPlugin() can also configure the runtimeCache parameter to configure runtime dynamic caching capabilities. You can create a cache named image and cache images ending in png, jpg, or gif based on regular expressions for 30 days. For example, if a page requests the image avatar.png, sw.js will capture it and cache it offline. When the user opens the page again and requests avatar.png, the offline cache will be used directly, without requiring a network request.

[0165] Figure 6A flowchart schematically illustrates a method for loading a page based on an offline file in an exemplary embodiment of the present disclosure, with reference to FIG. Figure 6 As shown, the page loading method based on offline files specifically includes the following processes:

[0166] Step S601: The current page of the browser sends a request for dependent files;

[0167] Step S602, determine whether the dependent file request is an HTML request: if so, execute step S603, that is, use the mapping table to obtain a new file name, and then execute step S604; if not, directly execute step S604;

[0168] Step S604, whether there is a matching cache in the local cache, if so, execute step S605, that is, intercept and respond to the cache to the browser, if not, execute step S606, that is, downgrade to a network request and return it to the browser.

[0169] In one embodiment of the present disclosure, the method further includes: when the application is updated, accessing the front-end offline package SDK based on the updated application; generating a new offline index file through the front-end offline package software development tool in the updated application; obtaining a new dependent file based on the new offline index file and storing the new dependent file in the local cache space.

[0170] Specifically, the offline index file disclosed in this disclosure directly embeds the index and mapping table into sw.js, and automatically downloads the specific files after sw.js is installed. Therefore, when the front-end code changes, the build deployment environment will generate a new index, mapping table, and sw.js. When the user opens the page, the new sw.js will be installed, the new cache file will be downloaded (the unchanged cache already exists, and the cache not in the index will be deleted), and the update operation will be completed.

[0171] Based on the above method, the page loading method is centralized in the front-end SDK. The work of the entire SDK is mainly divided into three parts:

[0172] ① When building the front-end application: through CacheBuildPlugin(), collect the corresponding resources, mainly html, js, css, image, font, etc., and generate the sw.js file.

[0173] ②When the front-end application starts: execute the register() method, register and install sw.js into the Service Worker, and start downloading resources to local storage.

[0174] ③When the front-end application is running: intercept related HTML, JS and other files and replace them with local cache.

[0175] Since the page loading method can be implemented by only connecting to the SDK, on ​​the one hand, it is extremely low intrusive to the front-end code and non-invasive to other ends, with simple access and reduced complexity. In addition, no server-side development is required, and no complex offline package version, update, differential calculation, download and other services are required, so the cost is controllable. On the other hand, after connecting to the SDK, the cache hit strategy and update strategy can be freely configured, which has extremely high flexibility. On the other hand, the underlying layer of this disclosure is based on Service Worker, which is part of the w3c standard. Whether it is Android's WebView, iOS's WKWebView, or other PC browsers, they are all implemented in accordance with the w3c standard. Therefore, it can support most platforms based on WebView / WKWebView, including Android, iOS, PC browsers, mobile browsers (and any other APP based on standard WebView), and has a wide range of applications.

[0176] Exemplary devices

[0177] Figure 7 The following is a schematic diagram showing the composition of a page loading device in an exemplary embodiment of the present disclosure. Figure 7 As shown, the page loading device 700 may include a collection module 701, an interception module 702, a query module 703, and a forwarding module 704.

[0178] A collection module 701 is configured to collect dependent files through a front-end offline package software development kit (SDK) in an application program and store the dependent files in a local cache space;

[0179] An interception module 702 is configured to intercept and process a dependent file request sent by the application based on the current page when the application is running;

[0180] A query module 703 is configured to query the local cache space for a requested dependent file corresponding to the dependent file request;

[0181] The forwarding module 704 is configured to forward the requested dependent file according to the intercepted dependent file request when the requested dependent file exists, so that the application program loads the content of the current page.

[0182] According to an exemplary embodiment of the present disclosure, the page loading device 700 may further include an access module for adding a cache construction function in the configuration file of the application, and adding a cache execution function in the entry file of the application, so as to access the front-end offline package SDK in the application.

[0183] According to an exemplary embodiment of the present disclosure, the access module is also used to call the cache construction function to generate an offline index file in response to the construction instruction of the application; call the cache execution function to register the offline index file in response to the startup instruction of the application; after registration is completed, obtain the dependent file based on the offline index file.

[0184] According to an exemplary embodiment of the present disclosure, the access module is further used to call the cache construction function to obtain the dependency list of the application; determine the mapping table and index of the dependent file based on the dependency list; and generate the offline index file according to the mapping table and index.

[0185] According to an exemplary embodiment of the present disclosure, the access module is also used to extract the hypertext markup language HTML dependency file in the dependency list and calculate the hash value corresponding to the HTML dependency file; copy the HTML dependency file and rename the copied HTML dependency file based on the hash value; create a mapping relationship between the HTML dependency file and the copied HTML dependency file to obtain the mapping table; and replace the original file name of the HTML dependency file in the dependency list with the renamed file name to obtain the index.

[0186] According to an exemplary embodiment of the present disclosure, the query module 703 is also used to replace the target field in the uniform resource locator URL corresponding to the HTML request based on the mapping table in the offline index file of the application when the dependent file request is an HTML request, to obtain a replaced URL; and query whether the requested dependent file exists from the local cache space according to the replaced URL.

[0187] According to an exemplary embodiment of the present disclosure, the query module 703 is further configured to query whether the requested dependent file exists in the local cache space based on the URL corresponding to the non-HTML request when the dependent file request is a non-HTML request.

[0188] According to an exemplary embodiment of the present disclosure, the page loading device 700 may further include a dynamic cache module for configuring timing parameters in the cache construction function; after storing the dependent file in the local cache space, deleting the target file in the dependent file based on the timing parameters.

[0189] According to an exemplary embodiment of the present disclosure, the page loading device 700 may also include an update module for accessing the front-end offline package SDK based on the updated application when the application is updated; generating a new offline index file through the front-end offline package software development tool in the updated application; obtaining a new dependent file based on the new offline index file and storing the new dependent file in the local cache space.

[0190] The specific details of each module in the above-mentioned page loading device 700 have been described in detail in the corresponding page loading method, so they will not be repeated here.

[0191] It should be noted that although several modules or units of the device for action execution are mentioned in the detailed description above, this division is not mandatory. In fact, according to the embodiments of the present disclosure, the features and functions of two or more modules or units described above can be concretized in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided into multiple modules or units to be concretized.

[0192] Exemplary media

[0193] After introducing the method according to the exemplary embodiment of the present disclosure, next, a medium according to the exemplary embodiment of the present disclosure will be described.

[0194] In an exemplary embodiment of the present disclosure, a storage medium capable of implementing the above method is also provided. Figure 8 A schematic diagram schematically illustrates a computer-readable storage medium in an exemplary embodiment of the present disclosure, as shown in FIG. Figure 8 As shown, a program product 800 for implementing the above method according to an embodiment of the present disclosure is described. The program product 800 may be a portable compact disc read-only memory (CD-ROM) and include program code, and may be run on a terminal device, such as a mobile phone. However, the program product of the present disclosure is not limited thereto. In this document, a readable storage medium may be any tangible medium containing or storing a program, which may be used by or in conjunction with an instruction execution system, apparatus, or device.

[0195] Exemplary electronic devices

[0196] After introducing the method, apparatus, and medium according to the exemplary embodiments of the present disclosure, an electronic device according to the exemplary embodiments of the present disclosure will be introduced next.

[0197] Those skilled in the art will appreciate that various aspects of the present disclosure may be implemented as systems, methods, or program products. Therefore, various aspects of the present disclosure may be implemented in the following forms: a complete hardware implementation, a complete software implementation (including firmware, microcode, etc.), or a combination of hardware and software implementations, which may be collectively referred to herein as "circuits," "modules," or "systems."

[0198] In an exemplary embodiment of the present disclosure, an electronic device capable of implementing the above method is also provided. Figure 9 The following schematically shows a structural diagram of a computer system of an electronic device in an exemplary embodiment of the present disclosure.

[0199] It should be noted that Figure 9 The computer system 900 of the electronic device shown is only an example and should not limit the functions and scope of use of the embodiments of the present disclosure.

[0200] like Figure 9 As shown, the computer system 900 includes a central processing unit (CPU) 901, which can perform various appropriate actions and processes according to the program stored in the read-only memory (ROM) 902 or the program loaded from the storage part 908 into the random access memory (RAM) 903. Various programs and data required for system operation are also stored in the RAM 903. The CPU 901, ROM 902 and RAM 903 are connected to each other via a bus 904. An input / output (I / O) interface 905 is also connected to the bus 904.

[0201] The following components are connected to the I / O interface 905: an input section 906 including a keyboard, a mouse, and the like; an output section 907 including devices such as a cathode ray tube (CRT), a liquid crystal display (LCD), and a speaker; a storage section 908 including a hard disk and the like; and a communication section 909 including a network interface card such as a LAN (Local Area Network) card or a modem. The communication section 909 performs communication processing via a network such as the Internet. A drive 910 is also connected to the I / O interface 905 as needed. A removable medium 911, such as a magnetic disk, an optical disk, a magneto-optical disk, or a semiconductor memory, is installed in the drive 910 as needed, so that a computer program read therefrom can be installed into the storage section 908 as needed.

[0202] In particular, according to an embodiment of the present disclosure, the process described below with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network via the communication section 909, and / or installed from a removable medium 911. When the computer program is executed by the central processing unit (CPU) 901, various functions defined in the system of the present disclosure are executed.

[0203] It should be noted that the computer-readable medium shown in the embodiments of the present disclosure may be a computer-readable signal medium or a computer-readable storage medium or any combination of the two. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or component, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM), a flash memory, an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present disclosure, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, device or device. In the present disclosure, a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, which carries a computer-readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer-readable medium may be transmitted using any suitable medium, including but not limited to wireless, wired, or any suitable combination thereof.

[0204] The flowcharts and block diagrams in the accompanying drawings illustrate the possible implementation architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each box in the flowchart or block diagram can represent a module, program segment, or a part of code, and the above-mentioned module, program segment, or a part of code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in an order different from that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flowchart, and the combination of boxes in the block diagram or flowchart, can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0205] The units involved in the embodiments described in this disclosure may be implemented in software or hardware, and the units described may also be provided in a processor. In some cases, the names of these units do not constitute limitations on the units themselves.

[0206] As another aspect, the present disclosure further provides a computer-readable medium, which may be included in the electronic device described in the above embodiments, or may exist independently and not be incorporated into the electronic device. The computer-readable medium carries one or more programs, and when the one or more programs are executed by the electronic device, the electronic device implements the methods described in the above embodiments.

[0207] It should be noted that although several modules or units of the device for action execution are mentioned in the detailed description above, this division is not mandatory. In fact, according to the embodiments of the present disclosure, the features and functions of two or more modules or units described above can be concretized in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided into multiple modules or units to be concretized.

[0208] Through the description of the above embodiments, it is easy for those skilled in the art to understand that the example embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solution according to the embodiments of the present disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, and includes several instructions to enable a computing device (which can be a personal computer, a server, a touch terminal, or a network device, etc.) to execute the method according to the embodiments of the present disclosure.

[0209] Other embodiments of the present disclosure will readily occur to those skilled in the art after considering the specification and practicing the invention disclosed herein. This disclosure is intended to cover any variations, uses, or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art not disclosed herein.

[0210] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes can be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A page loading method, characterized in that: include: Add a cache construction function to the application's configuration file, and add a cache execution function to the application's entry file to access the front-end offline package SDK in the application; In response to a construction instruction of the application, the cache construction function is called to generate an offline index file; in response to a startup instruction of the application, the cache execution function is called to register the offline index file; After registration is completed, dependent files are obtained based on the offline index file, and the dependent files are stored in the local cache space; When the application is running, intercepting and processing the dependent file request sent by the application based on the current page; querying from the local cache space whether there is a requested dependent file corresponding to the dependent file request; When the request-dependent file exists, the request-dependent file is forwarded according to the intercepted dependent file request, so that the application program loads the content of the current page.

2. The page loading method according to claim 1, characterized in that: The calling of the cache construction function to generate an offline index file includes: Calling the cache construction function to obtain the dependency list of the application; Determine the mapping table and index of the dependent file based on the dependency list; The offline index file is generated according to the mapping table and the index.

3. The page loading method according to claim 2, characterized in that: The determining the mapping table and index of the dependent file based on the dependency list includes: Extracting a hypertext markup language HTML dependency file from the dependency list, and calculating a hash value corresponding to the HTML dependency file; Copy the HTML dependency file and rename the copied HTML dependency file based on the hash value; Creating a mapping relationship between the HTML dependent file and the copied HTML dependent file to obtain the mapping table; and The original file name of the HTML dependency file in the dependency list is replaced with the renamed file name to obtain the index.

4. The page loading method according to claim 2, wherein: When the dependent file request is an HTML request, querying from the local cache space whether there is a request dependent file corresponding to the dependent file request includes: Based on the mapping table in the offline index file of the application, the target field in the uniform resource locator (URL) corresponding to the HTML request is replaced to obtain a replaced URL; The local cache space is queried based on the replaced URL to determine whether the requested dependent file exists.

5. The page loading method according to claim 1, wherein: When the dependent file request is a non-HTML request, querying from the local cache space whether there is a request dependent file corresponding to the dependent file request includes: Based on the URL corresponding to the non-HTML request, query the local cache space to see whether the request-dependent file exists.

6. The page loading method according to claim 1, characterized in that: The method further comprises: Configuring timing parameters in the cache construction function; After the dependent files are stored in the local cache space, the target file in the dependent files is deleted based on the timing parameter.

7. The page loading method according to claim 1, characterized in that: The method further comprises: When the application is updated, accessing the front-end offline package SDK based on the updated application; Generate a new offline index file through the front-end offline package software development tool in the updated application; Obtain new dependent files based on the new offline index file and store the new dependent files in the local cache space.

8. A page loading device, characterized in that: include: An access module is used to add a cache construction function to the configuration file of the application, and to add a cache execution function to the entry file of the application, so as to access the front-end offline package SDK in the application; A collection module, configured to call the cache construction function to generate an offline index file in response to a construction instruction of the application; In response to a startup instruction of the application, calling the cache execution function to register the offline index file; After registration is completed, dependent files are obtained based on the offline index file, and the dependent files are stored in the local cache space; An interception module is used to intercept and process dependent file requests sent by the application based on the current page when the application is running; A query module, configured to query the local cache space for a requested dependent file corresponding to the dependent file request; The forwarding module is used to forward the request dependent file according to the intercepted dependent file request when the request dependent file exists, so that the application program loads the content of the current page.

9. The page loading device according to claim 8, characterized in that: The access module is further configured to: The cache construction function is called to obtain a dependency list of the application; a mapping table and an index of the dependency file are determined based on the dependency list; and the offline index file is generated according to the mapping table and the index.

10. The page loading device according to claim 9, characterized in that: The access module is further configured to: Extracting a hypertext markup language HTML dependent file from the dependency list and calculating a hash value corresponding to the HTML dependent file; copying the HTML dependent file and renaming the copied HTML dependent file based on the hash value; creating a mapping relationship between the HTML dependent file and the copied HTML dependent file to obtain the mapping table; and replacing the original file name of the HTML dependent file in the dependency list with the renamed file name to obtain the index.

11. The page loading device according to claim 8, characterized in that: The query module is further configured to: When the dependent file request is an HTML request, based on the mapping table in the offline index file of the application, the target field in the uniform resource locator (URL) corresponding to the HTML request is replaced to obtain a replaced URL; and according to the replaced URL, the local cache space is queried to see whether the requested dependent file exists.

12. The page loading device according to claim 8, characterized in that: The query module is further configured to: When the dependent file request is a non-HTML request, based on the URL corresponding to the non-HTML request, query the local cache space to see whether the requested dependent file exists.

13. The page loading device according to claim 8, characterized in that: The page loading device also includes: A dynamic cache module is used to configure timing parameters in the cache construction function; after storing the dependent files in the local cache space, the target file in the dependent files is deleted based on the timing parameters.

14. The page loading device according to claim 8, characterized in that: The page loading device also includes: The update module is used to access the front-end offline package SDK based on the updated application when the application is updated; generate a new offline index file through the front-end offline package software development tool in the updated application; obtain new dependent files based on the new offline index file and store the new dependent files in the local cache space.

15. A computer-readable storage medium having a computer program stored thereon, wherein when the program is executed by a processor, the page loading method according to any one of claims 1 to 7 is implemented.

16. An electronic device, characterized in that: include: one or more processors; A storage device for storing one or more programs, which, when executed by the one or more processors, enables the one or more processors to implement the page loading method according to any one of claims 1 to 7.

Images