CN116166911B

CN116166911B - Page loading method and device, storage medium and electronic equipment

Info

Publication number: CN116166911B
Application number: CN202310164805.9A
Authority: CN
Inventors: 王敏; 杨运心; 谭歆
Original assignee: Hangzhou Netease Cloud Music Technology Co Ltd
Current assignee: Hangzhou Netease Cloud Music Technology Co Ltd
Priority date: 2023-02-13
Filing date: 2023-02-13
Publication date: 2025-09-19
Anticipated expiration: 2043-02-13
Also published as: CN116166911A

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

Page loading method and device, storage medium and electronic equipment

Technical Field

The disclosure relates to the technical field of computers, and in particular relates to a page loading method, a page loading device, a storage medium and electronic equipment.

Background

The offline package is that static resources in pages including html, javaScript, CSS are packaged into a compressed package, the offline package is downloaded to the local in advance, and then the offline package is directly loaded from the local through opening of a client, so that the influence of the network environment on the H5 page is avoided to the greatest extent.

In the existing offline package service technology, a front-end application is usually connected with an offline package, a static type application can directly start an offline package function based on the provision of a front-end deployment system, and a dynamic type application needs to be connected with an offline package plug-in, and is packaged and submitted to an offline package service of a deployment platform in the construction process. However, the above methods have the problems of large invasiveness, few supported platforms, high development cost, high complexity, low flexibility, non-standardization and the like.

Is used only to enhance an understanding of the background of the disclosure and may therefore include information that does not form the prior art that is known to a person of ordinary skill in the art.

Disclosure of Invention

The disclosure aims to provide a page loading method, a page loading device, a storage medium and electronic equipment, and aims to solve the problems of strong invasiveness and high complexity of offline package service.

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

According to one aspect of the embodiment of the disclosure, a page loading method is provided, which comprises the steps of collecting a dependent file through a front-end offline package software development kit SDK in an application program, storing the dependent file in a local cache space, intercepting a dependent file request sent by the application program based on a current page when the application program runs, inquiring whether a request dependent file corresponding to the dependent file request exists in the local cache space, and forwarding 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.

In one embodiment, based on the foregoing, before the collecting the dependency files by the front-end offline package software development kit SDK in the application, the method further comprises adding a cache building function in the configuration file of the application, and adding a cache executing function in the entry file of the application to access the front-end offline package SDK in the application.

In one embodiment, based on the foregoing scheme, the collecting the dependent file by the front-end offline package software development kit SDK in the application program includes calling the cache construction function to generate an offline index file in response to a construction instruction of the application program, calling the cache execution function to register the offline index file in response to a start instruction of the application program, and acquiring the dependent file based on the offline index file after the registration is completed.

In one embodiment, based on the foregoing scheme, the invoking the cache construction function to generate an offline index file includes invoking the cache construction function to obtain a dependency list of the application, determining a mapping table and an index of the dependency file based on the dependency list, and generating the offline index file according to the mapping table and the index.

In one embodiment, based on the foregoing scheme, the determining the mapping table and the index of the dependent file based on the dependency list includes extracting a html dependent file in 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 an original file name of the html dependent file in the dependency list with a renamed file name to obtain the index.

In one embodiment, based on the foregoing scheme, when the dependent file request is an html request, the querying whether a request dependent file corresponding to the dependent file request exists in the local cache space includes replacing a target field in a url corresponding to the html request based on a mapping table in an offline index file of the application program to obtain a replaced url, and querying whether the request dependent file exists in the local cache space according to the replaced url.

In one embodiment, based on the foregoing scheme, when the dependent file request is a non-html request, the querying from the local cache space whether the request dependent file corresponding to the dependent file request exists includes querying from the local cache space whether the request dependent file exists based on url corresponding to the non-html request.

According to a second aspect of the embodiment of the present disclosure, a page loading device is provided, which includes a collection module, configured to collect a dependency file through a front-end offline package software development kit SDK in an application program, and store the dependency file in a local cache space, an interception module, configured to intercept a dependency file request sent by the application program based on a current page when the application program runs, a query module, configured to query whether a request dependency file corresponding to the dependency file request exists in the local cache space, and a forwarding module, configured to forward the request dependency file according to the intercepted dependency file request when the request dependency file exists, so that the application program loads content of the current page.

According to a third aspect of the embodiments of the present disclosure, there is provided a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements a page loading method as in the above embodiments.

According to a fourth aspect of the embodiments of the present disclosure, there is provided an electronic device, which is characterized by comprising one or more processors, and storage means for storing one or more programs, which when executed by the one or more processors, cause the one or more processors to implement the page loading method as in the above embodiments.

Exemplary embodiments of the present disclosure may have some or all of the following advantages:

In the technical schemes provided by some embodiments of the present disclosure, a front-end offline package SDK is accessed in an application program in advance, and then, when an application is started, a dependent file is collected through the SDK and stored in a local cache space, and then, when an application is running, a dependent file request can be intercepted, and after the existence of the request dependent file is queried in the local cache space, the request dependent file is returned. The page loading method can be realized only by accessing the SDK, has extremely low invasiveness to the front end code, has no invasiveness to other ends, is simple to access, has reduced complexity, does not need to be developed by a server, does not need to be subjected to complex off-line package version, updating, delta calculation, downloading and other services, has controllable cost, and has extremely high flexibility after being accessed to the SDK.

