当前位置：网站首页>About offline caching application cache / using manifest file caching

About offline caching application cache / using manifest file caching

2022-07-27 12:03:00 【Full stack programmer webmaster】

Hello everyone , I meet you again , I'm your friend, Quan Jun .

Application Cache Configuration file for

First, you need to create a file on the server , The contents determine which files need to be cached , Which files don't need , If the resource cannot be accessed, what page will be used

This file is generally .appcache type , be called Cache list (cache manifest) file , A complete cache manifest file is as follows ：

CACHE MANIFEST
# version xx.xx.xx
CACHE:
needBeCached.png
needBeCached2.js

NETWORK:
notNeedBeCached.html
notNeedBeCached2.css

FALLBACK:
/ 404.html

You can see , The header information of the file CACHE MANIFEST Used to mark that this file is a cache manifest file , Then generally （ It is best to ） Followed by a line of comments indicating the version , This line of comments is very important , The importance of this line of comments will be described in detail in the file loading section later

CACHE part

Except for the header information , This cache manifest file is divided into several parts , The first part is CACHE part :

CACHE:
needBeCached.png
needBeCached2.js

This section indicates which resource files need to be cached. You can list multiple

If there is a path , If cache is needed blog Under the blog.css file , It can be written. blog/blog.css.

in addition CACHE: Can be omitted , Let the resource files that need to be cached follow the comments directly

NETWORK part

The second part is NETWORK part ：

NETWORK:
notNeedBeCached.html
notNeedBeCached2.css

This section defines which files do not need caching , These files need to be connected to the server

And CACHE equally , Multiple resources can be defined , If you enter a folder path directly , It's also legal , such as /blog such ,blog All files in the folder will not be cached

You can use wildcards to , Such as in addition to the above CACHE Resources defined in , Others must be connected to the server ：

NETWORK:
*

One thing to note is , Carry this manifest Of documents HTML The document will definitely be cached , This will be mentioned again later

FALLBACK part

The third part is FALLBACK part ：

FALLBACK:
/ 404.html

This section specifies a fallback page , When resources are inaccessible , The browser will use this page

You can also define multiple records , Each record lists two URI, One represents resources , A back-up page . It should be noted that both resource files need to use relative path tangency and manifest Document homology

Wildcards can also be used

Save and reference manifest file

manifest Files can be saved on the server , Save as .appcache suffix , But it must be homologous with the application itself . stay HTML In the document , You can specify the relative path and absolute... Of the manifest file URL. It should be noted that ,manifest Of documents MIME Type must be text/cache-manifest

Need to be in HTML Introduced in documents manifest file , You can use code similar to the following ：

<!doctype html>
<html manifest="manifest.appcache">
...
</html>

such ,HTML After the document is loaded , Will be based on manifest.appcache To cache resource files , Next time you visit the same page , The cached resource files will be directly used for acceleration

Caching and loading mechanism

On the first visit , Browser loaded HTML After the documents , Will check whether it has been introduced manifest file . If introduced , Then load manifest file , And then according to manifest The contents of the file are cached , And cache the current document

After the visit , The browser will first view manifest Whether the document has been modified （ Whether it's content or comments ）, If it's modified , It will be regarded as the first visit , According to again manifest Cache the contents of the file

If the application cache exists , And manifest Not modified , The browser loads the document directly from the cache （ Be careful ： Load the document ） And resources , No access to the network （ Be careful ： Whether connected or not , Will not access the network ）

When caching multiple resource files , The resource files downloaded by the browser will first be placed in a temporary cache , If any resource file fails to download , The browser will stop downloading other cached resources , And clear the temporary cache . If all resource files are successfully downloaded , The browser will put these resource files and references manifest Of documents HTML The document is moved to the permanent offline cache

Full of holes

Some small pits

It should be noted that manifest Put the file on the server ,MIME Type must be text/cache-manifest, If you use Apache, Need modification .htaccess file .IE By default application/octet-stream, You need to specify
For each page that needs to be cached html All need to join manifest attribute
Don't put manifest The file itself is added to the cache , If you join , The browser will not detect on the server manifest Update , The page version will remain unchanged for ten thousand years
Don't think that a resource file fails to load , Other files will be cached , See the last paragraph of caching and loading mechanism for the reason

