如何使用下面的HTML5功能創(chuàng)建離線的網(wǎng)頁(yè)和應(yīng)用程序

在這篇文章中，我們將展示如何創(chuàng)建乖巧離線的網(wǎng)頁(yè)和應(yīng)用程序使用下面的HTML5功能：

目前成都創(chuàng)新互聯(lián)已為上1000家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)頁(yè)空間、綿陽(yáng)服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計(jì)、三亞網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。

AppCache本地存儲(chǔ)文件資源，離線訪問(wèn)它們作為URL

索引型數(shù)據(jù)庫(kù)存儲(chǔ)結(jié)構(gòu)化數(shù)據(jù)在本地，你可以訪問(wèn)和查詢它

DOM存儲(chǔ)在本地存儲(chǔ)少量的文字信息，

離線事件來(lái)檢測(cè)，如果你€ 重新連接到網(wǎng)絡(luò)

例：隨時(shí)隨地訪問(wèn)數(shù)據(jù)的離線支持

讓我們€?的說(shuō)，你去購(gòu)物，從您?最喜愛(ài)的食品網(wǎng)站?的配方的打印輸出，但是當(dāng)你€?重新在市場(chǎng)上，你塔卡納€?噸找到一些關(guān)鍵的成分。

試想一下，當(dāng)你在家中使用移動(dòng)PC瀏覽?食譜網(wǎng)站?，部分網(wǎng)站會(huì)自動(dòng)下載離線使用。這可以讓你把你的手機(jī)PC到店，訪問(wèn)該網(wǎng)站，并在市場(chǎng)尋找一個(gè)新的配方。?最好的部分?是，你可以做到這一點(diǎn)，?而??被連接到網(wǎng)絡(luò)。作為一個(gè)消費(fèi)者，您的網(wǎng)站感激，因?yàn)樗皇枪ぷ鲿r(shí)，你需要它。

離線的'蛋糕'這個(gè)詞使用的食譜網(wǎng)站的搜索結(jié)果。

作為一個(gè)開發(fā)者，你可以使這些類型的場(chǎng)景相結(jié)合的離線技術(shù)：?AppCache?，索引型數(shù)據(jù)庫(kù)?，?DOM存儲(chǔ)?，?WebSockets的?（或?XHR?）。?在探索個(gè)人的技術(shù)，讓我們的探討的好處。

Metro風(fēng)格的應(yīng)用程序和網(wǎng)站，離線技術(shù)讓你來(lái)處理連接故障。想象一下，您的用戶填寫一個(gè)表格，他失去網(wǎng)絡(luò)連接。您的網(wǎng)站或Metro風(fēng)格的應(yīng)用程序應(yīng)該怎么做呢？連接自由發(fā)展的心態(tài)可以讓您的應(yīng)用程序是否連接到網(wǎng)絡(luò)或不正確地獨(dú)立工作。你的應(yīng)用程序?qū)⒄９ぷ鳌?/p>

在更復(fù)雜的情況下，Web站點(diǎn)和應(yīng)用程序允許用戶創(chuàng)建新的內(nèi)容，并存儲(chǔ)新的數(shù)據(jù)，即使應(yīng)用程序是完全脫機(jī)。試想一下，無(wú)縫地工作在脫機(jī)狀態(tài)下，如Outlook今天的Outlook Web Access（OWA）的Hotmail或GMail。

離線技術(shù)也可以通過(guò)本地緩存的資源服務(wù)，預(yù)緩存將來(lái)信息和轉(zhuǎn)移從云（或網(wǎng)絡(luò)）到客戶端設(shè)備的處理能力，提高整體性能。信息越多，你€?重新能夠緩存在本地，在本地搜索，并計(jì)算在本地服務(wù)器和用戶的體驗(yàn)將更快，需要更少的資源熱轉(zhuǎn)印機(jī)?。

有一個(gè)Metro風(fēng)格的應(yīng)用程序離線工作的期望高于網(wǎng)站的脫機(jī)工作。因?yàn)樗麄兪褂脧纳痰甑淖晕野某绦虬渴?，用戶希望他們有某種類型的離線功能（如游戲，書籍，食譜等）。即使這些應(yīng)用程序是無(wú)法創(chuàng)建或訪問(wèn)新的內(nèi)容，以前的內(nèi)容應(yīng)該是可見(jiàn)的（例如聯(lián)系人，會(huì)議，飼料，雜志等）。

