html5的離線web應(yīng)用的瀏覽器和服務(wù)器交互的過程要是沒有緩存怎么辦

html5的離線web應(yīng)用的瀏覽器和服務(wù)器交互的過程要是沒有緩存就需要每次交互都要實時接口調(diào)用，增加網(wǎng)絡(luò)開銷。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名申請、雅安服務(wù)器托管、營銷軟件、網(wǎng)站建設(shè)、集安網(wǎng)站維護、網(wǎng)站推廣。

一、離線存儲的作用

1、用戶可離線訪問應(yīng)用，這對于無法隨時保持聯(lián)網(wǎng)狀態(tài)的移動終端用戶來說尤其重要

2、用戶訪問本地的緩存文件，通常意味著更快的訪問速度

3、僅僅加載被修改過的資源，避免同一資源對服務(wù)器多次的請求，大大降低了對服務(wù)器的訪問壓力

二、實現(xiàn)離線存儲

1、在html標簽里通過manifest屬性引用一個cache.manifest文件，該文件里聲明了瀏覽器需緩存的所有資源文件，如下所示：

!DOCTYPE html

html lang='cn' manifest='cache.manifest'

head

meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

title離線緩存示例頁面/title

!-- CSS文件引用 --

/head

body

!-- 各種標簽 --

/body

!-- 各種腳本文件 --

/html

2、關(guān)于cache.manifest的定義

CACHE MANIFEST

# 注釋：需要緩存的文件，無論在線與否，均從緩存里讀取

chched.js

cached.css

# 注釋：不緩存的文件，無論緩存中存在與否，均從新獲取

NETWORK:

uncached.js

uncached.css

# 注釋：獲取不到資源時的備選路徑，如index.html訪問失敗，則返回404頁面

FALLBACK:

index.html 404.html

html5本地存儲和離線應(yīng)用有什么區(qū)別？

本地存儲-談到存儲，一般說的是數(shù)據(jù)data，不管這個應(yīng)用是在線還是離線。

離線應(yīng)用-這個對應(yīng)的是在線，也就是，沒有網(wǎng)的情況下，也可以使用。

后者需要把代碼、程序以及資源都放到本地，如果想要使用數(shù)據(jù)，則利用本地存儲。

HTML5的離線儲存怎么使用，以及工作原理

原理：HTML5的離線存儲是基于一個新建的.appcache文件的，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示。

方法：

1.在index.html里加上html manifest="test.manifest"

2.manifest清單格式如下：

CACHE MANIFEST

#上面一句必須

#v1.0.0

#需要緩存的文件

CACHE:

a.js

b.css

#不需要緩存的文件

NETWORK:

*

#無法訪問頁面

FALLBACK:

404.html

3.manifest文件的mime-type必須是 text/cache-manifest類型。

html5新增了離線緩存機制這說法對嗎

這個不算是 新增吧。

隨著現(xiàn)代瀏覽器的推動，F(xiàn)lash放棄對移動端的支持，HTML5無疑成為當前Web前端炙手可熱的話題。各大游戲開發(fā)商、App開發(fā)商紛紛投入人力進行研究和技術(shù)儲備。相信不久的將來，HTML5會迎來一個快速發(fā)展和普及的春天。那么，HTML5這個新一代的標準，又給我們帶來哪些緩存機制呢？

HTML5 之離線應(yīng)用Manifest

我們知道，使用傳統(tǒng)的技術(shù)，就算是對站點的資源都實施了比較好的緩存策略，但是在斷網(wǎng)的情況下，是無法訪問的，因為入口的HTML頁面我們一般運維的考慮，不會對其進行緩存。HTML5的Cache Mainifest離線應(yīng)用特性就能夠幫助我們構(gòu)建離線也能使用的站點，所有的資源都使用瀏覽器本地緩存，當然前提是要求在聯(lián)網(wǎng)的情形下使用過一次站點。

如何實現(xiàn)離線訪問特性

實現(xiàn)的步驟非常簡單，主要3個步驟：

1）在服務(wù)器上添加MIME TYPE支，讓服務(wù)器能夠識別manifest后綴的文件

AddType text/cache-manifest manifest

2）創(chuàng)建一個后綴名為.manifest的文件，把需要緩存的文件按格式寫在里面，并用注釋行標注版本

CACHE MANIFEST

# 直接緩存的文件

CACHE:

Path/to/cache.js

# version：2012-03-20

3）給 html 標簽加 manifest 屬性，并引用manifest文件

具體可以參考：HTML5 緩存: cache manifest

html manifest=”path/to/name-of.manifest”

離線應(yīng)用訪問及更新流程

第一次訪問離線應(yīng)用的入口頁HTML（引用了manifest文件），正常發(fā)送請求，獲取manifest文件并在本地緩存，陸續(xù)拉取manifest中的需要緩存的文件

再次訪問時，無法在線離線與否，都會直接從緩存中獲取入口頁HTML和其他緩存的文件進行展示。如果此時在線，瀏覽器會發(fā)送請求到服務(wù)器請求manifest文件，并與第一次訪問的副本進行比對，如果發(fā)現(xiàn)版本不一致，會陸續(xù)發(fā)送請求重新拉取入口文件HTML和需要緩存的文件并更新本地緩存副本

之后的訪問重復(fù)第2步的行為

離線機制的緩存用途

從Manifest的機制來看，即使我們不是為了創(chuàng)建離線應(yīng)用，也同樣可以使用這種機制用于緩存文件，可以說是給Web緩存提供多一種可以選擇的途徑。

存在的問題：緩存文件更新控制不靈活

就目前HTML5提供的manifest機制來講，一個頁面只能引用一個manifest頁面，而且一旦發(fā)現(xiàn)這個manifest改變了，就會把里面所有定義的緩存文件全部重新拉取一遍，不管實際上有沒有更新，控制比較不靈活。針對這個問題，也有的同學(xué)提出了一些建議，比如把需要緩存的文件分模塊切分到不同manifest中，并分開用HTML引用，再使用強大的iframe嵌入到入口頁面，這樣就當某一個模式需要有更新，不會導(dǎo)致其他模塊的文件也重新拉取一遍。

HTML5 之本地存儲localstorage

HTML5給我們提供本地存儲localstorage特性，嚴格來講，其實已經(jīng)不算傳統(tǒng)Web緩存的范疇。因為它存儲的地方是跟Web緩存分開的，是瀏覽器重新開辟的一個地方。

localstorage的作用

本地存儲localstorage的作用主要使Web頁面能夠通過瀏覽器提供的set/get接口，存儲一些自定義的信息到本地硬盤，并且在單次訪問或以后的訪問過程中隨時獲取或修改。

Localstorage的使用

Localstorage提供了幾個非常易用的Api，setItem/getItem/removeItem/clear，具體的可以參考：Html5 Step by Step(二) 本地存儲

Localstorage的緩存用途

Localstorage設(shè)計的本意可能是用來存儲一些用戶操作的個性化設(shè)置的文本類型的信息和數(shù)據(jù)，當我們其實也可能拿來當Web緩存區(qū)使用，比如我們可以將Base64格式編碼的圖片信息，存在localstorage中，再次訪問時，直接本地獲取后，使用Css3的Data:image的方式直接展現(xiàn)出來。

存在的問題：大小限制

按照目前標準，目前瀏覽器只給每個獨立的域名提供5m的存儲空間，當存儲超過5m，瀏覽器就會彈出警告框。

可以說，HTML5的Manifest和localstorage是給我們在考慮Web緩存的時候提供了多一種思路，當你開發(fā)的應(yīng)用只面對現(xiàn)代瀏覽器的時候，不妨可以考慮一下

android中怎么使用html5離線功能

1、在布局文件中聲明WebView

2、在Activity中實例化WebView

3、調(diào)用WebView的loadUrl( )方法，設(shè)置WevView要顯示的網(wǎng)頁

4、為了讓W(xué)ebView能夠響應(yīng)超鏈接功能，調(diào)用setWebViewClient( )方法，設(shè)置 WebView視圖

5、用WebView點鏈接看了很多頁以后為了讓W(xué)ebView支持回退功能，需要覆蓋覆蓋Activity類的onKeyDown()方法，如果不做任何處理，點擊系統(tǒng)回退剪鍵，整個瀏覽器會調(diào)用finish()而結(jié)束自身，而不是回退到上一頁面

6、需要在AndroidManifest.xml文件中添加權(quán)限，否則出現(xiàn)Web page not available錯誤。

uses-permission android:name="android.permission.INTERNET"/

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

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

AppCache本地存儲文件資源，離線訪問它們作為URL

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

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

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

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

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

試想一下，當你在家中使用移動PC瀏覽?食譜網(wǎng)站?，部分網(wǎng)站會自動下載離線使用。這可以讓你把你的手機PC到店，訪問該網(wǎng)站，并在市場尋找一個新的配方。?最好的部分?是，你可以做到這一點，?而??被連接到網(wǎng)絡(luò)。作為一個消費者，您的網(wǎng)站感激，因為它只是工作時，你需要它。

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

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

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

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

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

有一個Metro風(fēng)格的應(yīng)用程序離線工作的期望高于網(wǎng)站的脫機工作。因為他們使用從商店的自我包含的程序包部署，用戶希望他們有某種類型的離線功能（如游戲，書籍，食譜等）。即使這些應(yīng)用程序是無法創(chuàng)建或訪問新的內(nèi)容，以前的內(nèi)容應(yīng)該是可見的（例如聯(lián)系人，會議，飼料，雜志等）。

本地緩存文件資源使用AppCache

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

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

AppCache創(chuàng)作流程。

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

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

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

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

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

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

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

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

本文名稱：html5的離線應(yīng)用,html文件能離線打開
本文URL：http://chinadenli.net/article17/dsihpdj.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站收錄、虛擬主機、App設(shè)計、企業(yè)建站、商城網(wǎng)站

廣告

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