小DEMO之manifest初体验

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小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文件格式错误。

以上是关于小DEMO之manifest初体验的主要内容,如果未能解决你的问题,请参考以下文章

融云im小程序集成初体验

mpvue 初体验之改写车标速查小程序

尝新微信小程序初体验

微信小程序初体验遇到的坑

跟着小甲鱼学算法之算法初体验

微信小程序开发初体验