It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.

Drawings

The above, as well as additional purposes, features, and advantages of exemplary embodiments of the present disclosure will become readily apparent from the following detailed description when read in conjunction with the accompanying drawings. Several embodiments of the present disclosure are illustrated by way of example, and not by way of limitation, in the figures of the accompanying drawings, in which:

FIG. 1 schematically illustrates a flow diagram of a page loading method in an exemplary embodiment of the present disclosure;

FIG. 2 schematically illustrates a flow diagram for collecting dependent files in an exemplary embodiment of the present disclosure;

FIG. 3 schematically illustrates a flowchart of a method of generating an offline index file in an exemplary embodiment of the present disclosure;

FIG. 4 schematically illustrates a flow chart of a method of querying a request dependent file in an exemplary embodiment of the disclosure;

FIG. 5 schematically illustrates a flowchart of another method of querying a request dependent file in an exemplary embodiment of the present disclosure;

FIG. 6 schematically illustrates a flowchart of a method for offline file-based page loading in an exemplary embodiment of the present disclosure;

FIG. 7 schematically illustrates a composition diagram of a page loading apparatus in an exemplary embodiment of the present disclosure;

FIG. 8 schematically illustrates a schematic diagram of a computer-readable storage medium in an exemplary embodiment of the present disclosure;

Fig. 9 schematically illustrates a structural diagram of a computer system of an electronic device in an exemplary embodiment of the present disclosure.

In the drawings, the same or corresponding reference numerals indicate the same or corresponding parts.

Detailed Description

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 presented merely to enable one skilled in the art to better understand and practice the present disclosure and are not intended to limit the scope of the present disclosure in any way. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.

Those skilled in the art will appreciate that embodiments of the present disclosure may be implemented as an apparatus, device, method, or computer program product. Accordingly, the present disclosure may be embodied in the form of entirely hardware, entirely software (including firmware, resident software, micro-code, etc.) or in a combination of hardware and software.

According to an embodiment of the disclosure, a page loading method, a page loading device, an electronic device and a computer readable storage medium are provided.

Any number of elements in the figures are for illustration and not limitation, and any naming is used for distinction only, and not for any limiting sense.

The principles and spirit of the present disclosure are explained in detail below with reference to several representative embodiments thereof.

Summary of The Invention

The inventor discovers that in the prior art, aiming at the offline package service technology, a cloud company adopts a technical scheme provided by a front-end-based system, and can directly start an offline package function by static type application, and the dynamic type application needs to be accessed into an offline package plug-in, and is packaged and submitted to the offline package service of a deployment platform in the construction process. Here we mainly take static applications as examples to illustrate the relevant schemes.

The head-end application accesses the offline package. When the front-end application builds, deploys and distributes on the deployment platform, the ① static type resources are formed into an offline package (full package) and distributed on the CDN for downloading by the App, and ② submits the offline package to the offline package service system to calculate the information of the full package, the differential package, the offline package ID, the MD5 and the like. The front-end section is summarized as the deployment of the front-end itself + the generation of offline packages.

The client then goes off-line for packet processing. Taking iOS as an example for illustration, the flow of Android is basically consistent. When the App is started, firstly reading configuration of the App, and acquiring a setting item related to the offline package, wherein the setting item comprises the following steps:

app names such as music-cloud somewhere, moyi-meet, etc.;

download paths such as [ sandbox ]/Documents/userData/WebviewCache;

Whether to preload Ajax requests, such as true;

A polling period, such as 7200 seconds, i.e., every 7200 seconds, will request the interface to check for updates;

The interface address of the offline package service, default to the back-end interface address of the App, e.g., https:// api. Music.163.Com.

The manager that constructs the offline package from the settings and then invokes the INITCACHE method of the manager to initialize the local environment of the offline package, including:

The creation of a local directory, skipped if it already exists before;

the creation of a local database, if existing before, is skipped, the offline package information in the database is read and cached in a memory;

the system is injected with its own implemented NSurlProtocol subclass WebCacheProtocol to intercept all requests that occur in the WKWebView page.

After the initialization is completed, a request is sent to the configured offline package service interface address to obtain the current latest complete offline package information, and the current latest complete offline package information is compared with the offline package information in the local database to check the update condition of the offline package. Each offline package contains the following information:

Packet ID;

local version number;

the latest version number;

Status;

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

Download address url of full package;

MD5 of the full packet for integrity check;

the download address url of the delta packet (possibly not);

MD5 of the delta packet for integrity check (possibly not);

the Ajax list that needs to be preloaded.

The method comprises the steps of marking a local offline package ID as 'no existing' state if the local offline package ID is not in a latest list, marking the local offline package ID as 'latest' state if the local offline package ID is in the latest list and the local version number is the same as the version number of an offline package with the same ID corresponding to the latest list, marking the local offline package ID as 'needed to be updated' state if the local offline package ID is not in the latest list, and marking the local offline package ID as 'needed to be downloaded' if the local offline package ID is not in the latest list.

After the last step, a list obtained by de-duplication and merging of the local offline package list and the latest offline package list is obtained, all states are updated, the state of each offline package of the list is traversed, and if the state is:

