H5离线存储Manifest原理及使用


Posted in HTML / CSS onApril 28, 2020

理解:

离线存储可以将站点的文件储存在本地,在没有网络的情况下还是可以访问到存储的对应的站点的页面,这些文件可以包括html,js,css,img等等文件。但其实即使在有网络的时候,浏览器也会优先使用已离线存储的文件。

什么是Manifest:

Manifest是一个简单的 文本文件,它的扩展名是任意的,定义需要缓存的文件、资源,当第一次打开时,浏览器会自动缓存相应的资源。

Manifest 的特点:

  • 离线浏览:即当网络断开时,可以继续访问你的页面。
  • 访问速度快:将文件缓存到本地,不需每次都从网络上请求。
  • 稳定性:做了Manifest缓存,遇到突发网络故障或者服务器故障,继续访问本地缓存。

Manifest的使用:

创建一个和html同名的manifest文件,比如页面为index.html,那么可以建一个index.manifest的文件,然后给index.html的html标签添加如下属性即可:

<html lang="en" manifest="index.manifest"> 或<html manifest="http://www.example.com/index.manifest">

manifest 的引入可以使绝对路径也可以是相对路径,如果你使用的是绝对路径,你的manifest文件必须和你的站点挂在同一个域名下。
manifest文件你可以保存为任意的扩展名,但mine-type 必须是 text/cache-manifest。

<html lang="en" manifest="index.manifest">  或  <html lang="en" manifest="index.cache">

在服务器上部署时需要在服务器上添加相应的mie-type。

manifest 标签应该包含到你需要缓存资源的页面,当第一次打开该页面时,浏览器会解析该页面中的mainfest,并缓存里面列举的资源,同时该页面也会自动会被浏览器缓存,即使该页面没有在Manifest中列出。

Manifest文件结构:

manifest文件,基本格式为三段: CACHE, NETWORK,与 FALLBACK,其中NETWORK和FALLBACK为可选项。

而第一行CACHE MANIFEST为固定格式,必须写在前面。

以#号开头的是注释,可以是版本号,时间戳等等。一般会在这写个版本号,用来在缓存的文件更新时,更改manifest的作用:浏览器已经缓存下来的缓存,只有当manifest文件发生了改变才会更新本地缓存,即使你的代码发生了

更新,本地浏览器也是不知道的,所以每次发布代码时你可以更改下#后面的信息比如版本号或者时间,告诉浏览器相应的更新本地缓存。

CACHE MANIFEST
     #v0.1
     CACHE:
       js/index.js
             css/index.css
     NETWORK:
             images/logo.png
     FALLBACK:
      *.html /404.html /* / /404.html 或 /html/ /404.html 也可*/

1、第一行是CACHE MANIFEST 这是必须需要的。

2、CACHE(必须) 标识出哪些文件需要缓存,可以是相对路径也可以是绝对路径。这里列举出来的文件,当第一次加载下来时,会被浏览器缓存在本地。

3、NETWORk 这一部分是要绕过缓存直接读取的文件,可以使用通配符 ,大多数网站使用 * 。 当使用 时 表示出 CACHE指定文件外,其它所有页面都需要联网访问。

4、FALLBACK (可选) 当资源无法访问时,浏览器使用后备资源去替代。第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。

下面的例子中,如果无法建立因特网连接,则用 “404.html” 替代 /html5/ 目录中的所有文件。

FALLBACK:
/html5/ /404.html

下面的例子中,当任何页面无法访问时跳转到 “404.html”页。

FALLBACK:
*.html /404.html

注意: 1 必须在第一行 2、3、4 直接的顺序是随意的,并且在同一个manifest文件中可以出现多次,多次和一次效果一样。

  添加 manifest  属性的页面会自动被浏览器缓存,不需要再CACHE节点中再次添加。

如何更新缓存

  • 更新manifest文件
  • 通过javascript操作
  • 清除浏览器缓存

给manifest添加或删除文件,都可更新缓存,如果我们更改了js,而没有新增或删除,前面例子中注释中的版本号,可以很好的用来更新manifest文件。
html5中引入了js操作离线缓存的方法,下面的js可以手动更新本地缓存。

window.applicationCache.update();

如果用户清除了浏览器缓存(手动或用其他一些工具)都会重新下载文件。

我们可以使用代码手动更新manifest缓存,一旦webapp源码更新,会自动更新本地manifest缓存,使用户始终访问到最新的源码。

window.applicationCache.addEventListener('updateready', function(e) {
    if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
     window.applicationCache .swapCache();
      if (confirm('A new version of this site is available. Load it?')) {
        window.location.reload();
      }
    } else {
      // Manifest didn't changed. Nothing new to server.
    }
  }, false);

到此这篇关于H5离线存储Manifest原理及使用的文章就介绍到这了,更多相关H5离线存储Manifest内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木! 

HTML / CSS 相关文章推荐
纯css3(无图片/js)制作的几个社交媒体网站的图标
Mar 21 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
Jan 30 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 HTML / CSS
HTML5实现移动端弹幕动画效果
Aug 01 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
Mar 31 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
HTML+CSS 实现顶部导航栏菜单制作
Jun 03 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 HTML / CSS
css之clearfix的用法深入理解(必看篇)
May 21 HTML / CSS
什么是clearfix (一文搞清楚css清除浮动clearfix)
May 21 HTML / CSS
HTML5中的网络存储实现方式
Apr 28 #HTML / CSS
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
Apr 27 #HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 #HTML / CSS
html5中使用hotcss.js实现手机端自适配的方法
Apr 23 #HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 #HTML / CSS
基于HTML5+tracking.js实现刷脸支付功能
Apr 16 #HTML / CSS
HTML中meta标签及Keywords
Apr 15 #HTML / CSS
You might like
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
php方法调用模式与函数调用模式简例
2011/09/20 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
JS获取select的value和text值的简单实例
2014/02/26 Javascript
JQuery遍历DOM节点的方法
2015/06/11 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
react-native-tab-navigator组件的基本使用示例代码
2017/09/07 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
[01:13]DOTA2群星解读国服召集令 一起说出回归的理由
2013/07/17 DOTA
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python实现中文输出的两种方法
2015/05/09 Python
Python更新数据库脚本两种方法及对比介绍
2017/07/27 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
python实现的发邮件功能示例
2019/09/11 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
医学专业毕业生个人求职信
2013/12/25 职场文书
大学毕业后的十年规划
2014/01/07 职场文书
综合实践教学反思
2014/01/31 职场文书
六五普法规划实施方案
2014/03/21 职场文书
总结表彰大会主持词
2014/03/26 职场文书
全国文明单位申报材料
2014/05/31 职场文书
广告设计专业毕业生自我鉴定
2014/09/27 职场文书
2015年会计工作总结范文
2015/05/26 职场文书
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python
Go归并排序算法的实现方法
2022/04/06 Golang
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis