html5支援離線應用程式嗎-前端問答-PHP中文網

使用HTML5離線web應用程式

applicationCache API

update()方法

swapCache()方法

首頁

web前端

前端問答

html5支援離線應用程式嗎

青灯夜游

Aug 01, 2022 pm 05:57 PM

html5 離線應用

html5支援離線應用程式。離線應用程式是html5新增的特性，利用本機快取機制，使得使用者可以在網頁或應用程式在沒有網路的情況下依然可以使用。為了能夠讓Web應用程式在離線狀態的時候也能正常運作，必須把所有構成Web應用程式的資源文件，諸如HTML文件，CSS文件，JavaScript腳本文件放在本地快取中，這樣當伺服器沒有和網路連接時，也可以利用本地快取中的資源檔案來正常運行應用程式。

html5支援離線應用程式嗎

本教學操作環境：windows7系統、HTML5版、Dell G3電腦。

HTML5新增了離線應用，利用本機快取機制，離線應用程式使得我們可以在網頁或應用程式在沒有網路的情況下依然可以使用。當客戶端本機與web應用程式的伺服器沒有建立連線時，也能正常在客戶端本機使用該web應用程式進行有關操作。

為了能夠讓Web應用程式在離線狀態的時候也能正常工作，必須把所有構成Web應用程式的資源文件，諸如HTML文件，CSS文件，JavaScript腳本文件放在本地快取中，當伺服器沒有和網路連線時，也可以利用本機快取中的資源檔案來正常執行Web應用程式。

離線應用程式的使用需要以下幾個步驟：

離線偵測（決定是否連網）
存取一定的資源
有一塊本地空間用來保存資料（無論是否上網都不妨礙讀寫）

使用HTML5離線web應用程式

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

  if(window.applicationCache){
        //浏览器支持离线应用
  }

登入後複製

#2、關於描述檔
描述檔用來列出需要快取和不需要快取的資源，以備離線時使用。
描述檔的副檔名以前使用.manifest，現在推薦使用.appcache，並且描述檔需要配置正確的MIME-type，即"text/cache-manifest"，必須在web伺服器上進行設定（文件編碼必須是UTF-8）。不同的伺服器有不同的設定方法，具體這裡不詳述。

首行必須以以下字串開始

    CACHE MANIFEST

登入後複製

剩下的就是要快取的文件的URL，一行一個（相對URL是相對於清單文件而言的，不是相對於文件)

    #以“#”开头的是注释
    common.css
    common.js

登入後複製

這樣這個檔案中列舉的所有的檔案都會被快取

在清單中，可以使用特殊的區域頭來標識頭資訊之後的清單項目的類型，上面的最簡單的快取屬於"CACHE:"區域。
像這樣

    #该头信息之后的内容需要缓存    CACHE:
    common.css
    connom.js

登入後複製

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

##NETWORK:頭資訊支持通配符"*",表示任何未明確列舉的資源，都將透過網路載入

    #该头信息之后的内容不需要缓存，总是从线上获取
    NETWORK:
    a.css
    #表示以name开头的资源都不要缓存
    name/

登入後複製

以"FALLBACK:"開頭的區域中的內容，提供了取得不到快取資源時的備選資源路徑該區域中的內容，每一行包含兩個URL（第一個URL是一個前綴，任何符合的資源都不被緩存，第二個URL表示需要被緩存的資源）

    FALLBACK:
    name/  example.html

登入後複製

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

3、建立離線應用程式假設我們要建立一個包含css，js，html的單頁應用，同時要為這個單頁應用程式新增離線支援。

要將描述檔與頁面關聯起來，需要使用html標籤的manifest特性來指定描述檔的路徑

    <html manifest=&#39;./offline.appcche&#39;>

登入後複製

開發離線應用程式的第一步就是偵測裝置是否離線