本地緩存文件資源使用AppCache

AppCache使您能夠創(chuàng)建長(zhǎng)壽命的本地緩存下載的文件資源，資源可以訪問(wèn)而離線或使用的同時(shí)在線，以提高性能。試想一下，一個(gè)三歲的孩子使用一臺(tái)筆記本電腦，下載一個(gè)交互式的Web的游戲（KidsBook）從您的家庭網(wǎng)絡(luò)。如果應(yīng)用程序的資源存儲(chǔ)在本地，孩子可以繼續(xù)在車上玩游戲，那里沒(méi)有網(wǎng)絡(luò)連接。

如果KidsBook使用AppCache，本場(chǎng)比賽將有緩存必要的資源（的JavaScript，HTML，CSS，音頻，視頻等）時(shí)，先下載后從網(wǎng)絡(luò)上斷開時(shí)，播放的游戲。這可以讓孩子保持愉悅，即使設(shè)備本身沒(méi)有網(wǎng)絡(luò)連接。

AppCache創(chuàng)作流程。

要看到如何啟用互動(dòng)網(wǎng)頁(yè)游戲脫機(jī)工作，檢查出?KidsBook的?IE Test Drive網(wǎng)站?上的例子。

AppCache使用一個(gè)manifest文件，以緩存的內(nèi)容從網(wǎng)站上指定資源的URI。幕后發(fā)生后，瀏覽器顯示網(wǎng)頁(yè)，它允許在清單文件中定義的資源被下載的緩存。這保證了資源下載到本地機(jī)器上，作為一個(gè)單位在一個(gè)事務(wù)中，創(chuàng)建一個(gè)本地的緩存。如果一個(gè)單一的資源下載失敗，沒(méi)有創(chuàng)建高速緩存。要更新存儲(chǔ)在緩存中的內(nèi)容，在您的服務(wù)器更新清單文件。當(dāng)用戶下次訪問(wèn)該網(wǎng)站時(shí)，瀏覽器比較明顯的服務(wù)器上的文件的緩存副本。如果緩存的艙單副本是不同的服務(wù)器副本，新版本更新清單文件中定義的內(nèi)容高速緩存的使用。

AppCache還允許Internet Explorer和Metro風(fēng)格的應(yīng)用程序在脫機(jī)狀態(tài)下使用傳統(tǒng)的URL的訪問(wèn)緩存的資源。這可以讓你在瀏覽器窗口中鍵入一個(gè)URL，并沒(méi)有任何網(wǎng)絡(luò)連接的情況下訪問(wèn)此信息。此外，脫機(jī)頁(yè)可以解決的URI使用本地緩存的信息。代碼示例來(lái)看看在?HTML5應(yīng)用程序緩存（“?AppCachea）?部分中的?IE10開發(fā)人員指南?。

總體而言，AppCache提供了一定的優(yōu)勢(shì)HTTP的緩存。HTTP緩存沒(méi)有噸保證緩存的資源之后將TIF（臨時(shí)Internet文件）將被清除。此外，HTTP緩存沒(méi)有€?噸正確地解決在脫機(jī)狀態(tài)下的URL。然而，HTTP緩存可用于優(yōu)化AppCache的行為，通過(guò)指定的緩存資源的生命周期。如果從網(wǎng)站上下載或復(fù)制的資源從緩存的本地高速緩存中創(chuàng)建一個(gè)新的版本時(shí)，這將決定。

Metro風(fēng)格的應(yīng)用可以受益于AppCache通過(guò)在本地緩存的Web資源的訪問(wèn)的頁(yè)框，它允許脫機(jī)訪問(wèn)的內(nèi)容。

高速緩存大型本地使用索引型數(shù)據(jù)庫(kù)的結(jié)構(gòu)化數(shù)據(jù)

索引型數(shù)據(jù)庫(kù)?是一個(gè)本地JavaScript對(duì)象存儲(chǔ)在本地機(jī)器上的數(shù)據(jù)庫(kù)，允許快速索引和搜索的對(duì)象。前面介紹的?食譜網(wǎng)站，?包括16食譜從父站點(diǎn)中提取的數(shù)據(jù)庫(kù)。想象一下，用一個(gè)RSS feed，一個(gè)WebSocket或XHR連接的，定期更新這個(gè)數(shù)據(jù)庫(kù)。這將使您的用戶能夠訪問(wèn)到最新的食譜，即使他們有沒(méi)有網(wǎng)絡(luò)連接。