Update meta information of an offline package (typically no change);

Deleting the local file and the corresponding record of the database;

downloading the increment packet (if any) or the full quantity packet, updating the corresponding record of the database, decompressing and covering the locally existing file after the MD5 verification is passed;

downloading the full package, adding the database record, and decompressing to the appointed catalogue after the MD5 verification is passed.

The above steps are started each time or are performed once after the 'polling period' time passes after the start, so that the local information and the file are ensured to be in a new state.

When a new url is opened with WKWebView in an APP, webCacheProtocol will operate as follows:

1. judging whether an offline package function is globally started, and if so, jumping to 7;

2. Judging whether the url has a forced-travel online request pageforceonline parameter or not, and if yes, jumping 7;

3. judging whether the domain name of the url is in an associated domain name list of a certain offline package, if not, jumping 7;

4. judging whether the offline packet local resource corresponding to urlquery exists or not, and if not, jumping 7;

5. Judging whether the resource Data corresponding to the url is cached in the memory, if yes, directly returning, and jumping to 8;

6. reading a local file corresponding to url, updating a memory cache, returning, and jumping to 8;

7. The offline packet cache is not hit, a normal network request is initiated, and data is returned;

8. And (5) ending.

Meanwhile, when WKWebView opens a new url for the first time, we will find the preloaded Ajax list of the offline package corresponding to it, send network request in advance and buffer the result into the memory, and when the offline package is loaded in WKWebView and the corresponding Ajax request is really needed to be sent through JSBrdige, the data can be directly obtained from the memory.

In the prior art, the technical scheme adopted by an A company is consistent with the thought, principle and other aspects of the scheme, the front end generates an offline package during construction and deployment, a service end provides services such as downloading of the offline package, differential calculation, metadata pulling, version management and the like, a client accesses the offline package function, and a request is matched according to a certain rule to intercept the local and use local offline package data for replacement.

However, there are several obvious differences that some cloud does not distinguish the request types, get and post are intercepted, which is related to some interface pre-request function of the cloud, and has little relation with the offline package itself, some resource of the cloud is matched, and part of the path is dependent on the directory structure in the offline package. In the scheme of the cloud, the cloud is provided with a certain offline package, wherein all offline packages are provided with front-end static files, and some meta-information and configuration are obtained from interfaces. In some cases, the offline package has configuration information and data content. Wherein the configuration information in the package is similar to the meta information and configuration of the user, and the data content is similar to the static file of the front end of the user. There is a global & public and business distinction in a scheme. The cloud sometime does not have the concept of so-called global. No incremental packet (delta packet) related optimization is involved in certain schemes.

By knowing the above technical scheme, it is not difficult to find that the existing offline package technology has the following problems:

1. The method is large in invasiveness, the traditional scheme generally needs to be accessed into the SDK of the Android and the iOS, and the method is large in invasiveness to the existing APP. And the APP needing to be accessed with the offline package function is accessed with the SDK and is transformed.

2. The number of supported platforms is small, and the traditional scheme only supports Android and iOS. Web ends (PCs, H5) cannot be supported, such as desktop browsers, sharing H5 links to other APPs.

3. The development cost is high, the complexity is high, android and iOS are required to be supported respectively, a specific strategy is required to be aligned by two ends, and updating and iteration are required to be developed by two ends. Meanwhile, the server is required to develop corresponding offline package updating and distributing services.

4. The flexibility is low, the iteration of any function is represented in two aspects, the double-end release version is needed, the strategy is relatively fixed, and the operating space of the front end (JS) is small.

5. Non-standardized scheme thinking is generally consistent, but the details of functions, APIs and the like are thousands of strange. The difference between cloud and alien is an example.

Accordingly, the present disclosure provides a page loading method, which addresses the problems in the prior art. Various non-limiting embodiments of the present disclosure are described in detail below.

Application scene overview

It should be noted that the following application scenarios are only shown for facilitating understanding of the spirit and principles of the present disclosure, and embodiments of the present disclosure are not limited in this respect. Rather, embodiments of the present disclosure may be applied to any scenario where applicable.

The method and the device can be applied to a scene of page loading in an application program, for example, when the application program at the front end runs, if the page depends on various js, css, pictures and other files, after the page is loaded, the page can request the dependent files, namely, the page sends a dependent file request to an application service, and further, the corresponding dependent files are obtained for loading the page.

Exemplary method

Implementation details of the technical solutions of the embodiments of the present disclosure are set forth in detail below.

Fig. 1 schematically illustrates a flow diagram of a page loading method in an exemplary embodiment of the present disclosure. As shown in fig. 1, the page loading method includes steps S101 to S104:

Step S101, collecting a dependent file through a front-end offline package SDK in an application program, and storing the dependent file in a local cache space;

step S102, when the application program runs, intercepting the application program based on a dependent file request sent by a current page;

Step S103, inquiring whether a request dependent file corresponding to the dependent file request exists in the local cache space;

And step S104, when the request dependent file exists, forwarding the request dependent file according to the intercepted dependent file request so as to enable the application program to load the content of the current page.

Hereinafter, each step of the page loading method in the present exemplary embodiment will be described in more detail with reference to the accompanying drawings and examples.

