使用HTML5應用程序緩存時，常見的陷阱要避免

關鍵要點

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

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

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

<code class="language-html"></code>

這是一個示例清單文件：

<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/ 子樹中的資源的請求始終從網絡加載，而不是從緩存加載。

<code class="language-html"></code>

始終在服務器的 .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 相對於清單文件，而不是相對於您引用清單文件的文檔。如果清單和引用不在同一路徑中，則資源將無法加載，進而清單文件將無法加載。

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

<code class="language-html"></code>

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

<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 是一把雙刃劍，因此在使用它時要小心！

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

• MDN 上的應用程序緩存陷阱
• Jake Archibald 的應用程序緩存是個混蛋
• Jake Archibald 的離線食譜

關於 HTML5 應用程序緩存的常見問題解答 (FAQ)

什麼是 HTML5 應用程序緩存，為什麼它很重要？

HTML5 應用程序緩存 (AppCache) 是一項允許開發人員指定瀏覽器應緩存哪些文件並使其可供用戶離線使用的功能。它之所以重要，是因為它可以通過減少服務器負載和節省帶寬來提高 Web 應用程序的性能。它還允許應用程序即使在用戶離線時也能運行，從而提供更好的用戶體驗。

HTML5 應用程序緩存是如何工作的？

HTML5 應用程序緩存的工作原理是使用清單文件。此文件列出了瀏覽器應緩存以供離線使用的資源。當用戶訪問網頁時，瀏覽器會檢查是否與其關聯了清單文件。如果是，瀏覽器將下載並存儲列出的資源。下次用戶訪問網頁時，瀏覽器將加載緩存的資源，而不是從服務器下載它們。

使用 HTML5 應用程序緩存時有哪些常見的陷阱？

使用 HTML5 應用程序緩存時，一些常見的陷阱包括：未正確更新清單文件，導致提供舊資源；未正確處理緩存清單回退部分，導致錯誤；以及未考慮緩存對用戶設備存儲的影響。

如何避免這些陷阱？

為避免這些陷阱，請在資源更改時始終正確更新清單文件。使用清單文件的 NETWORK 部分指定永遠不應該緩存的資源。此外，請考慮用戶的設備存儲，並且只緩存必要的資源。

HTML5 應用程序緩存的未來是什麼？

HTML5 應用程序緩存正在被棄用，取而代之的是 Service Workers。 Service Workers 提供對緩存的更多控制，並且可以處理更複雜的場景。但是，目前並非所有瀏覽器都支持 Service Workers，因此了解和使用 HTML5 應用程序緩存仍然很重要。

如何創建清單文件？

清單文件是一個簡單的文本文件，其中列出了要緩存的資源。它應該以 MIME 類型“text/cache-manifest”提供服務。文件的首行應為“CACHE MANIFEST”，後跟要緩存的資源。

如何將網頁與清單文件關聯？

要將網頁與清單文件關聯，請將“manifest”屬性添加到網頁的“html”標記中。 “manifest”屬性的值應為清單文件的 URL。

如何更新緩存？

要更新緩存，請對清單文件進行更改。每次用戶訪問網頁時，瀏覽器都會檢查清單文件的更新。如果清單文件已更改，瀏覽器將下載並緩存新資源。

如果清單文件中列出的資源無法下載會發生什麼？

如果清單文件中列出的資源無法下載，則整個緩存更新過程將失敗。瀏覽器將繼續使用舊緩存。

我可以將 HTML5 應用程序緩存用於所有資源嗎？

雖然從技術上講您可以將 HTML5 應用程序緩存用於所有資源，但不建議這樣做。緩存過多的資源可能會填滿用戶的設備存儲並對性能產生負面影響。最好只緩存必要的資源。

以上是使用HTML5應用程序緩存時，常見的陷阱要避免的詳細內容。更多資訊請關注PHP中文網其他相關文章！