索引型數(shù)據(jù)庫(kù)，您可以直接操作和索引的JavaScript對(duì)象。使用索引型數(shù)據(jù)庫(kù)搜索本地信息的優(yōu)點(diǎn)是它不會(huì)強(qiáng)迫你總是在云中搜索，降低了計(jì)算成本。這是假設(shè)你€?重新能夠維持，是緩存在本地系統(tǒng)中的數(shù)據(jù)的相關(guān)性。

Html5會(huì)帶來(lái)怎樣的體驗(yàn)？

在以下領(lǐng)域有突出的體驗(yàn)：

1、語(yǔ)義特性（Class：Semantic）

HTML5賦予網(wǎng)頁(yè)更好的意義和結(jié)構(gòu)。更加豐富的標(biāo)簽將隨著對(duì)RDFa的，微數(shù)據(jù)與微格式等方面的支持，構(gòu)建對(duì)程序、對(duì)用戶都更有價(jià)值的數(shù)據(jù)驅(qū)動(dòng)的Web。

2、本地存儲(chǔ)特性（Class: OFFLINE STORAGE）

基于HTML5開發(fā)的網(wǎng)頁(yè)APP擁有更短的啟動(dòng)時(shí)間，更快的聯(lián)網(wǎng)速度，這些全得益于HTML5 APP Cache，以及本地存儲(chǔ)功能。Indexed DB（html5本地存儲(chǔ)最重要的技術(shù)之一）和API說(shuō)明文檔。

3、設(shè)備兼容特性 (Class: DEVICE ACCESS)

從Geolocation功能的API文檔公開以來(lái)，HTML5為網(wǎng)頁(yè)應(yīng)用開發(fā)者們提供了更多功能上的優(yōu)化選擇，帶來(lái)了更多體驗(yàn)功能的優(yōu)勢(shì)。HTML5提供了前所未有的數(shù)據(jù)與應(yīng)用接入開放接口。使外部應(yīng)用可以直接與瀏覽器內(nèi)部的數(shù)據(jù)直接相連，例如視頻影音可直接與microphones及攝像頭相聯(lián)。

4、連接特性（Class: CONNECTIVITY）

更有效的連接工作效率，使得基于頁(yè)面的實(shí)時(shí)聊天，更快速的網(wǎng)頁(yè)游戲體驗(yàn)，更優(yōu)化的在線交流得到了實(shí)現(xiàn)。HTML5擁有更有效的服務(wù)器推送技術(shù)，Server-Sent Event和WebSockets就是其中的兩個(gè)特性，這兩個(gè)特性能夠幫助我們實(shí)現(xiàn)服務(wù)器將數(shù)據(jù)“推送”到客戶端的功能。

5、網(wǎng)頁(yè)多媒體特性(Class: MULTIMEDIA)

支持網(wǎng)頁(yè)端的Audio、Video等多媒體功能， 與網(wǎng)站自帶的APPS，攝像頭，影音功能相得益彰。

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

基于SVG、Canvas、WebGL及CSS3的3D功能，用戶會(huì)驚嘆于在瀏覽器中，所呈現(xiàn)的驚人視覺(jué)效果。

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

沒(méi)有用戶會(huì)永遠(yuǎn)等待你的Loading——HTML5會(huì)通過(guò)XMLHttpRequest2等技術(shù)，解決以前的跨域等問(wèn)題，幫助您的Web應(yīng)用和網(wǎng)站在多樣化的環(huán)境中更快速的工作。

8、CSS3特性(Class: CSS3)

在不犧牲性能和語(yǔ)義結(jié)構(gòu)的前提下，CSS3中提供了更多的風(fēng)格和更強(qiáng)的效果。此外，較之以前的Web排版，Web的開放字體格式（WOFF）也提供了更高的靈活性和控制性。

手機(jī)html5前端開發(fā)用什么框架

jquery mobile和bootstrap都是較好的框架。為了使用便利，下文列舉了目前最強(qiáng)大應(yīng)用最廣泛的幾款前端開發(fā)框架。

1. Bootstrap

Boostrap絕對(duì)是目前最流行用得最廣泛的一款框架。它是一套優(yōu)美，直觀并且給力的web設(shè)計(jì)工具包，可以用來(lái)開發(fā)跨瀏覽器兼容并且美觀大氣的頁(yè)面。它提供了很多流行的樣式簡(jiǎn)潔的UI組件，柵格系統(tǒng)以及一些常用的JavaScript插件。

