web 离线缓存

web 离线程序,也是离线缓存,重点就是缓存文件,在用户离线的时候不至于只看到一个白屏。开始!

先让服务器支持缓存,这里只说Apache网络服务器mac版的配置。

在 应用程序/xampp/xamppfiles/etc下的mime.types添加这一行(应该是最后一行):

test/cache-manifest manifest

别忘了重启Apache。

先看这个HTML文件

<!DOCTYPE html>
<html manifest="./main.manifest">
<head>
    <mata charset="utf-8">
    <title>form test</title>
</head>
<body>
<p>V1.0</p>
</body>
</html>

注意到 manifest="./main.manifest" 这段代码了吧,浏览器会根据main.manifest这个文件的内容去缓存文件,

现在看看 main.manifest文件

CACHE MANIFEST #开头必须写这一行,告诉浏览器这是缓存文件设置
# 下面这一行虽然是注释,但是决定了浏览器是否更新缓存
# version 1.0

CACHE:
# 这后面是要缓存的文件
demo1.html
hello.js

NETWORK:
# 这后面是不要缓存的文件
notOffline.php
*
# * 的含义是除了要缓存的全部不缓存

FALLBACK:
# 在线使用第一个文件,不在线使用第二个文件
online.js offline.js

注意,首页也就是上面写的那个html文件会被默认缓存。

如果不写CACHE、NETWORK或者FALLBACK,默认为CACHE,而且这三个顺序不一,也可以在后面追加,因为识别范围是从这个关键字到下个关键字之间。

这时候访问浏览器,页面完美展现。然后去修改掉那个html文件

<!DOCTYPE html>
<html manifest="./main.manifest">
<head>
    <mata charset="utf-8">
    <title>form test</title>
</head>
<body>
<p>V1.0</p>
<p>这里被修改了!</p>
</body>
</html>

刷新页面,发现并没有变化,因为浏览器还在使用缓存文件,那怎么刷新呢,只需要修改main.manifest文件中的 version 1.0  -> version 1.1,这个版本号随意修改,要让浏览器知道版本号变化了,然后刷新页面,还没变化,在刷新,好了,变了!

分析下过程。

一、第一次访问。

1、浏览器请求demo.com。

2、服务器返回index.html。

3、浏览器请求页面上的其他资源,包括main.manifest文件。

4、服务器返回请求的资源。

5、浏览器根据main.manifest文件请求要缓存的文件。

6、服务器返回资源。

7、浏览器更新本地缓存,触发一个事件,通知本地缓存被更新。

二、缓存未更新的访问过程

1、浏览器请求demo.com。

2、浏览器发现index.html被缓存,使用缓存的index.html。

3、浏览器使用其他index.html要使用且已经被缓存的文件。

4、浏览器请求main.manifest文件。

5、服务器返回304,告知浏览器manifest没有发生变化。

三、缓存被更新的访问过程

1、浏览器请求demo.com。

2、浏览器发现index.html被缓存,使用缓存的index.html。

3、浏览器使用其他index.html要使用且已经被缓存的文件。

4、浏览器请求main.manifest文件。

5、服务器返回更新过的main.manifest文件。

6、浏览器处理main.manifest文件,发现已被更新,请求要缓存的文件,包括index.html。

7、服务器返回文件。

8、浏览器更新本地缓存,触发一个事件,告知本地缓存被更新。

(这里注意,缓存被更新,但是已经展现出来的页面并不会使用新资源,必须刷新页面后才可以,这就是为什么上面出现第一次刷新后页面不更新的情况)

触发的那个事件是这个事件:

applicationCache.addEventListener('updateready', function(){
    alert("OK");
}, true);

 

你可能感兴趣的:(web 离线缓存)