html5metro的简单介绍

如何使用下面的HTML5功能创建离线的网页和应用程序

在这篇文章中，我们将展示如何创建乖巧离线的网页和应用程序使用下面的HTML5功能：

AppCache本地存储文件资源，离线访问它们作为URL

索引型数据库存储结构化数据在本地，你可以访问和查询它

DOM存储在本地存储少量的文字信息，

离线事件来检测，如果你€ 重新连接到网络

例：随时随地访问数据的离线支持

让我们€™的说，你去购物，从您 最喜爱的食品网站 的配方的打印输出，但是当你€™重新在市场上，你塔卡纳€™吨找到一些关键的成分。

试想一下，当你在家中使用移动PC浏览 食谱网站 ，部分网站会自动下载离线使用。这可以让你把你的手机PC到店，访问该网站，并在市场寻找一个新的配方。 最好的部分 是，你可以做到这一点， 而  被连接到网络。作为一个消费者，您的网站感激，因为它只是工作时，你需要它。

离线的'蛋糕'这个词使用的食谱网站的搜索结果。

作为一个开发者，你可以使这些类型的场景相结合的离线技术： AppCache ，索引型数据库 ， DOM存储 ， WebSockets的 （或 XHR ）。 在探索个人的技术，让我们的探讨的好处。

Metro风格的应用程序和网站，离线技术让你来处理连接故障。想象一下，您的用户填写一个表格，他失去网络连接。您的网站或Metro风格的应用程序应该怎么做呢？连接自由发展的心态可以让您的应用程序是否连接到网络或不正确地独立工作。你的应用程序将正常工作。

在更复杂的情况下，Web站点和应用程序允许用户创建新的内容，并存储新的数据，即使应用程序是完全脱机。试想一下，无缝地工作在脱机状态下，如Outlook今天的Outlook Web Access（OWA）的Hotmail或GMail。

离线技术也可以通过本地缓存的资源服务，预缓存将来信息和转移从云（或网络）到客户端设备的处理能力，提高整体性能。信息越多，你€™重新能够缓存在本地，在本地搜索，并计算在本地服务器和用户的体验将更快，需要更少的资源热转印机 。

有一个Metro风格的应用程序离线工作的期望高于网站的脱机工作。因为他们使用从商店的自我包含的程序包部署，用户希望他们有某种类型的离线功能（如游戏，书籍，食谱等）。即使这些应用程序是无法创建或访问新的内容，以前的内容应该是可见的（例如联系人，会议，饲料，杂志等）。

本地缓存文件资源使用AppCache

AppCache使您能够创建长寿命的本地缓存下载的文件资源，资源可以访问而离线或使用的同时在线，以提高性能。试想一下，一个三岁的孩子使用一台笔记本电脑，下载一个交互式的Web的游戏（KidsBook）从您的家庭网络。如果应用程序的资源存储在本地，孩子可以继续在车上玩游戏，那里没有网络连接。

如果KidsBook使用AppCache，本场比赛将有缓存必要的资源（的JavaScript，HTML，CSS，音频，视频等）时，先下载后从网络上断开时，播放的游戏。这可以让孩子保持愉悦，即使设备本身没有网络连接。

AppCache创作流程。

要看到如何启用互动网页游戏脱机工作，检查出 KidsBook的 IE Test Drive网站 上的例子。

AppCache使用一个manifest文件，以缓存的内容从网站上指定资源的URI。幕后发生后，浏览器显示网页，它允许在清单文件中定义的资源被下载的缓存。这保证了资源下载到本地机器上，作为一个单位在一个事务中，创建一个本地的缓存。如果一个单一的资源下载失败，没有创建高速缓存。要更新存储在缓存中的内容，在您的服务器更新清单文件。当用户下次访问该网站时，浏览器比较明显的服务器上的文件的缓存副本。如果缓存的舱单副本是不同的服务器副本，新版本更新清单文件中定义的内容高速缓存的使用。

AppCache还允许Internet Explorer和Metro风格的应用程序在脱机状态下使用传统的URL的访问缓存的资源。这可以让你在浏览器窗口中键入一个URL，并没有任何网络连接的情况下访问此信息。此外，脱机页可以解决的URI使用本地缓存的信息。代码示例来看看在 HTML5应用程序缓存（“œAppCacheâ） 部分中的 IE10开发人员指南 。