In step S101, the dependent file is collected by the front-end offline package SDK in the application program, and stored in the local cache space.

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 ). And collecting corresponding resources through the SDK when the front-end application is constructed to obtain a dependent file and storing the dependent file.

Thus, in one embodiment of the present disclosure, the method further comprises adding a cache build function to a configuration file of an application program and adding a cache execute function to an entry file of the application program to access the front-end offline package SDK in the application program before collecting the dependency file by the front-end offline package SDK in the application program.

Specifically, the front-end SDK mainly exposes two methods to the outside:

(1) The build function CacheBuildPlugin () is cached the plug-in that the front-end application uses in the build, deployment. The main functions of the plug-in are resource-dependent collection, offline package generation and sw.js generation. The sw.js is a default file name, and the function of this file will be explained later.

(2) The cache execution function register (). The front-end application registers and installs the sw.js method at run-time.

The main stream webpack can be adopted in specific execution, if webpack is not used as a construction tool, the SDK can also be directly operated in a command line mode, and the method is applicable to almost all projects.

Therefore, when accessing the SDK, cacheBuildPlugin () needs to be added to the building flow of the front-end application, i.e., placed into the configuration file of the application. CacheBuildPlugin () is mainly populated with the following parameters:

① Parameter strategies, a plurality of caching strategies can be configured, and the caching strategy can be flexibly selected according to requirements, for example, CACHEFIRST is a default value. The method comprises the steps of using the cache preferentially, degrading the cache to a network request, cacheOnly using only the cache, networkFirst using the cache optimally, using the cache when the network request does not respond, STALEWHILEREVALIDATE using the cache preferentially, and initiating the network request to update the cache data.

② Parameter filename-js file name which can be finally output by CacheBuildPlugin can be modified, and is not modified generally, and the default value is sw. The js file that is output will be registered in the Service workbench by the register () method, and will bear most of the functions of the offline package, which will be discussed in detail later.

③ Parameters publicPath, the corrected path can be ignored.

It should be noted that CacheBuildPlugin () is mainly used in webpack at present, and other building tools such as vite may be theoretically supported.

On the other hand, register () is added to an entry file of an application program so that the register () method can be performed when the front-end application is started.

For example, taking the exact framework as an example, assuming that the entry file of the current project is main.jsx, the entry file only needs to be imported and executed in main.jsx, and if the filename is customized in CacheBuildPlugin or command line, the entry file can be imported when the register is called.

After accessing the SDK, the step of collecting the dependent file in step S101 is performed. FIG. 2 schematically illustrates a flow diagram for collecting dependent files in an exemplary embodiment of the present disclosure. As shown in fig. 2, the method for collecting the dependent file in step S101 is specifically as follows:

Step S201, responding to a construction instruction of the application program, and calling the cache construction function to generate an offline index file;

step S202, calling the cache execution function to register the offline index file in response to a starting instruction of the application program;

step S203, after the registration is completed, obtaining the dependent file based on the offline index file.

Specifically, the collection of dependent files is the process of collecting resources. Relying on literally means, for example, for the front-end application to run, it relies on html, js, css and other resources, i.e., on files, and for html it relies on js, css, etc. that it itself introduces. The offline package technology is a technology for downloading the 'dependent' resources in advance and caching the resources locally so as to improve the loading speed of the front-end page.

In step S201, in response to a construction instruction of the application program, the cache construction function is called to generate an offline index file. Specifically, the method comprises the following steps:

Step 1, calling the cache construction function to acquire a dependency list of the application program;

specifically, for example, in webpack mode, we can directly use the stats statistics of webpack to screen out the dependency files we need. In the case of command line mode or webpack stats being unavailable, we can read the local folder directly, traverse the front end build product, and collect dependencies. For example, the command is swcache build "/dist", then the SDK will traverse the collection "/dist" directory.

After the dependency collection is completed, we get the entire dependency list, which is essentially an array shaped as:

and step 2, determining a mapping table and an index of the dependent file based on the dependency list.

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

The offline index file sw.js mainly comprises a mapping table and an index, wherein the mapping table is used for caching html files, and the index is used for caching other resource files except html. The offline package in the prior art is a compressed package of static files, which is updated by using an incremental package, or is a compressed package of static files and configuration files, and may contain files of multiple service lines.

The process of creating the mapping table and index is described in detail below. Specifically, in one embodiment of the present disclosure, step 2 is specifically as follows:

step2.1, extracting html dependency files in the dependency list, and calculating hash values corresponding to the html dependency files;

And screening html in the list, namely path. Html and guide. Html. The contents of the html file are then read and the md4 hash value is calculated, assuming h836dj35 and 83isyrn6, respectively.

2.2, Copying the html dependent file, and renaming the copied html dependent file based on the hash value;

The file is copied and renamed, the hash value is written to the file name, thus adding two more files path.h836dj35.Html and guide.83isyrn6.Html.

Step 2.3, creating a mapping relation between the html dependent file and the copied html dependent file to obtain the mapping table;

a mapping table is constructed, the key is the original html file name, and the value is the file name with the hash value.

And 2.4, replacing the original file name of the html dependent file in the dependency list with the renamed file name to obtain the index.

And constructing an index, and replacing the original html file name with a new file name with a hash value.

Taking the dependency list in the foregoing as an example, the created mapping table and index are respectively:

