知识体系:离线缓存

最新推荐文章于 2024-08-07 08:37:47 发布

帅田@@@@

最新推荐文章于 2024-08-07 08:37:47 发布

阅读量363

点赞数

文章标签： html html5 javascript

本文链接：https://blog.csdn.net/qq_40353716/article/details/106916643

版权

当我们断开服务器的时候，还想缓存我们的文件，就需要浏览器的离线缓存功能
离线缓存最关键的就是在要被缓存的页面的html标签中添加 manifest=“文件名.appcache” 属性，当页面被加载，就会向服务器请求.appcache的文件，告诉浏览器那些文件是需要离线缓存的。我拿了自己随便的一个项目，对登录页做离线缓存的实验，服务器我用的是nginx

<html lang="fr" manifest="demo.appcache">  //这里我定义了一个demo.appcache文件

<head>
<meta charset="utf-8">
<meta http-equiv="Expires" CONTENT="0">
<meta http-equiv="Cache-Control" CONTENT="no-cache,must-revalidate">
<meta http-equiv="Pragma" CONTENT="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="./common/plugs/bootstrap-3.3.5/css/bootstrap.min.css" />
<link rel="stylesheet" href="./common/css/font-awesome.min.css" />
<link rel="stylesheet" href="./common/css/animate.min.css" />
<link rel="stylesheet" href="./common/plugs/layer/skin/layer.css" />
<link rel="stylesheet" href="./common/css/style.min.css" />
<link rel="stylesheet" href="./common/css/zchcommon.css" />
<link rel="stylesheet" href="./common/css/login.css" />
<title>登录</title>
</head>
.....省略

demo.appcache

CACHE MANIFEST    
CACHE:       //这些是要缓存的文件
./images/login-cs/xingchi.png
./common/css/animate.min.css
./common/plugs/layer/skin/layer.css
./common/css/style.min.css
./common/css/zchcommon.css
./common/css/login.css

NETWORK:      //不需要缓存的文件  * 除了要缓存的就都不缓存
*

FALLBACK:
/ /404.html

CACHE MANIFEST ：要缓存的文件
NETWORK ：不需要缓存的文件 * 除了要缓存的就都不缓存
FALLBACK: 当页面无法访问时的回退页面

nginx配置

server {
    listen       9000;    #本地端口
    server_name  127.0.0.1;
    charset utf-8;

add_header Cache-Control 'no-store';    

root   你自己的文件地址绝对路径哦  #项目目录
index  index.html index.htm;  #项目入口文件
rewrite ^/$ /view/index.html redirect;

}

准备工作都完成了那就开始实验吧
在这里插入图片描述
看控制台输出了他缓存了6个文件，还会默认加上我们的index.html
离线缓存有一个问题那就是，他其实也会把当前的html也缓存下来，即使你没有配置，只有你修改了.appcache文件，他才会更新缓存信息，所以你直接改html文件现在是不会生效，因为他用的还是之前的缓存
所以我给.appcache文件添加一个#v1.1表明版本，你会发现你修改的东西需要刷新两次，这是为什么，因为.appcache文件是最后被解析的，页面加载的时候用的还是之前的缓存，只有到下一次才是你修改过的页面，这个说明了.appcache文件的执行优先级是在页面渲染之后才开始缓存的
解决办法就是：

//当appcache文件发生变化的时候 触发监听事件
applicationCache.onupdateready = function(){
	applicationCache.swapCache();
	location.reload();
};

添加监听事件，提醒用户你的缓存发生了变化，告诉他是否要更新，同意再刷新一下就好了

接下里我把nginx服务器关了，还是访问localhost:9000
在这里插入图片描述
你看虽然服务停了，我还是有页面加载出来，有样式，我们离线缓存的功能就实现了

因为要配置服务器，如果要使用node的话，就要自己实现一个静态资源服务器，或者直接用框架express，就有现成的静态文件功能，nginx就直接支持了静态资源返回，我就用了他

以上就是我的分享，不对的地方欢迎指正

帅田@@@@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