使用HTML5應用程序緩存時，常見的陷阱要避免-js教程-PHP中文網

切勿將清單文件包含在應用程序緩存清單中，這會造成循環，幾乎無法通知您的網站有新的緩存文件可用。
始終在服務器的 .htaccess 文件中設置應用程序類型清單，以確保 AppCache 正確運行。如果未設置媒體類型，AppCache 將無法工作。
請注意，如果清單文件中指定的單個文件都找不到或無法下載，則整個清單文件將被丟棄。這是 AppCache 的一種特殊行為。
更新網站後，始終更新清單文件，否則用戶將看不到更改，只會看到以前緩存的數據。您可以在清單文件中註釋中更新版本號或日期，以強制用戶的 Web 瀏覽器下載清單文件的新版本。

HTML5 應用程序緩存（也稱為 AppCache）近來成為 Web 開發人員關注的熱點話題。 AppCache 使您可以允許網站訪問者在離線時瀏覽您的網站。您甚至可以將網站的部分內容（例如圖像、樣式表或 Web 字體）存儲在用戶計算機上的緩存中。這可以幫助您的網站加載速度更快，從而減少服務器的負載。

要使用 AppCache，您可以創建一個擴展名為“appcache”的清單文件，例如：manifest.appcache。在此文件中，您可以列出要緩存的所有文件。要在您的站點上啟用它，您必須在 html 元素的網頁上包含對該清單文件的引用，如下所示：

<html lang="en" manifest="manifest.appcache">

登入後複製

這是一個示例清單文件：

<code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js

NETWORK:
*

FALLBACK:
/server/ /fallback.html</code>

登入後複製

除了 AppCache 的好處之外，還有一些常見的陷阱應該避免，以防止破壞用戶體驗並破壞您的應用程序。

切勿在清單文件中列出清單文件

如果您在應用程序緩存清單中包含清單文件本身，它會陷入某種循環，幾乎無法通知您的網站有新的緩存文件可用，並且它應該下載並使用新的清單文件而不是舊的清單文件。因此，務必小心不要犯以下錯誤：

<code>CACHE MANIFEST
# 2015-01-23 v0.1

manifest.appcache
page2.css</code>

登入後複製

緩存頁面上未緩存的資源不會加載

這是第一次使用 AppCache 時非常常見的錯誤。這就是清單文件中的 NETWORK 標誌發揮作用的地方。清單文件的 NETWORK 部分指定 Web 應用程序需要在線訪問的資源。

在 NETWORK 標誌下指定的 URL 基本上是“白名單”，也就是說，在此標誌下指定的文件在有互聯網連接時始終從服務器加載。例如，以下代碼片段確保對加載包含在 /api/ 子樹中的資源的請求始終從網絡加載，而不是從緩存加載。

<html lang="en" manifest="manifest.appcache">

登入後複製

始終在服務器的 .htaccess 文件中設置應用程序類型清單

清單文件應始終在正確的媒體類型 text/cache-manifest 下提供服務。如果未設置媒體類型，則 AppCache 將無法工作。

它應始終在生產服務器的 .htaccess 文件中配置。大多數講解 AppCache 的教程中都提到了這一點，但在將 Web 應用程序從開發服務器遷移到生產服務器時，許多開發人員都會忽略這一點。

在 Apache 的 .htaccess 文件中輸入以下內容：

<code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js

NETWORK:
*

FALLBACK:
/server/ /fallback.html</code>

登入後複製

如果您將應用程序上傳到 Google App Engine，則可以通過將以下代碼段添加到 app.yaml 文件中來完成相同的任務：

<code>CACHE MANIFEST
# 2015-01-23 v0.1

manifest.appcache
page2.css</code>

登入後複製

避免因找不到文件而丟棄整個清單

如果清單文件中指定的單個文件都找不到或無法下載，則整個清單文件將被丟棄。這是 AppCache 的一種奇怪的行為，在設計使用 AppCache 的 Web 應用程序時應牢記這一點。

例如：

<code>NETWORK:

/api</code>

登入後複製

如果刪除了 logo.gif，AppCache 將無法找到已刪除的圖像文件，因此清單文件中的任何內容都不會執行。

即使在線，數據也從 AppCache 加載

一旦您的 Web 瀏覽器保存了緩存清單文件，即使用戶已連接到互聯網，文件也會從緩存清單本身加載。此功能有助於提高網站的加載速度，並有助於減少服務器負載。

服務器上的更改不會發生，直到清單文件更新

由於您從前一點知道即使用戶在線，數據也會從 AppCache 加載，因此對網站或服務器中文件的更改不會發生，直到清單文件更新。

更新網站後，您始終必須更新清單文件，否則您的用戶將永遠無法看到更改，他們只會看到以前緩存的數據。您可以在清單文件中註釋中更新版本號或日期，以強制用戶的 Web 瀏覽器下載清單文件的新版本。例如，如果在對網站進行更改之前，以下是您使用的清單文件：

<code>AddType text/cache-manifest .manifest</code>

登入後複製

它可以更改為類似於以下代碼塊的內容，以便用戶的瀏覽器可以下載清單文件的新副本。

<code>- url: /public_html/(.*\.appcache)
  static_files: public_html/
  mime_type: text/cache-manifest
  upload: public_html/(.*\.appcache)</code>

登入後複製

請注意，以 # 開頭的行是不會執行的註釋行。

清單文件必須與主機來自相同的來源提供服務

儘管清單文件可以保存對要從其他域緩存的資源的引用，但它應從與主機頁面相同的來源提供給 Web 瀏覽器。如果不是這種情況，則清單文件將無法加載。例如，以下清單文件是正確的：

<code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js</code>

登入後複製

在這裡，我們指定了要存儲在用戶瀏覽器緩存中的內容，該內容是從另一個域引用的，這完全沒問題。

相對 URL 相對於清單的 URL

需要注意的一件重要事情是，您在清單中提到的相對 URL 相對於清單文件，而不是相對於您引用清單文件的文檔。如果清單和引用不在同一路徑中，則資源將無法加載，進而清單文件將無法加載。

如果您的應用程序結構如下所示：

<html lang="en" manifest="manifest.appcache">

登入後複製

那麼您的清單文件應如下所示：

<code>CACHE MANIFEST
# 2015-01-23 v0.1
/style.css
/logo.gif
/script.js

NETWORK:
*

FALLBACK:
/server/ /fallback.html</code>

登入後複製

以編程方式檢查清單的狀態

您可以通過測試 window.applicationCache.status 以編程方式檢查您的應用程序是否正在使用緩存清單的更新版本。這是一些示例代碼：

<code>CACHE MANIFEST
# 2015-01-23 v0.1

manifest.appcache
page2.css</code>

登入後複製

在網站上運行上述代碼可以讓你知道何時有 AppCache 清單的新更新可用。請注意，UPDATEREADY 是一個已定義的狀態。您甚至可以在 onUpdateReady() 函數中使用 swapCache() 方法來將舊的清單文件替換為新的清單文件：

<code>NETWORK:

/api</code>

登入後複製

結論

AppCache 是一項有用的技術，但正如我們所看到的，在項目中實現它時應謹慎。開發人員應選擇性地選擇應在清單文件中包含的內容。理想情況下，清單文件應包含靜態內容，例如樣式表、腳本、Web 字體和圖像。但是，您始終是對清單文件中包含哪些內容的最佳判斷者。 Appcache 是一把雙刃劍，因此在使用它時要小心！

上述內容中的大部分內容已在其他地方介紹過，還有一些其他要點。您可以查看以下資源以了解更多信息：