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将你的设计带入下个高度
Aug 08 HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 HTML / CSS
CSS3简单实现照片墙
Dec 12 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
HTML5实现的震撼3D焦点图动画的示例代码
Sep 26 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
html5使用canvas绘制文字特效
Dec 15 HTML / CSS
借助HTML5 Canvas API制作一个简单的猜字游戏
Mar 25 HTML / CSS
HTML5本地存储之IndexedDB
Jun 16 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 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
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
咖啡的化学
2021/03/03 咖啡文化
PHP随机数生成代码与使用实例分析
2011/04/08 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
详细解读php的命名空间(一)
2018/02/21 PHP
location.href用法总结(最主要的)
2013/12/27 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
2018/05/10 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
详解webpack引入第三方库的方式以及注意事项
2019/01/15 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
vue+element UI实现树形表格
2020/12/29 Vue.js
新手该如何学python怎么学好python?
2008/10/07 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
2013/01/09 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
编写一个 C 函数,该函数在一个字符串中找到可能的最长的子字符串,且该字符串是由同一字符组成的
2015/07/23 面试题
组织关系转移介绍信
2014/01/16 职场文书
父亲追悼会答谢词
2014/01/17 职场文书
中学生英语演讲稿
2014/04/26 职场文书
三好生演讲稿
2014/09/12 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
计算机专业自荐信范文
2015/03/26 职场文书
大学生入党自传2015
2015/06/26 职场文书
Jupyter notebook 更改文件打开的默认路径操作
2021/05/21 Python
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers