Webpage resource preloading and caching method and apparatus, and electronic device
Patent Information
- Application Number
- PCT/CN2025/138127
- Authority / Receiving Office
- WO · WO
- Patent Type
- Applications
- Current Assignee / Owner
- Priority Date
- 2025-03-14
- Filing Date
- 2025-11-27
- Publication Date
- 2026-09-17
Smart Images
Figure CN2025138127_17092026_PF_FP_ABST
Abstract
Description
Webpage resource preloading and caching method, device and electronic equipment TECHNICAL FIELD
[0001] The present application relates to the technical field of webpage development, in particular to a webpage resource preloading and caching method, device and electronic equipment. BACKGROUND
[0002] In the digital era, webpage loading speed is directly related to user experience and overall performance of the website. Among them, webpage preloading technology is a method of reducing user waiting time by downloading resources required by the webpage in advance. Its core idea is that the browser or application has already obtained these resources before the user actually requests the resources, thereby realizing faster page loading speed. Cache technology is a method of storing resources locally or on the server to reduce repeated network requests. Through caching, the browser or application can access resources that have been obtained before more quickly.
[0003] In modern Web development, preloading and caching technology are widely used in various application scenarios; among them, webpage resource preloading and caching are important means to improve webpage loading speed and user experience. At present, the strategy of webpage resource preloading and caching can be continuously optimized to ensure that the technical means of webpage resource preloading and caching play a greater role in modern Web development. SUMMARY
[0004] The present application provides a webpage resource preloading and caching method, device and electronic equipment to solve the above technical problems in the prior art.
[0005] According to a first aspect of the present application, a webpage resource preloading and caching method is provided, comprising:
[0006] Decompressing a preset offline package into a cache directory locally when the client is started for the first time;
[0007] Requesting to download a cache configuration file when the client is started, wherein the resource file of a specified URL is downloaded to the local cache directory, and the md5 value of the downloaded resource is written to the local cache;
[0008] Creating a webview instance pool, wherein multiple webview instances are created for reuse when the client is started.
[0009] Preferably, the preset offline package is decompressed into the cache directory locally when the client is started for the first time, the preset offline package includes a zip package, the zip package is stored in the client itself directory, and the zip package contains static resources that need to be preloaded. When the preloaded static resources are updated, the URL of the updated static resources and the md5 value corresponding to the resources are written to the cache configuration file.
[0010] Preferably, when the client is launched for the first time, the pre-installed offline package is decompressed to the local cache directory, and the pre-installed offline package is deleted after decompression.
[0011] Preferably, the method for preloading and caching web page resources includes a cache generation mechanism, which includes at least one of the following: pre-setting offline packages, downloading resources, writing to the local cache directory, updating the cache index, and clearing the cache.
[0012] Preferably, the method for preloading and caching web page resources includes a cache update mechanism, and the cache update occurs when the client starts and the webview is created; the cache update mechanism includes a cache configuration file update mechanism;
[0013] In the cached configuration file update mechanism, when the client reopens the application, it sends a request to the network to check if the configuration file has been updated. If a 304 response is received, it means that the configuration file has not been updated. If a 200 response is received, it means that the configuration file has been updated, and the configuration file is downloaded to the local machine. The MD5 value of the downloaded configuration file content is compared with the MD5 value of the locally cached configuration file to determine whether the static resources have been updated.
[0014] Preferably, the method for preloading and caching web page resources further includes:
[0015] When accessing a web page, the SDK retrieves the webview and requests the cached configuration file; it determines whether the cache needs to be updated, and intercepts network resource requests initiated by the web page. If the cache is hit, the resource is retrieved from the cache; otherwise, the resource is retrieved from the network.
[0016] Preferably, the interception of network resource requests initiated by the web page includes:
[0017] Check if the resource is in the local cache configuration file. If it is not found, end the resource interception. If it is found, check if the MD5 value corresponding to the resource is cached locally. If it is, continue the resource interception. Otherwise, end the resource interception.
[0018] Read the cached resource. If the read is successful, return the resource. If it fails, download the resource from the network.
[0019] According to a second aspect of the present invention, an apparatus for preloading and caching web page resources is provided, comprising:
[0020] The decompression module is used to decompress the pre-installed offline packages to the local cache directory when the client is launched for the first time;
[0021] The request module is used when the client starts to request and download the cache configuration file. It downloads the resource file from the specified URL to the local cache directory and writes the MD5 value of the downloaded resource to the local cache.
[0022] The creation module is used to create a pool of WebView instances, where multiple WebView instances are created for reuse when the client starts.
[0023] According to a third aspect of the present invention, an electronic device is provided, comprising the following steps:
[0024] Memory; and
[0025] processor;
[0026] The memory is used to store one or more computer instructions; the one or more computer instructions are executed by the processor to implement the method described in any of the above.
[0027] According to a fourth aspect of the present invention, a readable storage medium is provided, wherein computer instructions are stored thereon; wherein, when executed by a processor, the computer instructions implement the method described in any of the preceding claims.
[0028] The technical solution of this invention can significantly speed up page loading and response time by preloading resources and reducing repeated network requests; it has significant beneficial effects on improving webpage loading speed and user experience.
[0029] In terms of improving loading speed, by preloading and caching web page resources, users do not need to wait for resources to download when accessing web pages, thus significantly improving loading speed.
[0030] In terms of reducing network requests, caching mechanisms can reduce the number of requests to the server, reduce network load, and also help save users' network traffic.
[0031] In terms of improving user experience, fast page loading and smooth user interaction can significantly improve user satisfaction and loyalty. Attached Figure Description
[0032] Figure 1 is a flowchart illustrating the method for preloading and caching web page resources in one embodiment;
[0033] Figure 2 is another flowchart illustrating the method for preloading and caching web page resources in one embodiment;
[0034] Figure 3 is a schematic diagram of the process of intercepting network resource requests initiated by a web page in one embodiment;
[0035] Figure 4 is a schematic diagram of the structure of a web page resource preloading and caching device in one embodiment;
[0036] Figure 5 is another structural schematic diagram of the device for preloading and caching web page resources in one embodiment. Detailed Implementation
[0037] It should be noted that, unless otherwise specified, the embodiments and features described in the present invention can be combined with each other. The present invention will now be described in detail with reference to the accompanying drawings and embodiments.
[0038] To enable those skilled in the art to better understand the present invention, the technical solution of one embodiment will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are merely some, not all, embodiments of the present invention. All other embodiments obtained by those skilled in the art based on the embodiments of the present invention without creative effort should fall within the scope of protection of the present invention.
[0039] It should be noted that the terms "first," "second," etc., used in this invention are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be used interchangeably where appropriate for the embodiments of the invention described herein. Furthermore, the terms "comprising the following steps" and "having," and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.
[0040] It should be understood that when an element (such as a layer, film, region, or substrate) is described as being "on" another element, the element may be directly on the other element, or there may be an intermediate element. Moreover, in this invention, when an element is described as being "connected" to another element, the element may be "directly connected" to the other element, or "connected" to the other element via a third element. Example
[0041] Please refer to Figures 1-3. This embodiment provides a method for preloading and caching web page resources, including the following steps:
[0042] S1. Upon first launch of the client, the pre-installed offline package is decompressed to the local cache directory; this step ensures that users can quickly access the pre-installed web resources when using the client for the first time, without having to wait for the resources to download.
[0043] S2. When the client starts, it requests to download the cache configuration file, which downloads the resource file at the specified URL to the local cache directory and writes the MD5 value of the successfully downloaded resource to the local cache. The advantage of this step is that when the user accesses these resources later, they can read them directly from the local cache without having to download them from the server again. In addition, the MD5 value verification also ensures the integrity and consistency of the resources.
[0044] S3. Create a pool of webview instances. Multiple webview instances are created when the client starts up for reuse, which can reduce the time spent creating webviews.
[0045] In one embodiment, in step S1, the pre-set offline package consists of a zip package stored in the client's own directory. The zip package contains static resources that need to be pre-loaded. When the pre-loaded static resources are updated, the updated static resource URL and the corresponding MD5 value are written to the cache configuration file.
[0046] In one embodiment, in step S1, the preset offline package can be deleted after decompression.
[0047] In one embodiment, in the download cache configuration file step S2, for example, when the client starts, it will open a thread to request the app-config.json file (i.e., the cache configuration file), and start multiple threads to process the resource download task queue, download the resource file of the specified URL to the local cache directory, and write the MD5 value of the successfully downloaded resource to the local cache.
[0048] In one embodiment, in step S3, the client will create 4 webview instances by default when it starts up, and the SDK can be configured to create the number of instances.
[0049] As shown in Figure 2, in one embodiment, the method for preloading and caching web page resources further includes the following steps:
[0050] S4. When accessing a web page, the SDK retrieves the webview and requests the cached configuration file; it determines whether the cache needs to be updated and intercepts network resource requests initiated by the web page. If the cache is hit, the resource is retrieved from the cache; otherwise, the resource is retrieved from the network. This step S4 belongs to the runtime phase.
[0051] As shown in Figure 3, the interception of network resource requests initiated by web pages includes the following steps:
[0052] S411. Determine if the resource is in the local cache configuration file. If it does not exist, end the resource interception. If it exists, then determine if the MD5 value corresponding to the resource is cached locally. If it is, perform resource interception. If not, end the resource interception.
[0053] S412. Read the cached resource. If the read is successful, return the resource. If it fails, download the resource from the network and automatically write it to the cache.
[0054] In one embodiment, the method for preloading and caching web page resources includes a cache generation mechanism, which includes at least one of the following: pre-setting offline packages, downloading resources, writing to a local cache directory, updating the cache index, and clearing the cache.
[0055] In one embodiment, the method for preloading and caching web page resources includes a cache update mechanism, which includes a cache configuration file update mechanism. In this mechanism, when the client reopens the page, it sends a request to the network to check if the configuration file has been updated. If a 304 response is received, it indicates that the configuration file has not been updated; if a 200 response is received, it indicates that the configuration file has been updated, and the configuration file is downloaded to the local machine. The MD5 hash of the downloaded configuration file content is compared with the MD5 hash of the locally cached configuration file to determine if the static resource has been updated.
[0056] In one embodiment, the cache update mechanism updates the cache when the client starts and when the webview is created. Correspondingly, the cache update mechanism also includes a cache cleanup mechanism. Specifically, the current design only includes passive cleanup, where cache is cleaned up based on usage frequency when the storage volume reaches a certain limit.
[0057] Terminology Notes:
[0058] Cache directory: The client cache directory is preferentially obtained as / sdcard / Android / data / `application package` / cache directory; if the SD card does not exist, then / data / data / `package` / cache is obtained as the disk cache storage directory.
[0059] Cache configuration file: app-config.json.
[0060] Offline package: Pre-installed offline package dist.zip.
[0061] The overall design of the webpage resource preloading and caching method of the present invention is as follows: preloaded resources + pre-built offline packages + webview instance pool. Key points include: in the preloaded static resources, static resources that need to be cached are written into a cache configuration file; the client downloads the resources from the configuration file and writes them to the cache directory; in the pre-built offline packages, frequently updated static resource files with low update frequency can be packaged and sent to the client, which then directly decompresses them to its local cache directory, eliminating the need for the client to request resources from the server on the first request; in the webview instance pool, multiple webview instances are created and reused during client startup, instead of creating an object every time the webpage is opened, reducing the time spent creating webviews. Example
[0062] Please refer to Figures 1-3. This embodiment provides a method for preloading and caching web page resources. The following description is from the perspective of research and development or technical implementation to facilitate reading and understanding. The accompanying drawings are used to illustrate the technical solution of this invention clearly and completely, and to highlight the inventive points and important aspects of the technical solution of this invention.
[0063] The overall design scheme of the web page resource preloading and caching method of the present invention is: preloaded resources + pre-built offline package + webview instance pool.
[0064] The caching implementation process includes a client startup phase and a runtime phase. The client startup phase has the following steps:
[0065] Unzip the offline package. The first time you launch the client, it will unzip the pre-installed offline package and then delete it.
[0066] The client downloads the cache configuration file. When the client starts, it will open a thread to request the app-config.json file and start multiple threads to process the resource download task queue, download the resource file of the specified URL to the local cache directory, and write the MD5 value of the successfully downloaded resource to the local cache.
[0067] Create a pool of WebView instances. By default, four WebView instances will be created when the client starts. The SDK can be configured to create the number of instances.
[0068] During the client-side runtime phase, when a web page is accessed, the SDK will retrieve the first webview from the webview instance queue and request the app-config.json file to determine whether the cache needs to be updated. At the same time, it will intercept network resource requests initiated by the web page. If the cache is hit, the resource will be obtained directly from the cache; otherwise, the resource will be obtained from the network.
[0069] This involves a cache generation mechanism, which includes tasks such as pre-setting offline packages and download resources, writing to the local cache directory, updating the cache index, and clearing the cache. The cache generation mechanism has the following steps:
[0070] In the pre-installed offline package, extract the pre-installed package dist.zip to the local cache directory, and then delete dist.zip.
[0071] In the resource download task queue, a maximum of 4 download threads are started by default to process this queue (which can be expanded to a maximum of 10). Downloaded resources are stored in the local cache directory, and the MD5 hash of successfully downloaded resources is written to the local cache.
[0072] During cache clearing, if the storage limit is reached (configurable), the cache will be cleared based on usage frequency.
[0073] Specifically, in app-config.json, static resources, except for HTML files, are updated incrementally (using hashes). Otherwise, if a resource download fails, older resources will be loaded, resulting in an error.
[0074] This involves a cache update mechanism, with cache updates occurring when the client starts and when the webview is created.
[0075] In the cache configuration file (app-config.json), when the client starts for the first time, it obtains the configuration file from the network and saves it locally for later use (including file content and response headers). When the client opens again, it checks the network to see if the configuration file has been updated. If a 304 response is received, it means that the configuration file has not been updated. If a 200 response is received, the received file content is compared with the local version to determine if there is an update. If there is, the resource download and caching process begins.
[0076] In the cache update mechanism, the current design only allows for passive cleanup (cleaning up based on usage frequency when storage reaches a certain limit).
[0077] This involves an interception mechanism. When a WebView requests a network resource, its built-in resource interception method works. First, it checks if the resource is in the local `app-config.json` file. If not, resource interception ends. If it exists, it checks if the corresponding MD5 value is cached locally. If so, resource interception continues; otherwise, it ends. The cached resource is then read. If successful, the resource is returned; otherwise, it is downloaded from the online resource and automatically written to the cache.
[0078] This involves pre-installed offline packages. Examples are as follows:
[0079] Host configuration pre-configured package directory (assets):
[0080] -assets
[0081] -ydlm
[0082] --config.json
[0083] --md5
[0084] --dist.zip
[0085] Meaning of each document:
[0086] ydlm: zip package name (agreed upon by each project and its respective client, configured during SDK initialization).
[0087] config.json: Same as app-config.json, generates MD5 cache based on the resource list in config.json and the resources in dist.zip.
[0088] dist.zip: Pre-installed offline package. The dist directory generated after the project is built is packaged into a zip file and decompressed to the local cache directory when the application starts.
[0089] md5: The md5 hash of the dist.zip file, which can be used to verify whether the dist.zip package is complete.
[0090] The config.json file is the same as the app-config.json file used when the version is released. It is only used to unzip the zip package to the local cache directory and write the md5 to the local cache. Other resource updates and matching are based on the online app-config.json file.
[0091] This involves the cache configuration file (app-config.json). app-config.json: A list of static resources in the project that need to be added to the offline caching strategy, stored in the server's root directory.
[0092] app-config.json data structure:
[0093] {
[0094] "baseUrl": "https: / / ydlm.2345.com / ydh5 / ", / / Base route, used to construct resource paths
[0095] "lastModified": "2020-01-20 16:01:11", / / Last update time of the configuration file, for online verification of successful deployment.
[0096] "charset": "gbk", / / Project resource encoding format
[0097] "orderHtml": ['college / index.html', 'income / index.html'], / / html sorting
[0098] "outputDir": 'ydh5', / / The directory generated during packaging
[0099] "zipDir": 'ydlm', / / zip package name
[0100] "resources": [
[0101] {
[0102] "url": "static / css / chunk-common.9834e825.css", / / Download address and local cache directory
[0103] "md5": "320b6a5da194370ba6df547d69204126" / / File MD5 hash, used to search for files in the cache.
[0104] },
[0105] ],
[0106] / / regx: This helps avoid repeatedly downloading the same HTML file in history routing mode.
[0107] "routers": [
[0108] {
[0109] "url": "college / index.html", / / Download path
[0110] "md5": "46844a5817766ea56163ad984c5c813a", / / file md5
[0111] "regx": "college / .*" / / Regular expression for matching URLs
[0112] },
[0113] {
[0114] "url": "income / index.html",
[0115] "md5": "88131d49929c37e5ebe78f9248c549c0",
[0116] "regx": "income / .*",
[0117] "content": "<!DOCTYPE html> <meta charset="gbk"> <meta http-equiv="X-UA-Compatible" content="\"IE=edge\""> ... / / html text. If `content` is configured, it will not be downloaded from the internet and will be used directly.
[0118] }
[0119] ]
[0120] }
[0121] The meanings of the fields in app-config.json are as follows:
[0122] baseUrl: The base route, used to concatenate resource paths.
[0123] lastModified: The last build time of webpack, which is useful for verifying whether the deployment was successful online.
[0124] charset: Project resource encoding format.
[0125] orderHtml: Sorts HTML files in array format.
[0126] outputDir: The directory generated by the project build process.
[0127] zipDir: The name of the generated zip package.
[0128] resources: A list of resources to be cached (js / css / img).
[0129] URL: If it's a `CDN resource`, use the full path; otherwise, use a relative path.
[0130] md5: The MD5 value of the resource corresponding to the URL, used for client-side caching and comparison.
[0131] routers: List of HTML resources to be cached
[0132] url: The relative path to the html file.
[0133] content: The content of the cached HTML file; if empty, download the cached content from the online source.
[0134] regx: Regular expression to match the corresponding HTML file, avoiding the repeated downloading of the same HTML file in history routing mode.
[0135] MD5: The MD5 value generated from the content of an HTML file, used for client-side caching and comparison.
[0136] The priority of loading resource manifests by the client is: routers > resources.
[0137] The naming convention for zip packages is agreed upon by each project and its respective client, and configured during SDK initialization. For example, Ace Mobile Alliance might be named ydlm.zip, while Planet might be named xq.zip.
[0138] CDN resource files: The url field should contain the full path. The client determines whether it is a CDN resource based on whether the URL contains 'http:' or 'https:'.
[0139] This involves how to generate app-config.json and the offline package.
[0140] Generate app-config.json:
[0141] const path = require('path')
[0142] const fs = require('fs')
[0143] const glob = require('glob')
[0144] const md5File = require('md5-file')
[0145] const utils = require('. / util')
[0146] const buildZip = require('. / build-zip')
[0147] const env = require('minimist')(process.argv.slice(2), {
[0148] string: ['env'],
[0149] }).env || 'ga'
[0150] / / Static resource manifest file name
[0151] const filename = 'app-config.json'
[0152] / / Router resources include HTML information
[0153] const routers = []
[0154] / / List of assembled resources
[0155] let resources = []
[0156] / / This regular expression assumes that the URL of the resource does not contain spaces.
[0157] const resReg = / <(?:link|script)\s+[^>]*(?:src|href)=['"]?([^'"\s>]+)['"]?(?:\s|>) / g
[0158] const regx = / \ / ?[^\ / ]+\.html$ / g
[0159] const regP = / \ / [^\ / ]+\.html$ /
[0160] const regH = / ^(https:|http:) /
[0161] / / Read `appConfig.json`
[0162] const appConfigSrcPath = path.join(__dirname, filename)
[0163] if (!fs.existsSync(appConfigSrcPath)) {
[0164] console.error('Please add an app-config.json file to the _build directory')
[0165] return false
[0166] }
[0167] const appConfig = JSON.parse(fs.readFileSync(appConfigSrcPath, 'utf8'))
[0168] const orderHtml = appConfig.orderHtml
[0169] const isHistory = appConfig.routerMode === 'history'
[0170] / / The dist directory can be modified for different projects in the packaging directory.
[0171] const outputDir = path.join(__dirname, '..', appConfig.outputDir)
[0172] const appConfigDistPath = path.join(outputDir, filename)
[0173] / / Currently only applies to cases with a single cdnUrl
[0174] let cdnUrl = utils.getType(appConfig.cdnUrls) === 'array' ? appConfig.cdnUrls[0] : ''
[0175] if (cdnUrl && !regH.test(cdnUrl)) {
[0176] console.error('Each item in cdnUrls must include either https: or http:')
[0177] return false
[0178] }
[0179] cdnUrl = cdnUrl ? cdnUrl.replace(regH, '') : ''
[0180] const cdnIndex = cdnUrl ? 0 : -1
[0181] / / Sorted list of HTMLs
[0182] const htmls = utils.getOrderHtmls(glob.sync(path.join(outputDir, '** / *.html')), orderHtml)
[0183] / / Get static resources from the static file directory
[0184] const staticDir = glob.sync(path.join(outputDir, '** / static / '))
[0185] / **
[0186] 1. Iterate through the HTML files and write them to appconfig.routers.
[0187] 2. Extract resource files from the HTML and add them to the resources array.
[0188] @returns {[]}
[0189] /
[0190] function getRoutersFun() {
[0191] htmls.forEach(item => {
[0192] const content = fs.readFileSync(item, 'utf8')
[0193] const url = utils.sepPathSplit(path.relative(outputDir, item), path)
[0194] const tags = content.match(resReg)
[0195] tags && tags.forEach(tag => {
[0196] const resPath = (resReg.exec(tag) || [])[1]
[0197] resReg.lastIndex = 0
[0198] / / remove the cdn url
[0199] if (resPath) {
[0200] const rPath = path.join(outputDir, cdnUrl ? resPath.replace(cdnUrl, '') : resPath)
[0201] resources.push(utils.sepPathSplit(rPath, path))
[0202] }
[0203] })
[0204] const isPathUrl = regP.test(url)
[0205] routers.push(isHistory ? {
[0206] url,
[0207] content,
[0208] regx: url.replace((isPathUrl ? regx : '.html'), ' / .*'),
[0209] md5: md5File.sync(item),
[0210] } : {
[0211] url,
[0212] content,
[0213] Generate offline package:
[0214] / **
[0215] * zip package name: DirappConfig.zip
[0216] * Unzip the zip file: extract the three files: config.json, dist.zip, and md5.
[0217] * config.json: After the client unzips the file, it stores the data in the cache using the MD5 hash of the config.json file as the key.
[0218] * dist.zip package: The dist file after build
[0219] * md5: md5 of dist.zip
[0220] /
[0221] const path = require('path')
[0222] const fs = require('fs')
[0223] const md5File = require('md5-file')
[0224] const rm = require('rimraf')
[0225] const zipper = require('zip-local')
[0226] function buildZip(json, appConfig) {
[0227] const zipDir = path.join(__dirname, '..', appConfig.zipDir)
[0228] const distDir = path.join(zipDir, 'dist.zip')
[0229] if (fs.existsSync(zipDir)) {
[0230] rm.sync(zipDir)
[0231] }
[0232] fs.mkdirSync(zipDir)
[0233] / / The zip file writes JSON data to config.json (which is then written to the app cache based on the JSON data when the zip file is unzipped).
[0234] fs.writeFileSync(path.join(zipDir, ' / config.json'), json, 'utf8')
[0235] / / Package the dist file into a zip archive and move the zipDir directory to your mobile device.
[0236] zipper.sync.zip(path.join(__dirname, '..', `${appConfig.outputDir}`)).compress().save(distDir)
[0237] / / MD5 hash of the compressed dist.zip file
[0238] const zipMd5 = md5File.sync(distDir)
[0239] fs.writeFileSync(path.join(zipDir, ' / md5'), zipMd5, 'utf-8')
[0240] / / Compress zipDir into a zip archive
[0241] zipper.sync.zip(zipDir).compress().save(path.join(__dirname, '..', `${appConfig.zipDir}.zip`))
[0242] / / Delete appConfig.zipDir (template)
[0243] rm(zipDir, err => {
[0244] console.log('Directory cleanup successful')
[0245] })
[0246] }
[0247] module.exports = buildZip Example
[0248] Please refer to Figures 4 and 5. This embodiment provides a device for preloading and caching web page resources, which takes the following form:
[0249] 1. Decompression module
[0250] The decompression module 10 is used to decompress the pre-installed offline package to the local cache directory when the client is launched for the first time;
[0251] 2. Request Module
[0252] The request module 20 is used to request the download of the cache configuration file when the client starts. It downloads the resource file at the specified URL to the local cache directory and writes the MD5 value of the successfully downloaded resource to the local cache.
[0253] 3. Create a module
[0254] Module 30 is used to create a pool of webview instances, where multiple webview instances are created for reuse when the client starts.
[0255] As shown in Figure 5, in one embodiment, the web page resource preloading and caching device further includes a resource acquisition module 40. When accessing a web page, the resource acquisition module 40 uses the webview and requests the cache configuration file by the SDK; determines whether the cache needs to be updated, and intercepts network resource requests initiated by the web page. If the cache is hit, the resource is obtained from the cache; otherwise, the resource is obtained through the network.
[0256] It should be noted that the above-described apparatus is used to implement the methods in the above embodiments, and each module in the apparatus corresponds to each step in the method. Example
[0257] Based on the same inventive concept, one embodiment of the present invention provides an electronic device, including the following steps: a memory and a processor; wherein the memory is used to store one or more computer instructions; the one or more computer instructions are executed by the processor using any of the methods in the above embodiments. Example
[0258] Based on the same inventive concept, one embodiment of the present invention provides a readable storage medium storing computer instructions; wherein, when the computer instructions are executed by a processor, they implement the method of any one of the above embodiments.
[0259] One or more of the aforementioned computer instructions can form a program.
[0260] The above-described program can run on a processor or be stored in memory (or a computer-readable medium). Computer-readable media includes the following steps: permanent and non-permanent, removable and non-removable media. Information storage can be implemented by any method or technology. Information can be computer-readable instructions, data structures, program modules, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include the following steps: transient media, such as modulated data signals and carrier waves.
[0261] These computer programs may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer-implemented process, such that the instructions that execute on the computer or other programmable apparatus provide steps for implementing the functions specified in one or more flowcharts and / or one or more block diagrams, and different steps may be implemented by different modules.
[0262] The above are merely preferred embodiments of the present invention and are not intended to limit the present invention. Various modifications and variations can be made to the present invention by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.
Claims
1. A method for preloading and caching web page resources, characterized in that, include: Upon first launch of the client, the pre-installed offline package is extracted to the local cache directory; When the client starts, it requests to download the cache configuration file, which downloads the resource file at the specified URL to the local cache directory and writes the MD5 value of the downloaded resource to the local cache. Create a pool of WebView instances, where multiple WebView instances are created and reused when the client starts.
2. The method for preloading and caching web page resources according to claim 1, characterized in that, When the client is launched for the first time, the pre-installed offline package is decompressed to the local cache directory. The pre-installed offline package includes a zip package, which is stored in the client's own directory. The zip package contains static resources that need to be preloaded. When the preloaded static resources are updated, the updated URL of the static resources and the corresponding MD5 value of the resources are written to the cache configuration file.
3. The method for preloading and caching web page resources according to claim 1, characterized in that, When the client is launched for the first time, the pre-installed offline package is decompressed to the local cache directory, and then the pre-installed offline package is deleted.
4. The method for preloading and caching web page resources according to claim 1, characterized in that, The method for preloading and caching web page resources includes a cache generation mechanism, which includes at least one of the following: pre-setting offline packages, downloading resources, writing to the local cache directory, updating the cache index, and clearing the cache.
5. The method for preloading and caching web page resources according to claim 1, characterized in that, The method for preloading and caching web page resources includes a cache update mechanism, which updates the cache when the client starts up and when the webview is created; the cache update mechanism includes a cache configuration file update mechanism. In the cached configuration file update mechanism, when the client reopens the application, it sends a request to the network to check if the configuration file has been updated. If a 304 response is received, it means that the configuration file has not been updated. If a 200 response is received, it means that the configuration file has been updated, and the configuration file is downloaded to the local machine. The MD5 value of the downloaded configuration file content is compared with the MD5 value of the locally cached configuration file to determine whether the static resources have been updated.
6. The method for preloading and caching web page resources according to any one of claims 1-5, characterized in that, The method for preloading and caching web page resources also includes: When accessing a web page, the SDK retrieves the webview and requests the cached configuration file; it determines whether the cache needs to be updated, and intercepts network resource requests initiated by the web page. If the cache is hit, the resource is retrieved from the cache; otherwise, the resource is retrieved from the network.
7. The method for preloading and caching web page resources according to claim 6, characterized in that, The interception of network resource requests initiated by web pages includes: Check if the resource is in the local cache configuration file. If it is not found, end the resource interception. If it is found, check if the MD5 value corresponding to the resource is cached locally. If it is, continue the resource interception. Otherwise, end the resource interception. Read the cached resource. If the read is successful, return the resource. If it fails, download the resource from the network.
8. A device for preloading and caching web page resources, characterized in that, include: The decompression module is used to decompress the pre-installed offline packages to the local cache directory when the client is launched for the first time; The request module is used when the client starts to request and download the cache configuration file. It downloads the resource file from the specified URL to the local cache directory and writes the MD5 value of the downloaded resource to the local cache. The creation module is used to create a pool of WebView instances, where multiple WebView instances are created for reuse when the client starts.
9. An electronic device, characterized in that, Includes the following steps: Memory; and processor; The memory is used to store one or more computer instructions; the one or more computer instructions are executed by the processor to implement the method according to any one of claims 1 to 7.
10. A readable storage medium, characterized in that, The readable storage medium stores computer instructions; wherein, when the computer instructions are executed by a processor, they implement the method described in any one of claims 1 to 7.