2. Fbootstrapp

Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和設(shè)計(jì)相同的功能。包含用于所有標(biāo)準(zhǔn)組件的基本的CSS和HTML，包括排版、表單、按鈕、表格、柵格、導(dǎo)航等等，風(fēng)格與Facebook類似。

3. BootMetro

BootMetro框架的靈感來(lái)自于Metro UI CSS，基于Bootstrap 框架構(gòu)建，用于創(chuàng)建Windows 8 的Metro風(fēng)格的網(wǎng)站。它包括所有Bootstrap的功能，并添加了幾個(gè)額外的功能，比如頁(yè)面平鋪，應(yīng)用程序欄等等。

4. Kickstrap

Kickstrap是Bootstrap的一個(gè)變體。它基于Bootstrap，并在它的基礎(chǔ)上添加了許多app，主題以及附加功能。這使得這個(gè)框架可以單獨(dú)地用于構(gòu)建網(wǎng)站，而不需要額外安裝什么。你需要做的僅僅是把它放到你的網(wǎng)站上，然后用就可以了。

5. Foundation

Foundation 是一款強(qiáng)大的，功能豐富的并且支持響應(yīng)式布局的前端開發(fā)框架，你可以通過(guò)Foundation快速創(chuàng)建原型，利用它所包含的大量布局框架，元素以及最優(yōu)范例快速創(chuàng)建在各種設(shè)備上可以正常運(yùn)行的網(wǎng)站以及app。Foundation在構(gòu)建的時(shí)候秉承移動(dòng)優(yōu)先的策略，它擁有大量實(shí)用的語(yǔ)義化功能，并且使用Zepto類庫(kù)來(lái)取代jQuery，這樣可以帶來(lái)更好的用戶體驗(yàn)，并且提高運(yùn)行的速度。

6. GroundworkCSS

GroundworkCSS 是前端框架家族里面新添的一款小清新框架。它是基于Sass和Compass的一個(gè)高級(jí)響應(yīng)式的HTML5，CSS以及JavaScript工具包，可以用于快速創(chuàng)建原型并且建立在各種瀏覽設(shè)備上可以正常工作的網(wǎng)站和app。

7. Gumby

Gumby 是一款基于Sass和Compass的簡(jiǎn)單靈活并且穩(wěn)定的前端開發(fā)框架。

它的流式-固定布局（fluid-fixed layout）可以根據(jù)桌面端以及移動(dòng)設(shè)備的分辨率自動(dòng)優(yōu)化要呈現(xiàn)的網(wǎng)頁(yè)內(nèi)容。它支持多種網(wǎng)格布局，包括多列混雜的嵌套模式。Gumby提供兩套PSD的模板，方便你在12列和16列的網(wǎng)格系統(tǒng)上進(jìn)行設(shè)計(jì)。

8. HTML KickStart

HTML Kickstart 是一款可以用來(lái)方便創(chuàng)建任何布局的集合HTML5，CSS和jQuery的工具包。它提供了干凈，符合標(biāo)準(zhǔn)以及跨瀏覽器兼容的代碼。

9. IVORY

IVORY 是一款輕量，簡(jiǎn)單但是強(qiáng)大的前端框架，可以用于320到1200像素寬度的響應(yīng)式布局。它基于12列的響應(yīng)式網(wǎng)格布局，包含表格，按鈕，表格，分頁(yè)，撥動(dòng)開關(guān)，工具提示，手風(fēng)琴，選項(xiàng)卡等網(wǎng)站中常用的組件和樣式。

10.Kube

最后，如果你的新項(xiàng)目需要一款實(shí)在的，不需要復(fù)雜的額外功能組件的，足夠簡(jiǎn)單的框架，那么 Kube 將會(huì)是你正確的選擇。Kube是一款最小化的，支持響應(yīng)式的前端框架，它沒(méi)有強(qiáng)加的樣式設(shè)計(jì)，因此給了你充分的自由來(lái)開發(fā)自己的樣式表。它提供了一些web元素的基本樣式，比如網(wǎng)格，表單，排版，表格，按鈕，導(dǎo)航，鏈接以及圖片等等。

Windows 8 Metro應(yīng)用開發(fā)選擇HTML5+CSS還是c#？

