05、HTML5-离线缓存application cache
2017-06-02 本文已影响134人
EndEvent
一、离线存储的好处
- 没有网络时，可以正常访问
- 快速响应页面，不必用多个HTTP占用资源带宽
- 减轻服务器的负载: 浏览器只会下载在服务器上发生改变的资源
- 缓存的可以是任何文件
离线存储，关键在于没有网络时的操作；本地存储不一样，有无网络都是一样，就是将数据保存到本地中；
二、搭建离线应用程序
- 服务器设置头信息(在Apache中的httpd.conf文件添加)
// 注意最后是有空格隔开的
AddType text/cache-manifest .manifest
如果不配置httpd.conf文件，则每次都需要添加头部信息<?php header("content-type: text/cache-manifest"); ?>
- html标签内添加
// 需要创建一个cache.manifest的文件
<html manifest='cache.manifest'></html>
- 写manifest文件: 离线清单列表
- CACHE MANIFEST: 后面即是离线清单列表
- FALLBACK: 第一个网络地址没有获取到，就走第二个缓存
- NETWORK: 无论缓存中存在与否，均从网络获取
CACHE MANIFEST
#VERSION 1.0
CACHE:
index.html
./js/jquery.js
CACHE MANIFEST：文件标识
#VERSION 1.0: 版本号，只是一行注释，但改变可以更新缓存
CACHE：表示要缓存的文件
更新缓存的方式，更新manifest文件
浏览器发现manifest文件本身发生变化，便会根据新的manifest文件去获取新的资源进行缓存。
【修改一下manifest文件，把version改为1.1，然后刷新页面】
注意:
1、站点离线存储的容量限制是5M
2、引用manifest的html必须与manifest文件同源，在同一个域下
3、当manifest文件发生改变时，资源请求本身也会触发更新