HTML5新增了navigator.onLine屬性
當該屬性為true的時候表示聯網，值為false的時候，表示離線

  if(navigator.onLine){      //联网  }else{      //离线  }

登入後複製

** 附註：IE6以上瀏覽器及其他標準瀏覽器都支援此屬性**

當網路從離線變成線上的時候觸發該事件，在window上觸發該事件，不需要刷新

 window.online = function(){        //需要触发的事件    }

登入後複製

offline事件（IE9 瀏覽器支援）
當網路從線上變成離線的時候觸發該事件，和online事件一樣，在window上觸發該事件，不需要刷新

window.offline = function(){      //需要触发的事件  }

登入後複製

應用程式快取

應用程式快取（Application Cache）是從瀏覽器的快取中分出來的一塊快取區（大小依特定瀏覽器而定，一般是5M）

應用快取和網頁快取的差別：

#應用程式快取的優勢

离线浏览
速度更快--已缓存资源加载更快
减少负载--浏览器只从服务器下载更新过的文件

一个web应用首次下载并缓存之后，任何加载请求都优先来自于缓存，因此可以实现离线缓存。如果不需要使用离线缓存了，就需要在服务器端删除描述文件，或者删除HTML页面中的manifest属性。

一旦应用被缓存，则缓存始终不变。那么，怎样才能改变缓存

用户清空应用缓存
manifest文件被修改
使用update()方法更新缓存

如果服务器上的文件有所修改的话，那么修改描述文件中注释行的日期或者版本号是一个不错的使浏览器重新缓存文件的办法

此外，我们还可以使用HTML5提供的API来操作和更新缓存

applicationCache API

applicationCache API是一个操作应用缓存的接口。新的window.applicationCache对象可以触发一系列与缓存状态相关的事件。
这个对象有一个status属性，值为常量，表示缓存状态

0：没有与页面相关的应用缓存（未缓存）
1：应用缓存未得到更新（空闲）
2：正在下载描述文件并检查更新（检查中）
3：应用缓存正在下载描述文件中指定的资源（下载中）
4：应用缓存已经更新了资源，而且所有资源都已下载完毕，可以通过swapCache()来使用了（更新就绪）
5：应用缓存的描述文件不存在了，页面无法再访问应用缓存（已过期）

这个对象有以下事件，表示其状态的改变

每次载入一个设置了manifest属性的HTML文件，首先会触发checking事件
如果应用程序已经缓存，并且清单文件没有改动，则浏览器触发noupdate事件
如果应用程序已经缓存，并且清单文件发生改动，则浏览器触发downloading事件，下载完毕后触发updateready事件
如果应用程序未缓存，则downloading事件和progress事件都会触发，但是下载完成后触发cached事件而不是updateready事件
如果处于离线，无法检测清单状态，则触发error事件，如果引用一个不存在的清单文件，也会触发error事件
如果处于在线，应用也缓存了，但是清单文件不存在，则会触发obsolete事件，并将应用程序从缓存中清除。

一般来讲，这些事件会随着页面加载按上述顺序依次触发

update()方法

通过update()方法也可以手工干预，让应用缓存为检查更新而触发上述事件

    applicationCache.update();

登入後複製

update()一经调用，应用缓存就会去检查描述文件是否更新，触发checking事件，然后页面就会像刚刚加载一样，继续执行后续操作。如果触发了cached事件，则说明应用缓存已经准备就绪，不会再发生其他操作。

swapCache()方法

如果触发了updateready事件，则说明新版本的应用缓存已经可用，需要调用swapCache()方法来启用新的应用缓存。

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

登入後複製

浏览器检查清单文件，以及更新缓存的操作是异步的，因此可能是在载入旧缓存之后进行，因此可能需要载入两次才能显示最新的内容，因此需要提示用户

    window.applicationCache.onupdateready = function(){
        var con = comfirm(&#39;有新内容可用，是否重新加载？&#39;);
        if(con){
            location.reload();
        }
    }

登入後複製