小DEMO之manifest初体验
前言
补漏洞系列~今天来动手体验一下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初体验的更多相关文章
- [转]Python爬虫框架--pyspider初体验
标签: python爬虫pyspider 2015-09-05 10:57 9752人阅读 评论(0) 收藏 举报 分类: Python(8) 版权声明:本文为博主原创文章,未经博主允许不得转载. ...
- 微信小程序DEMO初体验
小程序虽然被炒的很热,但是绝大部分人却从未亲自体验过,在2017年的上班第一天,献上一个小程序DEMO,您可以体验! 注意:由于微信限制,只能使用扫一扫来体验下方小程序DEMO. DEMO首页截图如下 ...
- 【尝新】微信小程序初体验
文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1474644089434 根据文档地址中下载微信开发工具后,按照文档指引可以创建一个快速体验的小d ...
- 微信小程序初体验,入门练手项目--通讯录,部署上线(二)
接上一篇<微信小程序初体验,入门练手项目--通讯录,后台是阿里云服务器>:https://www.cnblogs.com/chengxs/p/9898670.html 开发微信小程序最尴尬 ...
- Taro开发微信小程序的初体验
了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React ...
- 从一个小demo开始,体验“API经济”的大魅力
写在前面 “API经济”这个词是越来越火了,但是"API经济"具体指的是什么,相信很多人还没有个明确的认识.不过今天我可不打算长篇大论的去讲解一些概念,我们就以“电话号码归属地查询 ...
- #使用abp框架与vue一步一步写我是月老的小工具(2) 后台搭建初体验
#使用abp框架与vue一步一步写我是月老的小工具(2) 后台搭建初体验 一.续上前言 关于这个小玩意的产品思考,假设我暂时把他叫我是月老热心人 这是一个没有中心的关系链,每个人进入以后都是以自己为中 ...
- 微信小程序开发初体验
微信小程序上线几天了,趁着周末补了一下JS,然后今天参照文档和教程写了个小demo 文档地址 教程地址 看文档就看了一点时间,因为以前没接触过JS框架,但是接触过PHP框架= = ,所以理 ...
- wx小程序初体验
小程序最近太火,不过相比较刚发布时,已经有点热度散去的感觉,不过这不影响我们对小程序的热情,开发之前建议通读下官网文档,附链接:https://mp.weixin.qq.com/debug/wxado ...
随机推荐
- bzoj 1499: [NOI2005]瑰丽华尔兹【dp+单调队列】
设f[a][i][j]为第a段时间结束时在(i,j)位置的最长滑行距离,转移很好想,就是分四个方向讨论,然后枚举这段时间的滑行长度取个max即可 但是这样是O(n^4)的,考虑优化 发现同一行或列,取 ...
- selenium3 + python - js 内嵌滚动处理
一.js内嵌html <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 升级Python后, yum不能用了
yum需要使用python2,而升级python3后,就会导致语法错误 更正方法: sudo vim /usr/bin/yum 然后把第一行的python改成python2就好了 之后如果出现类似的, ...
- Python测试工具——nose
1.nose 特点: a) 自动发现测试用例(包含[Tt]est文件以及文件包中包含test的函数) b) 以test开头的文件 c) 以test开头的 ...
- Lightoj 1090 - Trailing Zeroes (II)
题目连接: http://www.lightoj.com/volume_showproblem.php?problem=1090 题目大意: 给出n,r,p,q四个数字1<=n,r,p,q< ...
- C#画图——Graphics
C#要实现简单的画图功能可以利用Graphics这个类,要使用Graphics必需using命名空间System.Drawing(此名明空间下都是关于图形的操作).首先创建画布: Bitmap bmp ...
- 1、IO概述及File类
- 215 Kth Largest Element in an Array 数组中的第K个最大元素
在未排序的数组中找到第 k 个最大的元素.请注意,它是数组有序排列后的第 k 个最大元素,而不是第 k 个不同元素.例如,给出 [3,2,1,5,6,4] 和 k = 2,返回 5.注意事项:你可以假 ...
- poj2661Factstone Benchmark
链接 利用log函数来求解 n!<=2^k k会达到400+W 暴力就不要想了,不过可以利用log函数来做 log2(n!) = log2(1)+log2(2)+..log2(n)<=k ...
- RabbitMQ四:生产者--队列--消费者
AMQP协议的梳理和名词解析 建议先把上篇AMQP协议先看一遍,理解一下,由于用XMind绘图,电脑屏幕比较小,不能截取全部,如果想要全图和源代码,请下面留言....... 可以点击图片,打开到新的 ...