知识体系:离线缓存

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

帅田@@@@

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

阅读量361

点赞数

文章标签： 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
评论
知识体系:离线缓存

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

扫一扫