html5缓存6,Web前端基础篇-HTML5-06-离线缓存AppCache

ゝ一世哀愁。 2022-10-09 00:56 268阅读 0赞

照常上图，欢迎来到老夫课堂

![c5eb7ec3dbb8][]

tmpdir\_\_17\_9\_7\_15\_04\_07.jpg

温馨提示：文章结构如下，阅读完可能需要花费3分钟

一、 AppCache缓存基础知识以及实现原理

二、 AppCache缓存使用步骤

三、 AppCache缓存优缺点以及使用场景

进入正文

一、 AppCache缓存基础知识以及实现原理

什么是AppCache ？

AppCache是应用缓存，可以这用这个功能实现用户离线访问应用，妈妈再也不用担心没有网啦。

核心基础知识有2点：

1.掌握manifest文件配置，使用html的属性加载文件

mainfest文件说明，分为五个部分

A.CACHE MANIFEST - 固定格式，必须写在前面

B.VERSION: 1.0.0 版本号 决定缓存是否需要更新

C.CACHE: 缓存的文件的绝对路径或者相对路径,绝对路径必须是同源

D.NETWORK: 需要即时从服务器请求的文件通常是会使用通配符 \*， \* 代表除CACHE以外的文件都进行在线请求

E.FALLBACK: 缓存请求失败时需要跳转的页面, 一般是失败404页面

2.掌握js的 applicationCache ，以及常用API

status 缓存的状态

update() 发起应用缓存下载进程,发起缓存请求

abort() 取消正在进行的缓存下载

swapcache() 切换成本地最新的缓存环境

updateready() 可以监听manifest中列举的文件下载状态等其他API，如果需要了解更多请自行到js里面查看

AppCache的实现原理

1.浏览器访问APPCache缓存是否有资源，有资源直接就返回渲染页面；

检查服务器manifest版本是否有更新，如果没有更新就结束；

如果manifest版本有更新，就会把manifest指定的文件从服务器全部拉取，并更新到APPCache

4.浏览器第二次访问APPCache缓存直接返回资源渲染

![c5eb7ec3dbb8][]

image.png

二、 AppCache缓存使用步骤

创建缓存清单，新增manifest.appcache文本文件，后缀名可以自定义，建议使用.appcache

CACHE MANIFEST

\# VERSION 1.0.0

CACHE:

./index.html

NETWORK:

FALLBACK:

./error.html

标签引用manifest.appcache文件

3.js 监听缓存刷新

window.applicationCache.addEventListener('updateready', function (e) \{

// 缓存的状态

if(window.applicationCache.status === window.applicationCache.UPDATEREADY)\{

//切换成本地最新的缓存环境事件

window.applicationCache.swapCache();

// 刷新页面

window.location.reload();

\},false);

注意事项：

请求的mime-type 必须是 text/cache-manifest

必须以“CACHE MANIFEST”固定行开始。

(\#)后面表示注释，和我们常用的注释方式一样

请求缓存之后有可能会用到更新缓存，更新缓存方式如下：

更新manifest文件 - 文件版本号

通过javascript操作-window.applicationCache.update()

清除浏览器缓存-用户手动清除浏览器缓存

三、 AppCache缓存优缺点以及使用场景

AppCache的兼容性：兼容IE9, 老夫重点关注万恶的IE版本，其他都基本兼容

优点：

1.完全离线，没有网络也可以使用

2.资源被缓存，加载更快

3.降低网络请求频率，降低serve负载

缺点：

1.含有manifest属性的页面都会被缓存

2.更新是建立在manifest文件的更新，文件更新之后才能更新相对应的页面，必须2次刷新

3.更新是全局的，是检测版本号全局更新，不能单点更新

4.对链接的参数敏感，index.html 与 index.html?type =1 被认为是不同的页面，不同的缓存

使用场景：

1.单地址页面

2.对实时请求数据不高的业务

3.离线webApp

[c5eb7ec3dbb8]: /images/20221005/4987eb06027842b3b2065816408c4af2.png

html5缓存6,Web前端基础篇-HTML5-06-离线缓存AppCache

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关【Web前端】 HTML5

相关 HTML5面试题-HTML5 如何实现离线缓存，有什么特点？

相关 html5缓存6,Web前端基础篇-HTML5-06-离线缓存AppCache

相关 html5 app 离线缓存文件,html5离线缓存缓存所有文件，而不是缓存中列出的文件

相关 HTML5 应用程序缓存

相关 HTML5之---Manifest 文件--离线缓存

相关 Web缓存机制综述（HTML5缓存总结与细节释疑）

相关 HTML5离线存储和本地缓存

相关 HTML5应用程序缓存

相关 HTML5离线缓存