总体而言，AppCache提供了一定的优势HTTP的缓存。HTTP缓存没有吨保证缓存的资源之后将TIF（临时Internet文件）将被清除。此外，HTTP缓存没有€™吨正确地解决在脱机状态下的URL。然而，HTTP缓存可用于优化AppCache的行为，通过指定的缓存资源的生命周期。如果从网站上下载或复制的资源从缓存的本地高速缓存中创建一个新的版本时，这将决定。

Metro风格的应用可以受益于AppCache通过在本地缓存的Web资源的访问的页框，它允许脱机访问的内容。

高速缓存大型本地使用索引型数据库的结构化数据

索引型数据库 是一个本地JavaScript对象存储在本地机器上的数据库，允许快速索引和搜索的对象。前面介绍的 食谱网站， 包括16食谱从父站点中提取的数据库。想象一下，用一个RSS feed，一个WebSocket或XHR连接的，定期更新这个数据库。这将使您的用户能够访问到最新的食谱，即使他们有没有网络连接。

索引型数据库，您可以直接操作和索引的JavaScript对象。使用索引型数据库搜索本地信息的优点是它不会强迫你总是在云中搜索，降低了计算成本。这是假设你€™重新能够维持，是缓存在本地系统中的数据的相关性。

相关问答

Q1: Html5会带来怎样的体验？

在以下领域有突出的体验：

1、语义特性（Class：Semantic）

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。

2、本地存储特性（Class: OFFLINE STORAGE）

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。

3、设备兼容特性 (Class: DEVICE ACCESS)

从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。

4、连接特性（Class: CONNECTIVITY）

更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

5、网页多媒体特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。

6、三维、图形及特效特性（Class: 3D, Graphics Effects）

基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。

7、性能与集成特性（Class: Performance Integration）

没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，解决以前的跨域等问题，帮助您的Web应用和网站在多样化的环境中更快速的工作。

8、CSS3特性(Class: CSS3)

在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。

Q2: 手机html5前端开发用什么框架

jquery mobile和bootstrap都是较好的框架。为了使用便利，下文列举了目前最强大应用最广泛的几款前端开发框架。

1. Bootstrap

Boostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美，直观并且给力的web设计工具包，可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件，栅格系统以及一些常用的JavaScript插件。

2. Fbootstrapp

Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和设计相同的功能。包含用于所有标准组件的基本的CSS和HTML，包括排版、表单、按钮、表格、栅格、导航等等，风格与Facebook类似。

3. BootMetro

BootMetro框架的灵感来自于Metro UI CSS，基于Bootstrap 框架构建，用于创建Windows 8 的Metro风格的网站。它包括所有Bootstrap的功能，并添加了几个额外的功能，比如页面平铺，应用程序栏等等。

4. Kickstrap

Kickstrap是Bootstrap的一个变体。它基于Bootstrap，并在它的基础上添加了许多app，主题以及附加功能。这使得这个框架可以单独地用于构建网站，而不需要额外安装什么。你需要做的仅仅是把它放到你的网站上，然后用就可以了。

5. Foundation

Foundation 是一款强大的，功能丰富的并且支持响应式布局的前端开发框架，你可以通过Foundation快速创建原型，利用它所包含的大量布局框架，元素以及最优范例快速创建在各种设备上可以正常运行的网站以及app。Foundation在构建的时候秉承移动优先的策略，它拥有大量实用的语义化功能，并且使用Zepto类库来取代jQuery，这样可以带来更好的用户体验，并且提高运行的速度。

6. GroundworkCSS

GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一个高级响应式的HTML5，CSS以及JavaScript工具包，可以用于快速创建原型并且建立在各种浏览设备上可以正常工作的网站和app。

7. Gumby

Gumby 是一款基于Sass和Compass的简单灵活并且稳定的前端开发框架。

它的流式-固定布局（fluid-fixed layout）可以根据桌面端以及移动设备的分辨率自动优化要呈现的网页内容。它支持多种网格布局，包括多列混杂的嵌套模式。Gumby提供两套PSD的模板，方便你在12列和16列的网格系统上进行设计。

8. HTML KickStart

HTML Kickstart 是一款可以用来方便创建任何布局的集合HTML5，CSS和jQuery的工具包。它提供了干净，符合标准以及跨浏览器兼容的代码。

9. IVORY

IVORY 是一款轻量，简单但是强大的前端框架，可以用于320到1200像素宽度的响应式布局。它基于12列的响应式网格布局，包含表格，按钮，表格，分页，拨动开关，工具提示，手风琴，选项卡等网站中常用的组件和样式。

10.Kube

