溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

html5支不支持離線應(yīng)用

發(fā)布時間：2022-08-02 09:33:52 來源：億速云 閱讀：96 作者：iii 欄目：web開發(fā)

本篇內(nèi)容介紹了“html5支不支持離線應(yīng)用”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

html5支持離線應(yīng)用。離線應(yīng)用是html5新增的特性，利用本地緩存機(jī)制，使得用戶可以在網(wǎng)頁或應(yīng)用在沒有網(wǎng)絡(luò)的情況下依然可以使用。為了能夠讓W(xué)eb應(yīng)用程序在離線狀態(tài)的時候也能正常工作，必須把所有構(gòu)成Web應(yīng)用程序的資源文件，諸如HTML文件，CSS文件，JavaScript腳本文件放在本地緩存中，這樣當(dāng)服務(wù)器沒有和網(wǎng)絡(luò)連接時，也可以利用本地緩存中的資源文件來正常運(yùn)行應(yīng)用程序。

本教程操作環(huán)境：windows7系統(tǒng)、HTML5版、Dell G3電腦。

HTML5新增了離線應(yīng)用，利用本地緩存機(jī)制，離線應(yīng)用使得我們可以在網(wǎng)頁或應(yīng)用在沒有網(wǎng)絡(luò)的情況下依然可以使用。當(dāng)客戶端本地與web應(yīng)用程序的服務(wù)器沒有建立連接時，也能正常在客戶端本地使用該web應(yīng)用程序進(jìn)行有關(guān)操作。

為了能夠讓W(xué)eb應(yīng)用程序在離線狀態(tài)的時候也能正常工作，必須把所有構(gòu)成Web應(yīng)用程序的資源文件，諸如HTML文件，CSS文件，JavaScript腳本文件放在本地緩存中，當(dāng)服務(wù)器沒有和網(wǎng)絡(luò)連接時，也可以利用本地緩存中的資源文件來正常運(yùn)行Web應(yīng)用程序。

離線應(yīng)用的使用需要以下幾個步驟：

  • 離線檢測（確定是否聯(lián)網(wǎng)）

  • 訪問一定的資源

  • 有一塊本地空間用于保存數(shù)據(jù)（無論是否上網(wǎng)都不妨礙讀寫）

使用HTML5離線web應(yīng)用

1、檢查瀏覽器的支持情況的方法

  if(window.applicationCache){
        //瀏覽器支持離線應(yīng)用
  }

2、關(guān)于描述文件
描述文件用來列出需要緩存和不需要緩存的資源，以備離線時使用。
描述文件的擴(kuò)展名以前用.manifest，現(xiàn)在推薦使用.appcache，并且描述文件需要配置正確的MIME-type，即"text/cache-manifest"，必須在web服務(wù)器上進(jìn)行配置（文件編碼必須是UTF-8）。不同的服務(wù)器有不同的配置方法，具體這里不詳述。

首行必須以以下字符串開始

    CACHE MANIFEST

剩下的就是要緩存的文件的URL，一行一個（相對URL是相對于清單文件而言的，不是相對于文件）

    #以“#”開頭的是注釋
    common.css
    common.js

這樣這個文件中列舉的所有的文件都會被緩存

在清單中，可以使用特殊的區(qū)域頭來標(biāo)識頭信息之后的清單項(xiàng)的類型，上面的最簡單的緩存屬于"CACHE:"區(qū)域。
像這樣

    #該頭信息之后的內(nèi)容需要緩存    CACHE:
    common.css
    connom.js

以"NETWORK:"開頭的區(qū)域列舉的文件，總是從線上獲取，不緩存

NETWORK:頭信息支持通配符"*",表示任何未明確列舉的資源，都將通過網(wǎng)絡(luò)加載

    #該頭信息之后的內(nèi)容不需要緩存，總是從線上獲取
    NETWORK:
    a.css
    #表示以name開頭的資源都不要緩存
    name/

以"FALLBACK:"開頭的區(qū)域中的內(nèi)容，提供了獲取不到緩存資源時的備選資源路徑
該區(qū)域中的內(nèi)容，每一行包含兩個URL（第一個URL是一個前綴，任何匹配的資源都不被緩存，第二個URL表示需要被緩存的資源）

    FALLBACK:
    name/  example.html

一個清單可以有任意多個區(qū)域，且位置沒有限制。

3、搭建離線應(yīng)用程序
假設(shè)我們要構(gòu)建一個包含css，js，html的單頁應(yīng)用，同時要為這個單頁應(yīng)用添加離線支持。

要將描述文件與頁面關(guān)聯(lián)起來，需要使用html標(biāo)簽的manifest特性指定描述文件的路徑

    <html manifest='./offline.appcche'>

開發(fā)離線應(yīng)用的第一步就是檢測設(shè)備是否離線

  • HTML5新增了navigator.onLine屬性
    當(dāng)該屬性為true的時候表示聯(lián)網(wǎng)，值為false的時候，表示離線

  if(navigator.onLine){      //聯(lián)網(wǎng)  }else{      //離線  }

** 注：IE6及以上瀏覽器及其他標(biāo)準(zhǔn)瀏覽器都支持這個屬性 **

  • online事件（IE9+瀏覽器支持）

當(dāng)網(wǎng)絡(luò)從離線變?yōu)樵诰€的時候觸發(fā)該事件，在window上觸發(fā)該事件，不需要刷新

 window.online = function(){        //需要觸發(fā)的事件    }

  • offline事件（IE9+瀏覽器支持）
    當(dāng)網(wǎng)絡(luò)從在線變?yōu)殡x線的時候觸發(fā)該事件，和online事件一樣，在window上觸發(fā)該事件，不需要刷新

