前言

补漏洞系列~今天来动手体验一下HTML5中的离线应用之mainifest缓存清单。实际上H5还提供了一个JavaScript接口来用于更新缓存文件的方法以及对缓存文件的操作。
在Chrome中，输入以下地址就可以查看浏览器的本地缓存：



chrome://cache/

关于manifest

离线应用，就是没有网络的时候，我也可以访问它的这个静态页面，虽然我们可能打开了某个网页，突然断网之后，这个网页的内容也不会消失，但是刷新之后，其实这个网页就GG了，如果配置了manifest，就可以实现刷新也不会消失内容。
所以什么是manifest
manifest是一个清单文件，在里面列出了离线访问时所需要的文件清单。
它的MINE类型是text/cache-manifest，我们要实现它的传输，就必须要在服务器中配置这个类型方法。

配置服务器

我这里用的是Apache，在Apache的conf文件夹下，找到mime.types这个文件，然后找到下面这行：



text/cache-manifest manifest

如果前面有#号（代表注释掉了），就去除，说明Apache原来并没有实现这个类型。当然我的是默认开启的，而且它写的对应的文件类型是appcache，我就在后面又加了一个manifest，这样也可以对应啦。

编写.manifest文件

在你想要实现离线应用的那个网站目录下，新建一个cache.manifest文件，当然啦文件名随便起，只要格式是这个就行。
这个文件的内容分为三个部分：

  • CACHE MANIFEST：必须，后面跟着缓存的信息，每个站点有5MB来存储数据，如果文件无法加载，那么整个过程将无法进行下去。
  • NETWORK：罗列的文件需要网络才能访问。
  • CACHE：manifest文件的默认入口，下载到本地后会被缓存。
  • FALLBACK：备份内容，一行写两个（对应资源文件 回调页面），如果资源文件找不到，就会去显示回调页面

这些部分没有先后顺序，并且可以出现多次

举个例子



CACHE MANIFEST

#version 1.0

# 以下资源必须联网使用

NETWORK:

login.php

# 指明缓存入口

CACHE:

index.html

style.css

FALLBACK:

index.html 404.html

修改HTML文件

在标签处加一个属性把文件引入即可：



<html manifest="cache.manifest">...</html>

访问浏览器

访问配置好的页面，会发现控制台在慢慢处理信息哦，这里我河蟹一些信息：



???.cn/:1 Document was loaded from Application Cache with manifest http://???/cache.manifest

22:01:47.823 ???.cn/:1 Application Cache Checking event

22:01:47.823 ???.cn/:1 Application Cache NoUpdate event

把网关掉，会发现页面刷新，或者打开一个窗口输入URL，也能访问哦！

【补充】
可能碰到一个报错：Application Cache Error event: Manifest fetch failed。
原因可能是：

  • 服务器未配置manifest类型。
  • 写的.manifest文件格式错误。

原文地址：https://segmentfault.com/a/1190000014962111

小DEMO之manifest初体验的更多相关文章

  1. [转]Python爬虫框架--pyspider初体验

    标签: python爬虫pyspider 2015-09-05 10:57 9752人阅读 评论(0) 收藏 举报  分类: Python(8)  版权声明:本文为博主原创文章,未经博主允许不得转载. ...

  2. 微信小程序DEMO初体验

    小程序虽然被炒的很热,但是绝大部分人却从未亲自体验过,在2017年的上班第一天,献上一个小程序DEMO,您可以体验! 注意:由于微信限制,只能使用扫一扫来体验下方小程序DEMO. DEMO首页截图如下 ...

  3. 【尝新】微信小程序初体验

    文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644089434 根据文档地址中下载微信开发工具后,按照文档指引可以创建一个快速体验的小d ...

  4. 微信小程序初体验，入门练手项目--通讯录，部署上线(二)

    接上一篇<微信小程序初体验,入门练手项目--通讯录,后台是阿里云服务器>:https://www.cnblogs.com/chengxs/p/9898670.html 开发微信小程序最尴尬 ...

  5. Taro开发微信小程序的初体验

    了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React ...

  6. 从一个小demo开始，体验“API经济”的大魅力

    写在前面 “API经济”这个词是越来越火了,但是"API经济"具体指的是什么,相信很多人还没有个明确的认识.不过今天我可不打算长篇大论的去讲解一些概念,我们就以“电话号码归属地查询 ...

  7. #使用abp框架与vue一步一步写我是月老的小工具（2） 后台搭建初体验

    #使用abp框架与vue一步一步写我是月老的小工具(2) 后台搭建初体验 一.续上前言 关于这个小玩意的产品思考,假设我暂时把他叫我是月老热心人 这是一个没有中心的关系链,每个人进入以后都是以自己为中 ...

  8. 微信小程序开发初体验

    微信小程序上线几天了,趁着周末补了一下JS,然后今天参照文档和教程写了个小demo 文档地址       教程地址 看文档就看了一点时间,因为以前没接触过JS框架,但是接触过PHP框架= = ,所以理 ...

  9. wx小程序初体验

    小程序最近太火,不过相比较刚发布时,已经有点热度散去的感觉,不过这不影响我们对小程序的热情,开发之前建议通读下官网文档,附链接:https://mp.weixin.qq.com/debug/wxado ...