and step 3, generating the offline index file according to the mapping table and the yes index.

The mapping table and the index are provided, the next step is that the sw.js is generated, the placeholder of the index and the mapping table can be pre-embedded in the sw.js, the file is directly read, the placeholder is replaced by real data, and the real data is stored.

Fig. 3 schematically illustrates a flowchart of a method for generating an offline index file according to an exemplary embodiment of the present disclosure, and referring to fig. 3, the method for generating an offline index file specifically includes the following steps:

Step S301, execute CacheBuildPlugin, step S302, collect dependencies according to webpack status, or

Step S303, executing a command line tool, and step S304, traversing the local folder collection dependencies;

step S305, generating a dependency list based on the dependencies;

step S306, generating a mapping table plus an index;

step S307, generating sw.js according to the sw.js.

In step S202, in response to the start instruction of the application program, the cache execution function is called to register the offline index file.

Specifically, when the application program of the front end is started, the cache execution function register () method is executed, and the sw.js file generated in step S201 is registered and installed in the ServiceWorker. Wherein Serviceworker essentially acts as a proxy between the Web application and browser, and also as a proxy between the browser and the network when the network is available Serviceworker is an event driven worker registered under the specified source and path. The related page or website is controlled by adopting JavaScript, the access and resource request are intercepted and modified, and the resources are cached in a fine granularity. You can fully control the performance of an application in a specific situation (the most common situation is that the network is not available).

In step S203, after the registration is completed, the dependent file is acquired based on the offline index file.

Specifically, after the sw.js file is installed, the sw.js will start to automatically download the files in the index and cache the files in the local storage of Webview/WKWebview. Thus, the updating of the sw.js and the local file is fine-grained, and the success rate of downloading and updating is higher.

In step S102, when the application program runs, interception processing is performed on the application program based on the dependent file request sent by the current page.

Specifically, when the front-end application program runs, if the page depends on various js, css, pictures and other files, the page is requested to send a dependent file request to the application service after the page is loaded.

At this time, the registered sw.js intercepts these requests (Webview itself feature, but implements interception of the requests by Service Worker), and is then used for resource replacement in subsequent offline packages.

The dependent file request can be of two types, one is to request an html type dependent file, which is an html request, and the other is to request a non-html type dependent file, which is a non-html request. html (HyperText Markup Language ) is a standard markup language for creating web pages. Html can be used to build its own web site, which runs on a browser and is parsed by the browser.

In step S103, it is queried from the local cache space whether a request dependent file corresponding to the dependent file request exists.

Specifically, after the registered sw.js intercepts the file-dependent request, the files which are not cached in the local storage space are searched, and the files in the local storage space are directly used for returning after the files are searched, so that the purpose of accessing js and other files offline is achieved, and the network request is not needed. The manner of querying differs for different dependent file requests, as follows.

In one embodiment of the disclosure, when the dependent file request is an html request, the querying whether a request dependent file corresponding to the dependent file request exists in the local cache space includes replacing a target field in url corresponding to the html request based on a mapping table in an offline index file of the application program to obtain a replaced url, and querying whether the request dependent file exists in the local cache space according to the replaced url.

Specifically, the html type dependent file needs to be replaced by a mapping table, and then the replaced url is used to locally store the matching.

Fig. 4 schematically illustrates a flowchart of a method for querying a request dependent file in an exemplary embodiment of the present disclosure, and referring to fig. 4, the method for querying a request dependent file specifically includes the steps of requesting path.html from a current page, intercepting the request by a Service Worker, mapping the request to an address path [ contenthash ] html of a local cache, i.e., path.h836dj35.Html, according to a mapping relation of html, then querying path [ contenthash ] html cache in a local Cashes cache space, and returning a file of the local cache space to the page by the Service Worker after querying the existence of the query.

This is done because all current dependent files contain a hash of the file name of most of the resources themselves, except html. The hash is generated according to the file content, and the file name is changed immediately after the file content is changed, so that the new file is not matched with the old cache. But the html file name is a part of the url of the page, so that the html file name is unchanged every time the url is issued, and therefore, the html file name always matches the old cache in order to ensure the readability and the uniqueness of the url. This problem can be solved by mapping the mapping table. Each time of construction and deployment, if html content changes, the mapping will also change.

In one embodiment of the disclosure, when the dependent file request is a non-html request, the querying from the local cache space whether the request dependent file corresponding to the dependent file request exists includes querying from the local cache space whether the request dependent file exists based on url corresponding to the non-html request.

Specifically, the non-html type dependent file can be directly matched by using url to store locally.

FIG. 5 schematically illustrates a flowchart of another query request dependent file method in an exemplary embodiment of the present disclosure, with reference to FIG. 5, which includes the steps of a current page request path [ contenthash ] js, request intercepted by a ServiceWorker, serviceWorker querying path [ contenthash ] js cache in local Cashes cache space, returning a file of the local cache space to the page after the query exists.

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

Specifically, if the request dependency file corresponding to the dependency file request exists in the local Cashes cache space, the request dependency file is returned to the application program according to the original dependency file request for page loading.

In one embodiment of the present disclosure, the method further comprises configuring timing parameters in the cache construction function, and deleting target files in the dependent files based on the timing parameters after storing the dependent files in a local cache space.