都可以

C#適合高性能本地應(yīng)用，但是上手難，調(diào)試什么的，開發(fā)周期會(huì)比較長(zhǎng)

html5+Css會(huì)比較好上手，開發(fā)周期會(huì)比較短，不過(guò)開發(fā)的應(yīng)用以網(wǎng)絡(luò)內(nèi)容消費(fèi)為主，（類似微薄客戶端，Rss閱讀器，還有一些簡(jiǎn)單游戲）

不過(guò)總的說(shuō)來(lái)學(xué)C#會(huì)好很多

如何使用 HTML5 的 Notification API

在使用網(wǎng)頁(yè)版Gmail的時(shí)候，每當(dāng)收到新郵件，屏幕的右下方都會(huì)彈出相應(yīng)的提示框。借助HTML5提供的Notification API，我們也可以輕松實(shí)現(xiàn)這樣的功能。

確保瀏覽器支持

如果你在特定版本的瀏覽器上進(jìn)行開發(fā)，那么我建議你先到 caniuse 查看瀏覽器對(duì)Notification API的支持情況，避免你將寶貴時(shí)間浪費(fèi)在了一個(gè)無(wú)法使用的API上。

如何開始

JavaScript Code復(fù)制內(nèi)容到剪貼板

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

body:'Your Message'

});

上面的代碼構(gòu)造了一個(gè)簡(jiǎn)陋的通知欄。構(gòu)造函數(shù)的第一個(gè)參數(shù)設(shè)定了通知欄的標(biāo)題，而第二個(gè)參數(shù)則是一個(gè)option 對(duì)象，該對(duì)象可設(shè)置以下屬性：

body ：設(shè)置通知欄的正文內(nèi)容。

dir ：定義通知欄文本的顯示方向，可設(shè)為auto(自動(dòng))、ltr(從左到右)、rtl(從右到左)。

lang ：聲明通知欄內(nèi)文本所使用的語(yǔ)種。(譯注：該屬性的值必須屬于BCP 47 language tag。)

tag：為通知欄分配一個(gè)ID值，便于檢索、替換或移除通知欄。

icon ：設(shè)置作為通知欄icon的圖片的URL

獲取權(quán)限

在顯示通知欄之前需向用戶申請(qǐng)權(quán)限，只有用戶允許，通知欄才可出現(xiàn)在屏幕中。對(duì)權(quán)限申請(qǐng)的處理將有以下返回值：

default：用戶處理結(jié)果未知，因此瀏覽器將視為用戶拒絕彈出通知欄。(“瀏覽器：你沒(méi)要求通知，我就不通知你了”)

denied：用戶拒絕彈出通知欄。(“用戶：從我的屏幕里滾開”)

granted：用戶允許彈出通知欄。(“用戶：歡迎!我很高興能夠使用這個(gè)通知功能”)

JavaScript Code復(fù)制內(nèi)容到剪貼板

Notification.requestPermission(function(permission){

//display notification here making use of constructor

});

用HTML創(chuàng)建一個(gè)按鈕

XML/HTML Code復(fù)制內(nèi)容到剪貼板

不要忘記了CSS

CSS Code復(fù)制內(nèi)容到剪貼板

#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復(fù)制內(nèi)容到剪貼板

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，在點(diǎn)擊按鈕時(shí)將會(huì)出現(xiàn)警告“兄弟，很抱歉。你的瀏覽器并不能很好地支持通知功能”(Sorry bro, your browser is

not good enough to display

notification)。否則，在獲得了用戶的允許之后，我們自制的通知欄便可以出現(xiàn)在屏幕當(dāng)中啦。

為什么要讓用戶手動(dòng)關(guān)閉通知欄?

對(duì)于這個(gè)問(wèn)題，我們可以借助setTimeout函數(shù)設(shè)置一個(gè)時(shí)間間隔，使通知欄能定時(shí)關(guān)閉。

JavaScript Code復(fù)制內(nèi)容到剪貼板

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);

該說(shuō)的東西就這些了。如果你意猶未盡，希望更加深入地了解Notification API，可以閱讀以下的頁(yè)面：

MDN

Paul lund’s tutorial on notification API

在CodePen上查看demo

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

文章題目：html5metro的簡(jiǎn)單介紹
文章分享：http://sd-ha.com/article24/phhice.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、做網(wǎng)站、網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)公司、云服務(wù)器、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)