随机推荐

  1. bzoj 4517: [Sdoi2016]排列计数【容斥原理+组合数学】

    第一个一眼就A的容斥题! 这个显然是容斥的经典问题------错排,首先考虑没有固定的情况,设\( D_n \)为\( n \)个数字的错排方案数. \[ D_n=n!-\sum_{t=1}^{n}( ...

  2. Ubuntu安装配置vsftpd

    1. 安装    1. sudo apt-get install vsftpd    2. sudo apt-get install db4.8-util   用于创建虚拟用户 2. 创建用户 创建文 ...

  3. Qt对象模型之二：对象树与元对象系统

    一.对象树的概念 Qt中使用对象树(object tree)来组织和管理所有的QObject类及其子类的对象.当创建一个QObject时,如果使用了其他的对象作为其父对象(parent),那么这个 Q ...

  4. 数据结构 - 顺序队列的实行（C语言）

    数据结构-顺序队列的实现 1 顺序队列的定义 线性表有顺序存储和链式存储,队列作为一种特殊的线性表,也同样存在这两种存储方式.我们先来看队列的顺序存储结构. 队列的顺序储存结构:用数组存储队列,为了避 ...

  5. CF1140G Double Tree

    题解 首先如果我们要确定出每个\(dis_{i \to i+1 , i \in odd}\) 这个可以用两遍树形\(DP\)来解决 一遍是考虑走子树子树绕过来的 一遍是考虑从走祖先绕过来的 然后就可以 ...

  6. [USACO 2011 Dec Gold] Cow Calisthenics【二分】

    Problem 1: Cow Calisthenics [Michael Cohen, 2010] Farmer John continues his never-ending quest to ke ...

  7. HTML/XML转义字符对照表

    HTML/XML转义字符对照表 HTML/XML转义字符对照表包含符号.数学符号.希腊字母 .重要的国际标志.ISO 8859-1 (Latin-1)字符集.特殊符号等. 1.特殊字符转义表 字符 十 ...

  8. java垃圾回收体制

    JVM分代垃圾回收策略的基础概念 为什么要分代 分代的垃圾回收策略,是基于这样一个事实:不同的对象的生命周期是不一样的.因此,不同生命周期的对象可以采取不同的收集方式,以便提高回收效率. 在Java程 ...

  9. 213 House Robber II 打家劫舍 II

    注意事项: 这是 打家劫舍 的延伸.在上次盗窃完一条街道之后,窃贼又转到了一个新的地方,这样他就不会引起太多注意.这一次,这个地方的所有房屋都围成一圈.这意味着第一个房子是最后一个是紧挨着的.同时,这 ...

  10. NGUI利用深度测试实现新手引导遮罩

    实现原理:实际上就是先利用渲染队列渲染,然后再利用ZTest,改变渲染的遮挡关系. PS:Depth Testing:深度测试,也叫深度缓冲.只有最靠近观察者的物体会被绘制.深度即Z,该值越小表示离观 ...