如何使用 HTML5 appcache 創建自定義離線頁面，同時保留我的 404 錯誤頁面？

Question

我正在嘗試使用HTML5 appcache 功能為我的網站提供自定義的“斷開連接”頁面。 我有一個名為offline.html的頁面，我想向在瀏覽器離線時嘗試訪問站點根頁面（ / ）的用戶顯示該頁面，並且我想關閉所有其他 appcache 功能。 我不希望我網站上的任何頁面緩存在 appcache 中（當然， offline.html和必要的offline_cache.html除外）。

我正在使用此解決方法來防止我的主頁被緩存為母版頁，並且使用下面的代碼，我覺得我幾乎可以正常工作了。

我的index.html使用離線緩存助手加載 iframe：

<iframe style="display: none;" src="offline_cache.html"></iframe>

offline_cache.html文件加載site.appcache ：

<!DOCTYPE HTML>
<html lang="en" class="no-js" manifest="site.appcache">
    <head>
        <meta charset="utf-8">
        <title>Manifest Initiation Page</title>
    </head>
    <body></body>
</html>

我的site.appcache文件使用FALLBACK指令為根頁面提供離線替代方案（現在它匹配所有內容，但我希望它僅匹配根頁面）：

CACHE MANIFEST

CACHE:

NETWORK:
*

FALLBACK:
/ /offline.html

SETTINGS:
prefer-online

期望的行為：

除了自定義離線頁面 ( offline.html ) 及其幫助程序之外，緩存中不應有任何內容。 當用戶在線訪問該站點時，該站點應正常運行，包括所有特殊狀態代碼頁面（如 404）。 當用戶離線訪問站點的根頁面時，他們應該會看到offline.html 。 當用戶在離線時訪問不存在的頁面（它可以是offline.html或本機離線頁面）時會發生什么並不重要，但如果他們在線，那么它必須顯示 404 頁面而不是offline.html 。

當前行為：

無論瀏覽器是在線還是離線，用戶都不會看到任何 404 頁面 - 對於在用戶在線時應該顯示 404 錯誤的頁面，他們會看到offline.html 。 這是因為后備部分中的/不僅匹配主頁，還匹配以/開頭的每個 url，即包括所有不存在頁面的整個站點（我希望它只匹配主頁）。

從本質上講，我只需要讓我的后備觸發器只出現在/主頁上，而不是網站上的任何其他路徑。 然后所有不存在的資源將正確返回本機離線頁面或 404 錯誤頁面而不是offline.html 。 我怎樣才能做到這一點？

Answer 1

沒有任何方法可以做到這一點。 在顯示頁面之前，HTML 需要通過 Internet 連接加載，如果您沒有連接到 Internet，則瀏覽器不能只顯示您的一個頁面。 即使是離線警報。 如果您的意思是“抱歉，離線更新”頁面，只需每次切換 index.html / offline.html，否則，沒有有效的選擇。

如何使用 HTML5 appcache 創建自定義離線頁面，同時保留我的 404 錯誤頁面？

問題描述

1 個解決方案

解決方案1
0 2022-01-08 20:53:52

如何使用 HTML5 appcache 創建自定義離線頁面，同時保留我的 404 錯誤頁面？

問題描述

1 個解決方案

解決方案1 0 2022-01-08 20:53:52

解決方案1
0 2022-01-08 20:53:52