Nginx manifest 實現 HTML5 Application Cache

時間 2019-11-11

標籤 nginx manifest 實現 html5 html application cache 欄目 Nginx 简体版

原文原文鏈接

什麼是Application Cachecss

HTML5引入了應用程序緩存技術，意味着web應用可進行緩存，並在沒有網絡的狀況下使用，經過建立cache manifest文件，能夠輕鬆的建立離線應用。html

Application Cache帶來的三個優點是：nginx

① 離線瀏覽 – 用戶可在離線時瀏覽您的完整網站web

② 提高頁面載入速度 – 緩存資源爲本地資源，所以加載速度較快編程

③ 下降服務器壓力 – 瀏覽器只會從發生了更改的服務器下載資源瀏覽器

並且主要瀏覽器皆以支持Application Cache，就算不支持也不會對程序形成什麼影響緩存

Nginx manifest配置服務器

離線存儲是經過manifest文件來管理的，須要服務器端的支持，不一樣的服務器開啓支持的方式也是不一樣的。對於Nginx須要修改配置目錄下的mime.types文件，添加manifest文件映射：網絡

text/cache-manifest                   manifest;

重啓nginx後，服務器支持manifest。app

配置manifest文件

CACHE MANIFEST

CACHE:
#須要緩存的列表
clock.css
clock.js

NETWORK:
#不須要緩存的
*

FALLBACK:
#訪問緩存失敗後，備用訪問的資源，第一個是訪問源，第二個是替換文件*.html /offline.html
index.html a.html

HTML5 Application Cache

使用離線存儲，除了上述的配置外，只須要在html tag標籤增長<manifest>。

<!DOCTYPE html>
<html lang="en" manifest="cache.manifest">
  <head>  
    <title>AppCache Test</title>  
    <link rel="stylesheet" href="clock.css">  
    <script src="clock.js"></script>  
  </head>
  <body>
    <p><output id="clock"></output></p>
    <div id="log"></div>
  </body>
</html>

經過chrom 訪問站點，便可看到離線緩存後的效果：

經過JS動態控制更新

應用在離線後將保持緩存狀態，除非發生如下某種狀況：
用戶清除了瀏覽器對您網站的數據存儲。
清單文件通過修改。請注意：更新清單中列出的某個文件並不意味着瀏覽器會從新緩存該資源。清單文件自己必須進行更改。

緩存狀態:
window.applicationCache 對象是對瀏覽器的應用緩存的編程訪問方式。其 status 屬性可用於查看緩存的當前狀態：

var appCache = window.applicationCache;  
switch (appCache.status) {  
  case appCache.UNCACHED: // UNCACHED == 0  
    return 'UNCACHED';  
    break;  
  case appCache.IDLE: // IDLE == 1  
    return 'IDLE';  
    break;  
  case appCache.CHECKING: // CHECKING == 2  
    return 'CHECKING';  
    break;  
  case appCache.DOWNLOADING: // DOWNLOADING == 3  
    return 'DOWNLOADING';  
    break;  
  case appCache.UPDATEREADY:  // UPDATEREADY == 4  
    return 'UPDATEREADY';  
    break;  
  case appCache.OBSOLETE: // OBSOLETE == 5  
    return 'OBSOLETE';  
    break;  
  default:  
    return 'UKNOWN CACHE STATUS';  
    break;  
};

要以編程方式更新緩存，請先調用 applicationCache.update()。此操做將嘗試更新用戶的緩存（前提是已更改清單文件）。最後，當 applicationCache.status 處於 UPDATEREADY 狀態時，調用 applicationCache.swapCache() 便可將原緩存換成新緩存。

var appCache = window.applicationCache;  
appCache.update(); // Attempt to update the user's cache.  
...  
if (appCache.status == window.applicationCache.UPDATEREADY) {  
  appCache.swapCache();  // The fetch was successful, swap in the new cache.  
}

請注意：以這種方式使用 update() 和 swapCache() 不會向用戶提供更新的資源。此流程只是讓瀏覽器檢查是否有新的清單、下載指定的更新內容以及從新填充應用緩存。所以，還須要對網頁進行兩次從新加載才能向用戶提供新的內容，其中第一次是得到新的應用緩存，第二次是刷新網頁內容。

好消息是，您能夠避免從新加載兩次的麻煩。要使用戶更新到最新版網站，可設置監聽器，以監聽網頁加載時的 updateready 事件：

    //Check if a new cache is available on page load.  
    window.addEventListener('load', function(e) {  
      window.applicationCache.addEventListener('updateready', function(e) {  
        if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {  
          // Browser downloaded a new app cache.  
          // Swap it in and reload the page to get the new hotness.  
          window.applicationCache.swapCache();  
          if (confirm('A new version of this site is available. Load it?')) {  
            window.location.reload();  
          }  
        } else {  
          // Manifest didn't changed. Nothing new to server.  
        }  
      }, false);  
    }, false);

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。