Specifically, the timing parameter runtimeCache may also be configured in the cache building function CacheBuildPlugin () to configure the dynamic cache capabilities of the runtime. A buffer named image may be created, with pictures ending at png, jpg, gif according to a regular match, buffered for 30 days. Assuming that the page request avatar.png picture is captured by sw.js and cached offline, the user can directly use offline caching without network request when opening the page request avatar.png again.

Fig. 6 schematically illustrates a flowchart of a page loading method based on an offline file in an exemplary embodiment of the present disclosure, and referring to fig. 6, the page loading method based on an offline file specifically includes the following steps:

step S601, a browser sends a file-dependent request to a current page;

Step S602, judging whether the dependent file request is an html request, if yes, executing step S603, namely acquiring a new file name by using a mapping table, and then executing step S604, and if not, directly executing step S604;

Step S604, if there is a matched cache in the local cache, step S605 is executed, namely the cache is intercepted and responded to the browser, and if not, step S606 is executed, namely the downgrade to network request is returned to the browser.

In one embodiment of the disclosure, the method further comprises accessing the front-end offline package SDK based on the updated application program when the application program is updated, generating a new offline index file through a front-end offline package software development tool in the updated application program, acquiring a new dependent file based on the new offline index file, and storing the new dependent file in a local cache space.

Specifically, the offline index file of the present disclosure directly embeds the index and mapping table in sw.js, and automatically downloads specific files after sw.js is installed. When the front end code changes, the build deployment environment generates new indexes, mapping tables and sw. After the user opens the page, new sw.js is installed, a new cache file is downloaded (the cache which is not changed is already present and the cache which is not in the index is deleted), and the updating operation is completed.

Based on the method, the page loading method is concentrated in the front-end SDK, and the whole SDK mainly works in three parts:

① When the front-end application is constructed, corresponding resources, mainly html, js, css, image, font and the like, are collected through CacheBuildPlugin (), and a sw.js file is generated.

② When the front-end application is started, a register () method is executed, the sw.js is registered and installed in the Service workbench, and the downloading of the resource to the local storage is started.

③ And when the front-end application runs, intercepting related files such as html, js and the like, and replacing the files by using a local cache.

The method can realize page loading by only accessing the SDK, has extremely low invasiveness to front-end codes, has no invasiveness to other ends, is simple to access, has reduced complexity, does not need Service end development, does not need complex offline package version, updating, differential calculation, downloading and other services, has controllable cost, can freely configure cache hit strategies and update strategies after accessing the SDK, has extremely high flexibility, is realized based on Service workbench at the bottom layer, is part of w3c standard, is realized according to w3c standard by the WebView of Android, is realized by the WKWebView of iOS or is realized by other PC end browsers, can support most platforms based on WebView/WKWebView, including Android, iOS, PC browser, mobile phone browser (and any other APP based on standard WebView), and has wide application range.

Exemplary apparatus

Fig. 7 schematically illustrates a composition diagram of a page loading apparatus in an exemplary embodiment of the disclosure, and as shown in fig. 7, the page loading apparatus 700 may include a collection module 701, an interception module 702, a query module 703, and a forwarding module 704. Wherein:

the collection module 701 is configured to collect a dependent file through a front-end offline package software development kit SDK in an application program, and store the dependent file in a local cache space;

the interception module 702 is configured to intercept, when the application is running, a file-dependent request sent by the application based on a current page;

A query module 703, configured to query from the local cache space whether a request dependency file corresponding to the dependency file request exists;

And the forwarding module 704 is configured 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.

According to an exemplary embodiment of the present disclosure, the page loading apparatus 700 may further include an access module for adding a cache building function to a configuration file of the application program and adding a cache executing function to an entry file of the application program to access the front-end offline package SDK in the application program.

According to the exemplary embodiment of the disclosure, the access module is further used for calling the cache construction function to generate an offline index file in response to a construction instruction of the application program, calling the cache execution function to register the offline index file in response to a starting instruction of the application program, and acquiring the dependent file based on the offline index file after registration is completed.

According to an exemplary embodiment of the disclosure, the access module is further configured to call the cache building function to obtain a dependency list of the application program, determine a mapping table and an index of the dependency file based on the dependency list, and generate the offline index file according to the mapping table and the index.

According to an exemplary embodiment of the disclosure, the access module is further configured to extract a html dependency file in the dependency list, calculate a hash value corresponding to the html dependency file, copy the html dependency file, 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 an original file name of the html dependency file in the dependency list with a renamed file name to obtain the index.

According to an exemplary embodiment of the present disclosure, the query module 703 is further configured to replace, when the dependent file request is an html request, a target field in a url corresponding to the html request based on a mapping table in an offline index file of the application program, to obtain a replaced url, and query whether the requested dependent file exists in the local cache space according to the replaced url.

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

According to an exemplary embodiment of the present disclosure, the page loading apparatus 700 may further include a dynamic caching module configured to configure a timing parameter in the cache building function, and delete a target file in the dependent file based on the timing parameter after the dependent file is stored in a local cache space.

According to an exemplary embodiment of the present disclosure, the page loading device 700 may further include an update module, configured 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 a front-end offline package software development tool in the updated application, obtain a new dependent file based on the new offline index file, and store the new dependent file in the local cache space.

