虽然 manifest 已经从web标准中移除,但是还是来看看manifest的实现吧;
这个需要服务器的支持,也就是需要设置MIME,
我在本地的wamp 环境下进行设置的,对应的是第四个,也就是下面最后一个
AddType application/x-compress .Z
AddType application/x-gzip .gz .tgz
AddType application/x-httpd-php .php
AddType application/x-httpd-php .php3
AddType text/cache-manifest .manifest
服务器上可以支持之后:
写一个app.manifest文件:参数有很多可以设置,下面简单设置我需要缓存的内容:
一个主页(默认),一个图片,一个juqery.js文件;
--------------------------------------
CACHE MANIFEST
# VERSION 0.1
# 直接缓存的文件
CACHE:
index.html
he.png
jquery.js
-------------------------------------
再看看主页需要添加的内容:在头部<html>添加缓存的文件 如下就可以了,
<!DOCTYPE html>
<
html
lang=
"en"
manifest=
"app.manifest">
<
head>
<
meta
charset=
"UTF-8">
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0">
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge">
<
title>Document</
title>
<
script
src=
"jquery.js"></
script>
</
head>
<
body>
需要服务器支持,设置mime:
<
p>manifest 测试文件</
p>
<
img
src=
"he.png"
alt=
"">
<
img
src=
"he.png"
alt=
"">
<
img
src=
"he.png"
alt=
"">
<
img
src=
"he.png"
alt=
"">
<
img
src=
"he.png"
alt=
"">
<
img
src=
"he.png"
alt=
"">
<
img
src=
"he.png"
alt=
"">
<
img
src=
"he.png"
alt=
"">
<
script>
$(
function(){
$(
"img").
css(
"width",
"300px");
}
);
</
script>
</
body>
</
html>
实现上面的内容之后,我的这个小测试在离线的情况下,及时刷新,也是可以正常显示的,
当再一次访问的时候,速度是极快的,丝毫没有卡顿等待,这就是manifest的好处;