最后，如果你的新项目需要一款实在的，不需要复杂的额外功能组件的，足够简单的框架，那么 Kube 将会是你正确的选择。Kube是一款最小化的，支持响应式的前端框架，它没有强加的样式设计，因此给了你充分的自由来开发自己的样式表。它提供了一些web元素的基本样式，比如网格，表单，排版，表格，按钮，导航，链接以及图片等等。

Q3: Windows 8 Metro应用开发选择HTML5+CSS还是c#？

都可以

C#适合高性能本地应用，但是上手难，调试什么的，开发周期会比较长

html5+Css会比较好上手，开发周期会比较短，不过开发的应用以网络内容消费为主，（类似微薄客户端，Rss阅读器，还有一些简单游戏）

不过总的说来学C#会好很多

Q4: 如何使用 HTML5 的 Notification API

在使用网页版Gmail的时候，每当收到新邮件，屏幕的右下方都会弹出相应的提示框。借助HTML5提供的Notification API，我们也可以轻松实现这样的功能。

确保浏览器支持

如果你在特定版本的浏览器上进行开发，那么我建议你先到 caniuse 查看浏览器对Notification API的支持情况，避免你将宝贵时间浪费在了一个无法使用的API上。

如何开始

JavaScript Code复制内容到剪贴板

var notification=new Notification(‘Notification Title',{

body:'Your Message'

});

上面的代码构造了一个简陋的通知栏。构造函数的第一个参数设定了通知栏的标题，而第二个参数则是一个option 对象，该对象可设置以下属性：

body ：设置通知栏的正文内容。

dir ：定义通知栏文本的显示方向，可设为auto(自动)、ltr(从左到右)、rtl(从右到左)。

lang ：声明通知栏内文本所使用的语种。(译注：该属性的值必须属于BCP 47 language tag。)

tag：为通知栏分配一个ID值，便于检索、替换或移除通知栏。

icon ：设置作为通知栏icon的图片的URL

获取权限

在显示通知栏之前需向用户申请权限，只有用户允许，通知栏才可出现在屏幕中。对权限申请的处理将有以下返回值：

default：用户处理结果未知，因此浏览器将视为用户拒绝弹出通知栏。(“浏览器：你没要求通知，我就不通知你了”)

denied：用户拒绝弹出通知栏。(“用户：从我的屏幕里滚开”)

granted：用户允许弹出通知栏。(“用户：欢迎!我很高兴能够使用这个通知功能”)

JavaScript Code复制内容到剪贴板

Notification.requestPermission(function(permission){

//display notification here making use of constructor

});

用HTML创建一个按钮

XML/HTML Code复制内容到剪贴板

不要忘记了CSS

CSS Code复制内容到剪贴板

#button{

font-size:1.1rem;

width:200px;

height:60px;

border:2px solid #df7813;

border-radius:20px/50px;

background:#fff;

color:#df7813;

}

#button:hover{

background:#df7813;

color:#fff;

transition:0.4s ease;

}

全部的Javascript代码如下：

JavaScript Code复制内容到剪贴板

document.addEventListener('DOMContentLoaded',function(){

document.getElementById('button').addEventListener('click',function(){

if(! ('Notification' in window) ){

alert('Sorry bro, your browser is not good enough to display notification');

return;

}

Notification.requestPermission(function(permission){

var config = {

body:'Thanks for clicking that button. Hope you liked.',

icon:'',

dir:'auto'

};

var notification = new Notification("Here I am!",config);

});

});

});

从这段代码可以看出，如果浏览器不支持Notification

API，在点击按钮时将会出现警告“兄弟，很抱歉。你的浏览器并不能很好地支持通知功能”(Sorry bro, your browser is

not good enough to display

notification)。否则，在获得了用户的允许之后，我们自制的通知栏便可以出现在屏幕当中啦。

为什么要让用户手动关闭通知栏?

对于这个问题，我们可以借助setTimeout函数设置一个时间间隔，使通知栏能定时关闭。

JavaScript Code复制内容到剪贴板

var config = {

body:'Today too many guys got eyes on me, you did the same thing. Thanks',

icon:'icon.png',

dir:'auto'

}

var notification = new Notification("Here I am!",config);

setTimeout(function(){

notification.close(); //closes the notification

},5000);

该说的东西就这些了。如果你意犹未尽，希望更加深入地了解Notification API，可以阅读以下的页面：

MDN

Paul lund’s tutorial on notification API

在CodePen上查看demo

你可以在CodePen上看到由Prakash (@imprakash)编写的demo。