整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
.在用戶沒有與因特網(wǎng)連接時(shí)，可以正常訪問站點(diǎn)或應(yīng)用。
2.在用戶與因特網(wǎng)連接時(shí)，更新用戶機(jī)器上的緩存文件。
原理：HTML5的離線存儲是基于一個(gè)新建的.appcache文件的緩存機(jī)制(不是存儲技術(shù))，通過這個(gè)文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時(shí)，瀏覽器會通過被離線存儲的數(shù)據(jù)進(jìn)行頁面展示。
如何使用：
一、頁面頭部像下面一樣加入一個(gè)manifest的屬性；
二、在cache.manifest文件的編寫離線存儲的資源；
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html
離線存儲的manifest一般由三個(gè)部分組成:
1.CACHE:表示需要離線存儲的資源列表，由于包含manifest文件的頁面將被自動離線存儲，所以不需要把頁面自身也列出來。
2.NETWORK:表示在它下面列出來的資源只有在在線的情況下才能訪問，他們不會被離線存儲，所以在離線情況下無法使用這些資源。不過，如果在CACHE和NETWORK中有一個(gè)相同的資源，那么這個(gè)資源還是會被離線存儲，也就是說CACHE的優(yōu)先級更高。
3.FALLBACK:表示如果訪問第一個(gè)資源失敗，那么就使用第二個(gè)資源來替換他，比如上面這個(gè)文件表示的就是如果訪問根目錄下任何一個(gè)資源失敗了，那么就去訪問offline.html
三、在離線狀態(tài)時(shí)，操作window.applicationCache進(jìn)行需求實(shí)現(xiàn)。
著Web App的發(fā)展，越來越多的移動端App使用HTML5的方式來開發(fā)，除了一些HybridApp以外，其他一部分Web App還是通過瀏覽器來訪問的，通過瀏覽器訪問就需要聯(lián)網(wǎng)發(fā)送請求，這樣就使得用戶在離線的狀態(tài)下無法使用App，同時(shí)Web App中一部分資源并不是經(jīng)常改變，并不需要每次都向服務(wù)器發(fā)出請求，出于這些原因，HTML5提出的一個(gè)新的特性：離線存儲。通過離線存儲，我們可以通過把需要離線存儲在本地的文件列在一個(gè)manifest配置文件中，這樣即使在離線的情況下，用戶也可以正常使用App。
首先來講解下離線存儲的使用方法，說起來也很簡單。只要在你的頁面頭部像下面一樣加入一個(gè)manifest的屬性就可以了。
<!DOCTYPE HTML> <html manifest = "cache.manifest"> ... </html>
然后cache.manifest文件的書寫方式，就像下面這樣：
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html
離線存儲的manifest一般由三個(gè)部分組成:
1.CACHE:表示需要離線存儲的資源列表，由于包含manifest文件的頁面將被自動離線存儲，所以不需要把頁面自身也列出來。
2.NETWORK:表示在它下面列出來的資源只有在在線的情況下才能訪問，他們不會被離線存儲，所以在離線情況下無法使用這些資源。不過，如果在CACHE和NETWORK中有一個(gè)相同的資源，那么這個(gè)資源還是會被離線存儲，也就是說CACHE的優(yōu)先級更高。
3.FALLBACK:表示如果訪問第一個(gè)資源失敗，那么就使用第二個(gè)資源來替換他，比如上面這個(gè)文件表示的就是如果訪問根目錄下任何一個(gè)資源失敗了，那么就去訪問offline.html。
瀏覽器怎么解析manifest
那么瀏覽器是怎么對離線的資源進(jìn)行管理和加載的呢？這里需要分兩種情況來討論。
這個(gè)過程中有幾個(gè)問題需要注意。
對于HTML5中離線存儲對象window.applicationCache有幾個(gè)事件需要我們關(guān)注下：
1.oncached:當(dāng)離線資源存儲完成之后觸發(fā)這個(gè)事件
2.onchecking:當(dāng)瀏覽器對離線存儲資源進(jìn)行更新檢查的時(shí)候會觸發(fā)這個(gè)事件
3.ondownloading:當(dāng)瀏覽器開始下載離線資源的時(shí)候會觸發(fā)這個(gè)事件
4.onprogress:當(dāng)瀏覽器在下載每一個(gè)資源的時(shí)候會觸發(fā)這個(gè)事件，每下載一個(gè)資源就會觸發(fā)一次。
5.onupdateready:當(dāng)瀏覽器對離線資源更新完成之后會觸發(fā)這個(gè)事件
6.onnoupdate:當(dāng)瀏覽器檢查更新之后發(fā)現(xiàn)沒有資源更新的時(shí)候觸發(fā)這個(gè)事件
TML 5 是最新的超文本標(biāo)記語言 (HTML)，它是用于描述網(wǎng)頁內(nèi)容和外觀的標(biāo)準(zhǔn)編程語言。如今，所有主要瀏覽器（Chrome、Safari、Firefox、Opera 和 IE）都提供 HTML5 支持，這使其成為當(dāng)今使用的最新 HTML 技術(shù)。
下面列出了 HTML5 的一些驚人優(yōu)勢：
1. 跨瀏覽器兼容性
HTML5 易于實(shí)現(xiàn)，并且可以與 CSS3 一起使用。今天所有的瀏覽器都支持 HTML5 標(biāo)簽，甚至 IE6 也能理解標(biāo)記 <!doctype html> 并且會正確地呈現(xiàn)頁面。
2. 新的 DOCTYPE 聲明：
關(guān)于 HTML 5 最重要的事實(shí)是 - HTML5 易于實(shí)現(xiàn)并且可以與 CSS3 一起使用
HTML5 的 DOCTYPE 聲明非常簡單：
<! DOCTYPE html>
是的，只有“DOCTYPE”和“html”這兩個(gè)詞，不再有長行充滿臟標(biāo)簽的不可讀代碼。
3. 帶來可用性和用戶體驗(yàn)的改進(jìn)
可用性和用戶體驗(yàn)與網(wǎng)站或應(yīng)用程序的設(shè)計(jì)程度有關(guān)。我們都想要更好的動態(tài)網(wǎng)站和美觀的應(yīng)用程序與用戶交互并允許用戶享受功能、內(nèi)容等，而不僅僅是看它。HTML5 對 Web 具有多項(xiàng)技術(shù)增強(qiáng)和改進(jìn)功能，并且使用 HTML5 代碼，Web 開發(fā)人員可以輕松設(shè)計(jì)更好的應(yīng)用程序和動態(tài)網(wǎng)站，從而帶來更好的用戶體驗(yàn)和可用性。
4. 替代 Flash 和 Silver light
HTML5超越Flash和Silver light而領(lǐng)先只是因?yàn)椴シ?/span>Flash文件和Silver light需要安裝Adobe Flash最新版本或Silver light插件，還需要注意設(shè)備和操作系統(tǒng)的兼容性. HTML 5 并非如此。因此，HTML5 如今在公司中變得越來越流行，因?yàn)樗峁┝舜罅康膶傩院凸δ埽蓭椭?Web 開發(fā)人員以最少的工作量構(gòu)建漂亮的網(wǎng)站和應(yīng)用程序。
5. 大量用于移動應(yīng)用和游戲
HTML5 在移動應(yīng)用程序和游戲開發(fā)中的適應(yīng)性隨著 HTML5 Web 應(yīng)用程序工具在從用戶界面 (UI)、開發(fā)、使用腳本等開始的所有情況下為 Web 開發(fā)人員提供了更大的靈活性而增加。
HTML5 還能夠處理多媒體內(nèi)容，而無需安裝插件，我們可以使用該技術(shù)輕松開發(fā)交互式游戲。
6. 干凈的標(biāo)記和改進(jìn)的代碼
HTML5 帶有簡潔的標(biāo)記和簡潔的代碼，使其比以前的版本更易于訪問。HTML 5 允許 Web 開發(fā)人員和 Web 設(shè)計(jì)人員使用更簡潔的代碼并刪除 div 標(biāo)簽并將所有 div 標(biāo)簽替換為新的 HTML 5 元素。
7. 離線瀏覽
HTML5 還提供離線瀏覽功能，這意味著訪問者可以在沒有有效互聯(lián)網(wǎng)連接的情況下加載網(wǎng)頁上的某些元素。假設(shè)你訪問了該站點(diǎn)，但不知何故你現(xiàn)在沒有連接到互聯(lián)網(wǎng)，或者互聯(lián)網(wǎng)連接發(fā)生故障。使用 HTML5 離線緩存，我們?nèi)匀豢梢约虞d網(wǎng)站的核心元素，你可以離線查看它們。
8. HTML5 在網(wǎng)站抓取和索引方面對 SEO 友好：
如今，為了在包括谷歌在內(nèi)的不同搜索引擎中獲得并保持最高排名，必須小心優(yōu)化網(wǎng)站和所有必要的 SEO 模塊。HTML 5 帶有各種屬性和模塊，使網(wǎng)絡(luò)爬蟲可以輕松搜索你的內(nèi)容并使其正確編入索引，從而提高其在搜索引擎搜索結(jié)果頁面中的排名。HTML5 的技術(shù)提供了具有廣泛結(jié)構(gòu)元素、語義、表單類型、新屬性和媒體元素的各種功能，使數(shù)字營銷專家和開發(fā)人員更容易專注于更好的搜索引擎優(yōu)化技術(shù)并推動更多的自然搜索流量。
9. 視頻和音頻支持
借助 HTML5 技術(shù)，我們不再需要依賴第三方插件來渲染音頻和視頻。你可以忘記 Flash Player 和其他第三方媒體播放器和插件。你可以使用新的 HTML5 <video> 和 <audio> 標(biāo)簽輕松訪問你的視頻和音頻。
以前你必須使用舊的 <embed> 和 <object> 標(biāo)簽并分配大量參數(shù)，以顯示視頻可見并正常工作。但是使用 HTML5 的視頻和音頻標(biāo)簽，我們可以將它們視為圖像； <video src=”url”/>。
我們只需要像任何其他 HTML 元素一樣在單行標(biāo)簽中定義高度、寬度和自動播放等參數(shù)：<video src=”url” width=”800px” height=”500px”autoplay/>。
10. 地理位置支持
在地理定位的幫助下，我們可以輕松地找出我們在世界上的位置，并輕松地與人們分享這些信息。過去，如果我們想首先檢測客戶端設(shè)備的位置，我們必須查看客戶端 IP 地址、你的無線網(wǎng)絡(luò)連接、手機(jī)的基站和緯度和經(jīng)度。但是對于 HTML5，已經(jīng)開發(fā)了一組 API，它們可以有效地允許客戶端設(shè)備（即你的手機(jī)、IP 甚至你的桌面瀏覽器）使用你的 HTML5 兼容瀏覽器直接可用的 JavaScript 檢索地理定位信息。
HTML5 改進(jìn)并增強(qiáng)了瀏覽體驗(yàn)。那么為什么不為你的網(wǎng)站和移動應(yīng)用程序采用 HTML 5 呢？
了解更多
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