Some big pits

stay manifest After all the resources defined in the file have been successfully loaded , These resource files together with quote manifest Of documents HTML file It's also moved to the permanent offline cache . So if you want to cache only js、css、 Pictures and other documents , Instead of caching HTML Documentation in order to maintain access to the latest content , This is a big hole
according to Application Cache Loading mechanism , If you only modify the content of the resource file （ The path or name of the resource file has not been modified ）, The browser will get the resource file directly from the local offline cache . So every time you modify the resource file , Need modification manifest file , To trigger reloading and caching of resource files . Among them , The most effective way is to modify manifest Internal version notes of the file （ So that comment is quite important ）
If the resource is not cached , In without setting NETWORK Under the circumstances , Will not load （ The browser will not load on the network ）, So you need to use wildcards to indicate that except CACHE Beyond the resources identified in , Other resources need to be loaded on the network

Use iframe To avoid pit one ？

It is rumored on the Internet that the way to avoid Pit 1 is to use iframe To specify the resources that need to be cached , And avoid HTML Cache of documents . The specific way is to HTML Embed a iframe,iframe Of pages in HTML Label contains manifest Property reference manifest file , It defines the files that need to be cached . This will only cache iframe Medium HTML file , And constantly update the main page ：

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title> The main page </title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/javascript.js"></script>
</head>
<body>
    <iframe src="cache.html"></iframe>
</body>
</html>

You can see , Main page html In the label , There is no introduction of manifest file . Only one is loaded iframe, And this iframe The loaded page document is as follows ：

<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
    <meta charset=utf-8 />
    <title> Cache pages </title>
</head>
<body>
</body>
</html>

Cache page introduces manifest file , So the browser will cache manifest List of resources defined in the file , Here, for example. manifest The contents of the document are as follows ：

CACHE MANIFEST
# VERSION 1.0

CACHE:
css/someStyle.css
js/someJavaScript.js

NETWORK:
*

stay chrome Run in , You can see the following effects on the command line ：

Creating Application Cache with manifest http://localhost:8000/manifest.appcache
Application Cache Checking event
Application Cache Downloading event
Application Cache Progress event (0 of 2) http://localhost:8000/css/someStyle.css
Application Cache Progress event (1 of 2) http://localhost:8000/js/someJavaScript.js
Application Cache Progress event (2 of 2)
Application Cache Cached event

Browser cache manifest The resource file defined in the file , In fact, it also caches iframe Documents for cached pages in , But the main page will not be cached , Modify the main page , And press F5 Refresh

Document was loaded from Application Cache with manifest http://localhost:8000/manifest.appcache
Application Cache Checking event
Application Cache NoUpdate event

You can see that the main page has been updated , however someStyle.css and someJavaScript.js The file is still loaded from the network , And not from cache Load in . open chrome Of chrome://appcache-internals/ You can see , Inside cache.html、someStyle.css、someJavaScript.js It is indeed cached , Get rid of NETWORK paragraph , The result is the same

Flags       URL                                         Size (headers and data)
Master,     http://localhost:8000/cache.html            388 B
Explicit,   http://localhost:8000/css/someStyle.css     228 B
Explicit,   http://localhost:8000/js/someJavaScript.js  244 B
Manifest,   http://localhost:8000/manifest.appcache     316 B

stay firefox、opera The same goes for the last test , Although it is cached , But it will still be loaded from the network , and iframe The solution of is also 2011~2012 Proposed around , Later, there was no relevant article , It is estimated that it has completely failed

Application Mainly to build offline cache , Make the page browse in offline mode . This is more suitable for applications on some pages and static pages that do not change often . It caches carrier pages because of its mechanism . If above iframe There is an error in the implementation of the mechanism , Or there are other ways to only cache resources without caching HTML file , Please also contact me

Publisher ： Full stack programmer stack length , Reprint please indicate the source ：https://javaforall.cn/128204.html Link to the original text ：https://javaforall.cn

原网站

版权声明
本文为[Full stack programmer webmaster]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/208/202207271135012372.html