window.offline = function(){      //需要觸發(fā)的事件  }

應(yīng)用緩存

應(yīng)用緩存（Application Cache）是從瀏覽器的緩存中分出來的一塊緩存區(qū)（大小根據(jù)具體瀏覽器而定，一般是5M）

應(yīng)用緩存和網(wǎng)頁緩存的區(qū)別：

  • 應(yīng)用緩存為整個web應(yīng)用程序服務(wù)，網(wǎng)頁緩存服務(wù)于單個網(wǎng)頁

  • 應(yīng)用緩存只緩存指定頁面需要的指定資源（可人為控制），任何網(wǎng)頁都具有網(wǎng)頁緩存（瀏覽器默認(rèn)行為）

  • 應(yīng)用緩存不會隨著清除瀏覽器緩存而消失

  • 應(yīng)用緩存不會像網(wǎng)頁緩存那樣，老數(shù)據(jù)會被最新一次的新數(shù)據(jù)替代

  • 應(yīng)用緩存可以離線訪問，網(wǎng)頁緩存必須在線訪問

  • 應(yīng)用緩存可靠，可控，網(wǎng)頁緩存不可控

應(yīng)用緩存的優(yōu)勢

  • 離線瀏覽

  • 速度更快--已緩存資源加載更快

  • 減少負(fù)載--瀏覽器只從服務(wù)器下載更新過的文件

一個web應(yīng)用首次下載并緩存之后，任何加載請求都優(yōu)先來自于緩存，因此可以實(shí)現(xiàn)離線緩存。如果不需要使用離線緩存了，就需要在服務(wù)器端刪除描述文件，或者刪除HTML頁面中的manifest屬性。

一旦應(yīng)用被緩存，則緩存始終不變。那么，怎樣才能改變緩存

  • 用戶清空應(yīng)用緩存

  • manifest文件被修改

  • 使用update()方法更新緩存

如果服務(wù)器上的文件有所修改的話，那么修改描述文件中注釋行的日期或者版本號是一個不錯的使瀏覽器重新緩存文件的辦法

此外，我們還可以使用HTML5提供的API來操作和更新緩存

applicationCache API

applicationCache API是一個操作應(yīng)用緩存的接口。新的window.applicationCache對象可以觸發(fā)一系列與緩存狀態(tài)相關(guān)的事件。
這個對象有一個status屬性，值為常量，表示緩存狀態(tài)

  • 0：沒有與頁面相關(guān)的應(yīng)用緩存（未緩存）

  • 1：應(yīng)用緩存未得到更新（空閑）

  • 2：正在下載描述文件并檢查更新（檢查中）

  • 3：應(yīng)用緩存正在下載描述文件中指定的資源（下載中）

  • 4：應(yīng)用緩存已經(jīng)更新了資源，而且所有資源都已下載完畢，可以通過swapCache()來使用了（更新就緒）

  • 5：應(yīng)用緩存的描述文件不存在了，頁面無法再訪問應(yīng)用緩存（已過期）

這個對象有以下事件，表示其狀態(tài)的改變

  • 每次載入一個設(shè)置了manifest屬性的HTML文件，首先會觸發(fā)checking事件

  • 如果應(yīng)用程序已經(jīng)緩存，并且清單文件沒有改動，則瀏覽器觸發(fā)noupdate事件

  • 如果應(yīng)用程序已經(jīng)緩存，并且清單文件發(fā)生改動，則瀏覽器觸發(fā)downloading事件，下載完畢后觸發(fā)updateready事件

  • 如果應(yīng)用程序未緩存，則downloading事件和progress事件都會觸發(fā)，但是下載完成后觸發(fā)cached事件而不是updateready事件

  • 如果處于離線，無法檢測清單狀態(tài)，則觸發(fā)error事件，如果引用一個不存在的清單文件，也會觸發(fā)error事件

  • 如果處于在線，應(yīng)用也緩存了，但是清單文件不存在，則會觸發(fā)obsolete事件，并將應(yīng)用程序從緩存中清除。

一般來講，這些事件會隨著頁面加載按上述順序依次觸發(fā)

update()方法

通過update()方法也可以手工干預(yù)，讓應(yīng)用緩存為檢查更新而觸發(fā)上述事件

    applicationCache.update();

update()一經(jīng)調(diào)用，應(yīng)用緩存就會去檢查描述文件是否更新，觸發(fā)checking事件，然后頁面就會像剛剛加載一樣，繼續(xù)執(zhí)行后續(xù)操作。如果觸發(fā)了cached事件，則說明應(yīng)用緩存已經(jīng)準(zhǔn)備就緒，不會再發(fā)生其他操作。

swapCache()方法

如果觸發(fā)了updateready事件，則說明新版本的應(yīng)用緩存已經(jīng)可用，需要調(diào)用swapCache()方法來啟用新的應(yīng)用緩存。

    applicationCache.onupdateready = function(){
        applicationCache.swapCache();
    };

瀏覽器檢查清單文件，以及更新緩存的操作是異步的，因此可能是在載入舊緩存之后進(jìn)行，因此可能需要載入兩次才能顯示最新的內(nèi)容，因此需要提示用戶

    window.applicationCache.onupdateready = function(){
        var con = comfirm('有新內(nèi)容可用，是否重新加載？');
        if(con){
            location.reload();
        }
    }

“html5支不支持離線應(yīng)用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手