The specific details of each module in the above-mentioned page loading device 700 are described in detail in the corresponding page loading method, so that the details are not repeated here.

It should be noted that although in the above detailed description several modules or units of a device for action execution are mentioned, such a division is not mandatory. Indeed, the features and functionality of two or more modules or units described above may be embodied in one module or unit in accordance with embodiments of the present disclosure. Conversely, the features and functions of one module or unit described above may be further divided into a plurality of modules or units to be embodied.

Exemplary Medium

Having described the method of exemplary embodiments of the present disclosure, next, a description will be given of the medium of exemplary embodiments of the present disclosure.

In an exemplary embodiment of the present disclosure, a storage medium capable of implementing the above method is also provided. Fig. 8 schematically illustrates a schematic diagram of a computer-readable storage medium in an exemplary embodiment of the present disclosure, as shown in fig. 8, depicting a program product 800 for implementing the above-described method according to an embodiment of the present disclosure, which may employ a portable compact disc read-only memory (CD-ROM) and include program code, and may be run on a terminal device, such as a cell phone. However, the program product of the present disclosure is not limited thereto, and in this document, a readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.

Exemplary electronic device

Having described the methods, apparatus and media of exemplary embodiments of the present disclosure, next, an electronic device according to exemplary embodiments of the present disclosure is described.

Those skilled in the art will appreciate that the various aspects of the present disclosure may be implemented as a system, method, or program product. Accordingly, aspects of the present disclosure may be embodied in the form of an entirely hardware embodiment, an entirely software embodiment (including firmware, micro-code, etc.) or an embodiment combining hardware and software aspects that may be referred to herein collectively as a "circuit," module, "or" system.

In an exemplary embodiment of the present disclosure, an electronic device capable of implementing the above method is also provided. Fig. 9 schematically illustrates a structural diagram of a computer system of an electronic device in an exemplary embodiment of the present disclosure.

It should be noted that, the computer system 900 of the electronic device shown in fig. 9 is only an example, and should not impose any limitation on the functions and the application scope of the embodiments of the present disclosure.

As shown in fig. 9, the computer system 900 includes a central processing unit (CentralProcessingUnit, CPU) 901 which can perform various appropriate actions and processes according to a program stored in a Read-only memory (ROM) 902 or a program loaded from a storage portion 908 into a random access memory (RandomAccessMemory, RAM) 903. In the RAM903, various programs and data required for system operation are also stored. The CPU901, ROM902, and RAM903 are connected to each other through a bus 904. An Input/Output (I/O) interface 905 is also connected to bus 904.

Connected to the I/O interface 905 are an input section 906 including a keyboard, a mouse, and the like, an output section 907 including a cathode ray tube (CathodeRayTube, CRT), a liquid crystal display (LiquidCrystalDisplay, LCD), and the like, and a speaker, and the like, 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 (LocalAreaNetwork ) card, a modem, and the like. The communication section 909 performs communication processing via a network such as the internet. The 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, a semiconductor memory, or the like is installed as needed on the drive 910 so that a computer program read out therefrom is installed into the storage section 908 as needed.

