使HTML5應用程序可脫機使用

我正在爲客戶端開發HTML應用程序。整個應用程序前端由1個HTML文件，1個Javascript文件，1個CSS文件（加上jquery）和一些圖片完成。有幾個PHP腳本坐在服務器上，使用AJAX調用，但只有在互聯網連接可用時。如果沒有連接可用，則該站點將使用本地緩存數據（使用localStorage）。使HTML5應用程序可脫機使用

爲了使網站可以離線使用，我在我的HTML中聲明瞭緩存清單。我的HTML看起來像這樣：

<!DOCTYPE html> 
<html manifest="cache.manifest.php" language="en"> 
... 
</html>

的cache.manifest.php的輸出是這樣的：

CACHE MANIFEST 
#VersionHash: 80b9345e6c39efbbe8431e394b014b4f 

CACHE: 
/css/ebot.css 
/favicon.ico 
/images/appicon.png 
/images/list-arrow.png 
/images/list-checkmark.png 
/images/woman.png 
/index.html 
/js/jquery-1.8.3.min.js 
/js/ebot.ls.js 

NETWORK: 
/emaillog.php 
/getdata.php 
/uploadlog.php

到目前爲止好。現在，我通過可用的互聯網連接從瀏覽器訪問網站。我收到一條通知，詢問是否允許該網站存儲信息以供離線使用 - 我允許。當我檢查設置時，我發現該網站存儲了316K的數據 - 大概是正確的。

現在我關掉互聯網連接，並嘗試訪問http://www.mysite.com/index.html - 並得到一個錯誤消息說「Internet連接不可用」（或東西的程度）和不顯示頁面。這發生在我在我的開發機器上測試的3個瀏覽器（firefox，safari和chrome）以及客戶端的ipad上（應用程序最終用於ipad上）。

缺少什麼我在這裏？我究竟做錯了什麼？

來源

2012-12-18 Aleks G

沒有答案，但你有沒有遇到過這篇文章？ http://www.alistapart.com/articles/application-cache-is-a-douchebag/它討論了使用appcache涉及的許多問題。 –

可能有很多原因。看看這個文章：

我猜你沒有指定正確的內容類型（MIME）爲您的清單。它應該是'文本/緩存清單'。在Chrome中檢查控制檯中的事件。您應該看到這樣的事情時，應用程序緩存清單是正確的：

與艙單http://example.com/manifest.appcache
應用程序緩存檢查事件
應用緩存下載事件
應用程序緩存進度事件（XXX的YYY）
應用程序緩存中創建應用程序緩存事件

我建議從最簡單的清單開始，以確保清單被解析。試試：

CACHE MANIFEST 
NETWORK: 
*

這樣的清單應該只緩存你的啓動html頁面。

來源

2013-01-24 17:30:17 Shrike

Manifest由php程序創建，它明確設置了正確的內容類型。我檢查了Chrome和Firefox（使用Firebug）。所以這絕對是別的。 –

你是如何檢查的？Chrome不顯示在其devtools的「網絡」標籤中獲取appcahce清單。你是否直接將瀏覽器指向cache.manifest.php？還要確保沒有發生http緩存（在服務器中返回清單時添加適當的頭文件） – Shrike

首先，我通過直接加載cache.manifest.php來進行檢查。其次，我確實得到一個彈出式欄目，說該網站想要存儲數據供離線使用，我回答「是」。這意味着瀏覽器確實理解緩存。 –

使HTML5應用程序可脫機使用

回答

相關問題