您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > 前端开发 > HTML5&CSS3

5步创建HTML5 离线Web应用程序

作者:UncleToo  来源:原创  日期:2013-12-12 7:45:31
收藏  评论:( 0 )  阅读:882

5步创建HTML5 离线Web应用程序

在所有HTML5新增功能中,Web离线缓存是我最喜欢的一项功能,本文将给大家介绍如何创建可离线浏览的HTML5页面。

1 - 添加HTML5的doctype

要做的第一件事是创建一个有效的HTML5文档。 HTML5的doctype比XHTML更简单更容易让人记住:

<!DOCTYPE html>

<html>

创建的文档保存为index.html


2 - 添加htaccess的支持

需要缓存的文件我们称之为manifest文件,在创建之前我们首先要一个指令添加到.htaccess文件(假设你的服务器是Apache)。

打开.htaccess文件,该文件位于你的网站根目录,并添加以下代码:

AddType text/cache-manifest .manifest

该指令可以确保每一个.manifest文件被当作text/cache-manifest。 如果文件没有,那么整个manifest将没有任何效果,页面将在脱机状态下不可用。


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


比如上例中manifest文件中,我们有一个CACHE声明缓存index.html和style.css文件。 但是,我们也有NETWORK申报,这是用来指定不应被缓存的文件,如登录页面。

最后声明FALLBACK 。 如果资源(/ API)无法离线,这个声明就会让您将用户重定向到一个特定的文件(在本例中, offline.html )。


4–将manifest文件链接到HTML文件

现在,manifest文件和主html文件都准备好了。 你要做的唯一一件事就是将manifest文件链接到html文件。

方法很简单,只需将manifest属性添加到html如下图所示的元素:

<html manifest="/offline.manifest">


5–测试

上面所有步骤准备好后就可以进行测试了,如果用Firefox 3.5+浏览器访问index.html,你讲看到如下的提示:

其他浏览器我也测试过,想Chrome,Safari,Android和iPhone等没有这样的提示,而自动缓存了。

对于HTML5的离线技术,有的浏览器是不支持的,如IE。下面我们看看各个浏览器的支持情况:

IE: 不支持

Firefox: 3.5+

Safari: 4.0+

Chrome: 5.0+

Opera: 10.6+

iPhone: 2.1+

Android: 2.0+


本文由UncleToo原创,转载请注明出处!



除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/html5/732.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论