芒果小站

  1. 全球最具业界良心的主机 - Linode

    毫无疑问,目前做得最好的主机供应商

    猛击这里查看

  2. 芒果小站目前使用的主机 - Linode

    客服响应快,随时退款,XEN 架构稳定

    猛击这里查看

  3. 最好的日本东京线路主机 - Linode

    可选弗里蒙特、达拉斯、亚特兰大、纽瓦克、伦敦、东京机房

    猛击这里查看

  • 1
  • 2
  • 3
切换到精简模式
9

5 步骤创建 HTML5 离线应用

作者 芒果/分类 代码/发布于 2011-06-15 11:00

从这里开始

1 – 添加 HTML5 doctype

第一件要做的事情是创建一个符合规范的 HTML5 文档。HTML5 doctype 相比于 xhtml 版本的 doctype 而言,要简单明了得多:

<!DOCTYPE html>
<html>
  ...

创建一个名为 index.html 的文档,或者猛击这里下载这份示例代码压缩包。关于 HTML5 的缓存请详细参考 The cache manifest syntax 章节。

2 – 添加 .htaccess 支持

我们需要创建用于缓存页面的 manifest 清单文件。但在此之前,先要在 .htaccess 文件中添加以下代码:

AddType text/cache-manifest .manifest

该指令可以确保每个 manifest 文件为 text/cache-manifest MIME 类型。如果 MIME类型不对,那么整个清单将没有任何效果,页面将无法离线使用。

3 – 创建 manifest 文件

现在我们就来创建这个 manifest 清单文件,事情将会更加有趣。新建一个文本文档并另存名为 offline.manifest,然后粘贴以下代码,稍后我会解释。

CACHE MANIFEST
#This is a comment

CACHE
index.html
style.css
image.jpg
image-med.jpg
image-small.jpg
notre-dame.jpg

现在这份 manifest 文件已经能够完美工作了。原理很简单:在 CACHE 声明之后,罗列出所有需要缓存的文件。这对于缓存简单页面已经来说足够。但是 HTML5 缓存还有更多可能。

比如,考虑以下 manifest 文件:

CACHE MANIFEST
#This is a comment

CACHE
index.html
style.css

NETWORK:
search.php
login.php

FALLBACK:
/api offline.html

其中 CACHE 声明用于缓存 index.html 和 style.css 文件。同时 NETWORK 声明用于指定无需缓存的文件,比如登录页面。

最后一个是 FALLBACK 声明,这个声明允许你在资源不可用的情况下,将用户重定向到特定文件,这个示例代码中是 offline.html。

4 – 关联 manifest 文件到 html 文档

现在,manifest 文件和 html 文档都已就绪。唯一需要做的是将 manifest 文件关联到 html 文档。

使用 html 元素的 manifest 属性:

<html manifest="/offline.manifest">

5 – 测试一下

完成后,使用 Firefox 3.5+ 本地访问 index.html 文件,会看到以下浏览器提示信息:

其他高级浏览器不会提醒是否允许缓存,而是默认自动缓存。

浏览器兼容情况参考:

  • IE: 不支持
  • Firefox: 3.5+
  • Safari: 4.0+
  • Chrome: 5.0+
  • Opera: 10.6+
  • iPhone: 2.1+
  • Android: 2.0+

英文原稿:How to create offline HTML5 web apps in 5 easy steps | CatsWhoCode
翻译整理:5 步骤创建 HTML5 离线应用 | 芒果小站

版权所有,转载请注明出处。
转载自 <a href="http://mangguo.org/create-offline-html5-web-apps-in-5-easy-steps/" title="5 步骤创建 HTML5 离线应用" rel="bookmark">5 步骤创建 HTML5 离线应用 | 芒果小站</a>
如果喜欢这篇文章,欢迎订阅芒果小站以获得最新内容。

已经有 9 条群众意见

  1. ?
    HTML5 Blog on: 5 步骤创建 HTML5 离线应用 | MiloRiano: Computers news, tips, guides... /2011-06-15 14:08

    […] See original here: HTML5 Blog on: 5 步骤创建 HTML5 离线应用 […] 回应

    #1
  2. 美女 /2011-06-15 16:18

    测试一下 回应

    #2
  3. ABrush /2011-06-16 10:16

    不错,学习了~ 回应

    #3
  4. 持久男 /2011-06-16 15:03

    啥意思,是说访问一次以后下次就是断网了也能看到以前的内容? 回应

    #4
  5. 芒果持久男/2011-06-16 15:37

    嗯,理解正确。 回应

    #5
  6. kam /2011-06-16 22:39

    html5效果很绚丽的! 回应

    #6
  7. airoschou持久男/2011-06-16 23:09

    可能是没有网络也可以访问到该页面 回应

    #7
  8. 北京户口持久男/2011-06-17 18:26

    同问 回应

    #8
  9. 严重浪漫 /2011-06-20 20:02

    学习了,html5是个好东西 回应

    #9

下面我简单说几句