小DEMO之manifest初体验

fantix 发布于2019-08-05 13:56 / 953人阅读

摘要：前言补漏洞系列今天来动手体验一下中的离线应用之缓存清单。实际上还提供了一个接口来用于更新缓存文件的方法以及对缓存文件的操作。罗列的文件需要网络才能访问。文件的默认入口，下载到本地后会被缓存。原因可能是服务器未配置类型。写的文件格式错误。

前言

补漏洞系列~今天来动手体验一下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文件

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

...

访问浏览器

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

???.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文件格式错误。

idc机房托管超融合服务器初体验小程序体验微信小程序Demo 免费体验小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/57678.html

试用期第一周---快应用初体验

摘要：各大手机厂商意识到了危机，于是八大厂商联合起来推出了快应用，意图从微信小程序的围剿中杀出一条血路。而且用户是否愿意放弃都在使用的微信，而转入投入未知的快应用，也是一个问题。因为微信的普及，微信小程序得到极大的推广，从刚开始的受人诟病，到如今的每个公司人手一个微信小程序。各大手机厂商意识到了危机，于是八大厂商联合起来推出了快应用，意图从微信小程序的围剿中杀出一条血路。这里就是我...

greatwhole 2019-08-22 18:16 评论0 收藏0
小程序云开发之初体验

摘要：小程序云开发之初体验前言选型的时候前后端都准备自己搞，然后选中方案，搭建的时候，发现官方文档没有了，后来问客服，客服说方案是存量用户使用的，相关文档已经下线说是现在主推云开发，然后带着疑问和懵逼脸转向了云开发最后发现云开发的我是幸福的小程序云开发之初体验前言：选型的时候前后端都准备自己搞，然后选中wafer方案，搭建的时候，发现官方文档没有了，后来问客服，客服说wafer方案是存量...

yanbingyun1990 2019-08-23 16:25 评论0 收藏0
小程序云开发之初体验

摘要：小程序云开发之初体验前言选型的时候前后端都准备自己搞，然后选中方案，搭建的时候，发现官方文档没有了，后来问客服，客服说方案是存量用户使用的，相关文档已经下线说是现在主推云开发，然后带着疑问和懵逼脸转向了云开发最后发现云开发的我是幸福的小程序云开发之初体验前言：选型的时候前后端都准备自己搞，然后选中wafer方案，搭建的时候，发现官方文档没有了，后来问客服，客服说wafer方案是存量...

Lionad-Morotar 2019-08-02 16:08 评论0 收藏0
小程序云开发之初体验

摘要：小程序云开发之初体验前言选型的时候前后端都准备自己搞，然后选中方案，搭建的时候，发现官方文档没有了，后来问客服，客服说方案是存量用户使用的，相关文档已经下线说是现在主推云开发，然后带着疑问和懵逼脸转向了云开发最后发现云开发的我是幸福的小程序云开发之初体验前言：选型的时候前后端都准备自己搞，然后选中wafer方案，搭建的时候，发现官方文档没有了，后来问客服，客服说wafer方案是存量...

Labradors 2019-08-30 15:56 评论0 收藏0
小程序云开发之初体验

摘要：小程序云开发之初体验前言选型的时候前后端都准备自己搞，然后选中方案，搭建的时候，发现官方文档没有了，后来问客服，客服说方案是存量用户使用的，相关文档已经下线说是现在主推云开发，然后带着疑问和懵逼脸转向了云开发最后发现云开发的我是幸福的小程序云开发之初体验前言：选型的时候前后端都准备自己搞，然后选中wafer方案，搭建的时候，发现官方文档没有了，后来问客服，客服说wafer方案是存量...

thekingisalwaysluc 2019-08-05 16:34 评论0 收藏0