美文网首页Web前端之路让前端飞技术干货
HTML5简明教程(五)离线应用

HTML5简明教程(五)离线应用

作者: 娜姐聊前端 | 来源:发表于2017-05-11 16:50 被阅读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

微信公众号:

相关文章

  • HTML5简明教程(五)离线应用

    HTML5支持离线功能,当网络不可用时,网页还能够正常访问,部分功能还将继续使用。实现离线应用,最重要的是缓存资源...

  • HTML5--离线web应用

    HTML5新增了离线应用,离线应用使得我们可以在网页或应用在没有网络的情况下依然可以使用。离线应用的使用需要以下几...

  • 二十、离线应用与客户端存储

      支持离线 Web 应用开发是 HTML5 的另一个重点。   所谓离线 Web 应用,就是在设备不能上网的情况...

  • 离线应用与客户端存储

    本章内容:进行离线检测、使用离线缓存、在浏览器中保存数据‘ 支持离线 Web 应用开发时 HTML5 的另一个重点...

  • 离线应用和客户端缓存

    HTML5支持离线Web开发,离线Web应用指设备在没有网的情况仍然能运行的应用。本文简单总结了相关知识。 开发步...

  • Javascript-离线应用和客户端存储

    一、离线检测 开发离线应用的第一步是要知道设备是在线还是离线,HTML5为此定义了一个navigator.onLi...

  • 面试准备

    1.本地存储 navigator.onLine 判断设备是否能上网 HTML5应用缓存,为离线web应用设计,可以...

  • 知识点

    native应用开发简明教程 地址 [官方MVP架构教程] (http://www.infoq.com/cn/ar...

  • 离线应用和客户端存储-应用缓存

    HTML5 的应用缓存(application cache),或者简称为 appcache,是专门为开发离线 We...

  • HTML5在移动端开发的12大特性

    1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的coo...

网友评论

    本文标题:HTML5简明教程(五)离线应用

    本文链接:https://www.haomeiwen.com/subject/cgjstxtx.html