天梯梦

浏览: 13640109 次
性别:
来自: 洛杉矶

最近访客更多访客>>

xierui54

简_单

bcrun

hur5457

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

使用HTML5开发手机离线应用

博客分类：

Div / Css / XML / HTML5

使用HTML5开发手机离线应用

本来这篇文章想叫《挺起你的HTML5》或者《让HTML5飞》或者神马其他的，但是为了更好的体现主题，我就用这个直白点的题目吧 ~

随着各种智能手机(iPhone、Android)大行其道，App模式的应用开发变得热火朝天，反观Web领域则黯然失色。然而即将（或者说已经）到来的HTML5，又为Web注入了新鲜的鸡血，让我等Web码农再次激动不已——我们可以用HTML、CSS、JavaScript开发手机应用了！可以实现绝大部分Native App的功能，跨平台，自动更新，即需即取……亲，只需要有浏览器哟！而且没有恶心的IE6 ~

做任何一个应用都离不开两种东西：文件和数据。下面我就以一个简单的小应用来介绍一下如何开发一个Web应用，让它能够在Offline的情况下取得文件和数据。

Cache Manifest

首先，请自行实现一个包含图片、JavaScript、CSS的普通HTML页面。

显而易见的，这个页面所包含的文件有HTML、JavaScript、CSS、图片。为了让这个页面能够离线访问，我们必须告诉浏览器，它要缓存那些文件，让我们下次访问的时候直接在本地取即可。

HTML5给我们提供了一种Cache Manifest的机制，让我们实现这样的功能。Cache Manifest是通过一个 .manifest为后缀的文件来配置需要缓存的或者一定要保持联网的文件，格式如下：

CACHE MANIFEST
# VERSION 1.0
 
# 直接缓存的文件
CACHE:
index.html
img.jpg
script.js
stylesheet.css
 
# 需要在时间在线的文件
NETWORK:
/wp-admin/
 
# 替代方案
FALLBACK:
/ajax/ ajax.html

同时，我们要给页面的html标签添加一个manifest属性：

<html manifest="到Manifest文件的路径.manifest">

还有一点要注意的，就是Manifest文件的MIME类型必须正确，对于Apache有两种设置方法（IIS没研究过），一种是在Apache的配置文件mime.types中加上：

text/cache-manifest manifest

一种是在网站的.htaccess文件中加上：

AddType text/cache-manifest manifest

最后，最好重启一下你的服务器~~~

使用了Cache Manifest机制后，浏览器就不会自动更新你所缓存的内容了，如果想更新客户端缓存的内容，修改.manifest文件的任意内容即可。修改版本号是一种推荐的做法，即上面的“#VERSION 1.0”（这是一个注释），甚至可以说是最佳实践。

如果想了解更多，请看这里。

Local Storage

localStorage是Web Storage存储规范中的一部分(虽然大家很喜欢把它归到HTML5的东西里面去)，目前多数浏览器都已经支持了（ie8+也支持喔~）。

这是一个易学易用的东西，用于保存key-value形式的键值对。说到键值对肯定很容易想到Cookie，不过Cookie在每次请求中都会被发送到服务器端，如果使用大数据集合的话会有性能问题，在传输中也会有安全问题。

下面就讲讲localStorage的使用吧。

首先，在召唤localstorage之前当然要检测一下是否可用：

//检测localStorage是否可用
//本段代码来自<Dive Into HTML5>
function supports_html5_storage() {
  try {
    //不懂为啥要写这么复杂
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch (e) {
    return false;
  }
}

使用localstorage的方式很简单, 直接像访问对象一样访问它即可:

//设置数据 setItem
localStorage.setItem("myKey", "myValue");
 
//获取数据 getItem
var data= localStorage.getItem("myKey");
 
//还能用数组这样的格式来访问
localStorage["myKey2"] = "myValue2";
 
var data2 = localStorage["myKey2"];
 
//移除指定数据
localStorage.removeItem("myKey2");
 
//清空数据
localStorage.clear();

操作结果可以在“开发人员工具”中看到

一些LocalStorage的注意事项：

localStorage要通过域名访问的方式才能起作用，直接打开本地文件是不行滴哟~
俺们保存的都是string，如果是int或者float的话，get回来之后记得转换一下；
本地存储数据在同样域名下的网页间是共享的，即便是在多个浏览器标签页中；
使用http://连接的页面是看不到使用https://连接会话中的数据库的。

有了Cache Manifest和LocalStorage这两个利器，是不是觉得HTML5开发手机离线应用开始有这么点眉目了？

原文：http://rolfzhang.com/articles/522.html

justcode.ikeepstudying.com

分享到：

php获取推特feed twitter timeline feed | Bootstrap 3 响应式上传图片，时间拾取器和 ...

2015-05-16 05:09
浏览 2653
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

使用HTML5开发手机离线应用

Cache Manifest

Local Storage

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

使用HTML5开发手机离线应用

Cache Manifest

Local Storage

评论

发表评论

相关推荐

SASS界面编译工具——Koala的使用

CSS3: 利用分层动画让元素沿弧形路径运动

HTML5: 利用SVG动画动态绘制文字轮廓边框线条

如何制作HTML5 SVG描边文字

基本的SVG样式属性

SVG 入门教程系列列表

CSS3: 动画循环执行(带延迟)的实现

CSS3: 常用动画特效及4个最流行的动画库

HTML5: 全局属性

CSS: 深入理解BFC和Margin Collapse (margin叠加或者合并外边距)

详解CSS的盒模型(box model) 及 CSS3新增盒模型计算方式box-sizing

CSS: div高度自动适应背景图片的高度 How to get div height to auto-adjust to background size?

移动开发需要知道的像素知识『多图』

HTML5: 两个viewport的故事（第一部分）

HTML5: 两个viewport的故事（第二部分）

CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）

CSS3: 移动端开发中 max-device-width 与 max-width 的区别

CSS：媒体查询 CSS3 Media Queries

CSS: SASS用法指南 (附视频)

九张 Gif 图回顾 Web 设计的 25 年历史

最近访客更多访客>>

CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括苹果手表 apple watch）