HTML5简明教程（五）离线应用
2017-05-11 本文已影响92人
娜姐聊前端
HTML5支持离线功能，当网络不可用时，网页还能够正常访问，部分功能还将继续使用。实现离线应用，最重要的是缓存资源，因此，离线应用核心需要定义一份描述文件，指定需要缓存的具体资源。
创建离线应用的三个步骤如下：
1. 创建描述文件
描述文件是一个以.manifest或.appcache为后缀的文本文件，其列出了所有需要缓存的内容。
描述文件第一行必须是CACHE MANIFEST，#代表注释。
CACHE MANIFEST
index.html
# styles & scripts
script.js
style.css
# images
images/bg.png
# FALLBACK指定后备资源
# 在线状态使用page.html，离线状态使用page_offline.html
FALLBACK:
page.html page_offline.html
# NETWORK指定不缓存的资源
# * 的含义为：除了上面列出的资源，其他资源都需要从Web服务器下载
NETWORK:
*
2. 引用描述文件
修改口入主页面，引用描述文件，这样，浏览器在请求页面时会下载描述文件。
<!DOCTYPE html>
<html lang="en" manifest="test.manifest">
...
</html>
3. 配置Web服务器
Web服务器必须以正确的MIME类型提供描述文件，即，response的content-type属性值必须是text/cache-manifest。
如果Web服务器以其他格式返回描述文件，浏览器会忽略该文件。
maifest.png
下一节：HTML5简明教程（六）Web Socket和Web Worker
微信公众号：
