APP開發(fā)公司詳解如何搭建簡單的離線APP，深圳APP開發(fā)公司本文本通過一個簡單的緩存更新示例介紹Manifest和ApplicationCache的使用。在使用Manifest文件之前，首先要確保Web服務(wù)器對文件進(jìn)行正確的解析。
以Apache為例，需要在相應(yīng)的httpd.conf配置文件中添加如下代碼配置信息：AddTypetext/cache-Manifest.Manifest
下面以Chrome作為演示瀏覽器，不過有的Chrome版本會默認(rèn)關(guān)閉ApplicationCache功能，這時需要進(jìn)入Chrome瀏覽器實(shí)驗(yàn)室開啟ApplicationCache功能，如圖5.4所示。
示例中的Manifest文件application.Manifest的代碼如下：
CACHE MANIFEST # v1 CACHE: demo. css demo. jpg demo. js NETWORK: demo2. css FALLBACK:
示例主頁面代碼如下：【代碼5-2】
01 <! DOCTYPE html> 02 < html Manifest=" ApplicationCache/ application. Manifest"> <!— Manifest 文件 –> 03 < head> 04 < script type=" text/ javascript" src=" ApplicationCache/ demo. js"></ script> 05 < link rel=" stylesheet" type=" text/ css" href=" ApplicationCache/
ApplicationCache/ demo. css"> 06 < link rel=" stylesheet" type=" text/ css" href=" ApplicationCache/ demo2. css"> 07 </ head> 08 < body> 09 < img src=" ApplicationCache/ demo. jpg">< br> 10 < button> 更新 緩存 Manifest 文件</ button> <!— 手動 更新 緩存 按鈕 –> 11 </ body> 12 < script type=" text/ javascript"> 13 document. querySelector(' button'). addEventListener(' click', function() { // 監(jiān)聽 按鈕 點(diǎn)擊 事件 14 var appCache = window. applicationCache; // 獲取 緩存 操作 對象 15 appCache. update(); // 嘗試 更新 緩存. 16 if (appCache. status == window. applicationCache. UPDATEREADY) { // 狀態(tài) 是否 已更新 17 appCache. swapCache(); // 更新 成功 后， 切換 到 新的 緩存 18 } 19 }) 20 </ script>
21 </ html>
將主頁面文件部署在配置完畢的Apache服務(wù)器上，使用開啟ApplicationCache功能的Chrome瀏覽器訪問示例頁面，同時打開開發(fā)者工具查看控制臺信息，效果如圖5.5所示。
在開發(fā)者工具的控制臺信息中可以看到瀏覽器的整個執(zhí)行過程，首先下載html標(biāo)簽中Manifest屬性對應(yīng)的Manifest文件，然后將Manifest中CACHE標(biāo)簽下的文件連同主頁面一同進(jìn)行緩存。接下來修改demo.js，添加1行代碼：
alert(‘ update’);
再更新application.Manifest文件，將第2行的v1變?yōu)関2，代碼如下：
CACHE MANIFEST # v2 CACHE: demo. css demo. jpg demo. js NETWORK: demo2. css FALLBACK:
點(diǎn)擊頁面中的“更新緩存manifest文件”按鈕，瀏覽器啟動緩存進(jìn)程更新CACHE標(biāo)簽下的內(nèi)容，重新刷新頁面，待頁面加載完畢后彈出內(nèi)容為“update”的提示框，效果如圖5.6所示。
在Chrome下可以通過訪問“chrome://appcache-internals/”查看瀏覽器緩存的內(nèi)容，本示例的緩存信息效果如圖5.7所示。
點(diǎn)擊“ViewEntries”文字鏈接，展開被緩存的地址鏈接和緩存內(nèi)容的大小，效果如圖5.8所示。
APP開發(fā)公司提示：在Firefox中可以通過訪問about:cache頁面（在“離線緩存設(shè)置”標(biāo)題下）來檢查離線緩存的當(dāng)前狀況。好了，APP開發(fā)公司本文關(guān)于“如何搭建簡單的離線APP”的相關(guān)APP制作開發(fā)經(jīng)驗(yàn)就分享到這里，謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