In particular, according to embodiments of the present disclosure, the processes described below with reference to flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method shown in the flowcharts. In such an embodiment, the computer program may be downloaded and installed from the network via the communication portion 909 and/or installed from the removable medium 911. When the computer program is executed by a Central Processing Unit (CPU) 901, various functions defined in the system of the present disclosure are performed.

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 can be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or a combination of any of the foregoing. More specific examples of a computer readable storage medium may include, but are not limited to, an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (ErasableProgrammableReadOnlyMemory, EPROM), a flash memory, an optical fiber, a portable compact disc read-only memory (CompactDiscRead-only memory, CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this disclosure, a computer-readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In the present disclosure, however, the computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, with the computer-readable program code embodied therein. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination of the foregoing. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, 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 appropriate medium, including but not limited to wireless, wireline, etc., or any suitable combination of the foregoing.

The flowcharts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.

The units involved in the embodiments of the present disclosure may be implemented by means of software, or may be implemented by means of hardware, and the described units may also be provided in a processor. Wherein the names of the units do not constitute a limitation of the units themselves in some cases.

As another aspect, the present disclosure also provides a computer-readable medium that may be included in the electronic device described in the above embodiments, or may exist alone without being assembled into the electronic device. The computer-readable medium carries one or more programs which, when executed by the electronic device, cause the electronic device to implement the methods described in the above embodiments.

From the above description of embodiments, those skilled in the art will readily appreciate that the example embodiments described herein may be implemented in software, or may be implemented in software in combination with the necessary hardware. Thus, the technical solution according to the embodiments of the present disclosure may be embodied in the form of a software product, which may be stored in a non-volatile storage medium (may be a CD-ROM, a U-disk, a mobile hard disk, etc.) or on a network, and includes several instructions to cause a computing device (may be a personal computer, a server, a touch terminal, or a network device, etc.) to perform the method according to the embodiments of the present disclosure.

Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the disclosure disclosed herein. This disclosure is intended to cover any adaptations, uses, or adaptations of the disclosure following the general principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure pertains.

It is to be understood that the present disclosure is not limited to the precise arrangements and instrumentalities shown in the drawings, and that various modifications and changes may be effected without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A method for loading a page, comprising:

Adding a cache construction function in a configuration file of an application program, and adding a cache execution function in an entry file of the application program to access a front-end offline package SDK in the application program;

the method comprises the steps of receiving a construction instruction of an application program, calling a cache construction function to generate an offline index file in response to the construction instruction of the application program, calling a cache execution function to register the offline index file in response to a starting instruction of the application program, acquiring a dependent file based on the offline index file after the registration is completed, and storing the dependent file in a local cache space;

When the application program runs, intercepting the application program based on a dependent file request sent by a current page;

Inquiring whether a request dependent file corresponding to the dependent file request exists in the local cache space;

And when the request dependent file exists, forwarding the request dependent file according to the intercepted dependent file request so as to enable the application program to load the content of the current page.

2. The page loading method of claim 1, wherein the invoking the cache building function to generate an offline index file comprises:

calling the cache construction function to acquire a dependency list of the application program;

determining a mapping table and an index of the dependent file based on the dependency list;

And generating the offline index file according to the mapping table and the yes index.

3. The page loading method of claim 2, wherein the determining the mapping table and index of the dependent file based on the dependency list comprises:

Extracting hypertext markup language (html) dependent files in the dependent list, and calculating hash values corresponding to the html dependent files;

copying the html dependent file, and renaming the copied html dependent file based on the hash value;

Creating a mapping relation between the html dependent file and the copied html dependent file to obtain the mapping table, and

And replacing the original file name of the html dependent file in the dependent list with the renamed file name to obtain the index.

4. The page loading method as recited in claim 2, wherein, when the dependent file request is an html request, the querying from the local cache space whether there is a request dependent file corresponding to the dependent file request includes:

replacing a target field in a uniform resource locator url corresponding to the html request based on a mapping table in an offline index file of the application program to obtain a replaced url;

And inquiring whether the request dependent file exists in the local cache space according to the replaced url.

5. The page loading method as recited in claim 1, wherein, when the dependent file request is a non-html request, the querying from the local cache space whether there is a request dependent file corresponding to the dependent file request comprises:

and inquiring whether the request dependent file exists in the local cache space based on url corresponding to the non-html request.

6. The page loading method of claim 1, wherein the method further comprises:

configuring timing parameters in the cache construction function;

after storing the dependent files in a local cache space, deleting target files in the dependent files based on the timing parameters.

7. The page loading method of claim 1, wherein the method further comprises:

when the application program is updated, accessing the front-end offline package SDK based on the updated application program;

generating a new offline index file through a front-end offline package software development tool in the updated application program;

a new dependent file is obtained based on the new offline index file and stored in the local cache space.

8. A page loading apparatus, comprising:

The access module is used for adding a cache construction function in a configuration file of an application program and adding a cache execution function in an entry file of the application program so as to access a front-end offline package SDK in the application program;

The system comprises a collection module, a cache execution function, a collection module, a local cache space, a collection module, a storage module and a storage module, wherein the collection module is used for calling the cache construction function to generate an offline index file in response to a construction instruction of the application program;

The interception module is used for intercepting the application program based on the file-dependent request sent by the current page when the application program runs;

the query module is used for querying whether a request dependent file corresponding to the dependent file request exists in the local cache space;

And the forwarding module is used for forwarding 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 of claim 8, wherein the access module is further configured to:

the method comprises the steps of obtaining a dependency list of an application program by calling a cache construction function, determining a mapping table and an index of a dependent file based on the dependency list, and generating the offline index file according to the mapping table and the index.

10. The page loading device of claim 9, wherein the access module is further configured to:

Extracting a hypertext markup language (html) dependent file in the dependency list, calculating a hash value corresponding to the html dependent file, copying the html dependent file, renaming the copied html dependent file based on the hash value, creating a mapping relation between the html dependent file and the copied html dependent file to obtain the mapping table, and replacing an original file name of the html dependent file in the dependency list with a renamed file name to obtain the index.

11. The page loading device of claim 8, wherein the query module is further configured to:

and when the dependent file request is an html request, replacing a target field in a uniform resource locator url corresponding to the html request based on a mapping table in an offline index file of the application program to obtain a replaced url, and inquiring whether the request dependent file exists in the local cache space according to the replaced url.

12. The page loading device of claim 8, wherein the query module is further configured to:

And when the dependent file request is a non-html request, inquiring whether the request dependent file exists in the local cache space based on url corresponding to the non-html request.

13. The page loading device as recited in claim 8, further comprising:

and after the dependent file is stored in the local cache space, deleting the target file in the dependent file based on the timing parameter.

14. The page loading device as recited in claim 8, further comprising:

The system comprises an updating module, a front-end offline package software development tool and a local cache space, wherein the updating module is used for accessing the front-end offline package SDK based on an updated application program when the application program is updated, generating a new offline index file through the front-end offline package software development tool in the updated application program, acquiring a new dependent file based on the new offline index file and storing the new dependent file in the local cache space.

15. A computer readable storage medium having stored thereon a computer program which when executed by a processor implements the page loading method of any of claims 1 to 7.

16. An electronic device, comprising:

one or more processors;

Storage means for storing one or more programs which when executed by the one or more processors cause the one or more processors to implement the page loading method of any of claims 1 to 7.