Html5應用程序緩存在iPhone上無法正常工作

-1

我試圖構建一個網絡應用程序購物清單。我想在離線時使用html5應用程序緩存來查看列表。購物清單項目存儲在本地存儲中。在我的筆記本電腦上一切正常，但在我的iPhone上，似乎所有頁面都被緩存，但這不是我的目的。Html5應用程序緩存在iPhone上無法正常工作

I have three pages: 
index.html: page with the login form 
list.html: page to add items to the list 
offline.html: page to view the list when offline (f.e. during shopping)

我的清單文件（offline.appcache）看起來像如下幷包含在HTML標籤的index.html和list.html：

CACHE MANIFEST 
# 24/05/2017 16:55:23 
CACHE: 
/shopping-app/offline.html 
/shopping-app/offline.js 
/includes/jquery/jquery-1.9.1.min.js 
/includes/bootstrap/css/bootstrap.min.css 
/includes/bootstrap/js/bootstrap.min.js 
NETWORK: 
* 
FALLBACK: 
/shopping-app/*.html /shopping-app/offline.html

的目的是，當你參觀對子級index.html或list.html脫機時，您會看到offline.html。這適用於我的筆記本電腦，但不適用於iPhone上的Safari。儘管offline.html被正確緩存，但重定向失敗。

所以我加了下面的行中我的javascript：

if(((navigator.userAgent.match(/iPhone/i)) 
|| (navigator.userAgent.match(/iPad/i))) 
&& navigator.onLine === false) 
document.location.href = "/shopping-app/offline.html";

到目前爲止，它的工作，但因爲我包含在index.html，然後list.html清單，這些網頁，緩存爲好。當我現在更改list.html上的列表時，更改在我的iPhone上不可見。

所以我加入的index.html，然後list.html頭以下的線路，但沒有任何效果：

<meta http-equiv='cache-control' content='no-cache'> 
<meta http-equiv='expires' content='0'> 
<meta http-equiv='pragma' content='no-cache'>

任何想法來解決這個問題？

由於提前，克里斯托夫

來源

2017-06-02 Kristof Nijs

經過長時間的搜尋後，我發現我工作的解決方案。我發現應用程序緩存功能尚未完全支持所有瀏覽器。在下面的鏈接幫助下，我找到了一個可行的解決方案。這不是最優雅的解決方案，但它適用於Firefox，Edge和Safari。

https://www.html5rocks.com/en/tutorials/appcache/beginner/

Since every page with a manifest attribute in the html tag will be cached, I renamed the following pages: 
- index.html became login.html 
- offline.html became index.html

只有index.html頁面有一個明顯的屬性。此頁面包含離線購物清單。這個頁面的javascript檢查是否在線。在線時，它會檢查是否需要下載新的應用程序緩存，如果已完成，則重定向到login.html頁面。脫機時，頁面只顯示購物清單。

下面的JavaScript：

$(document).ready(function() { 

    if(navigator.onLine === false) { 

     // Offline 

     loadShoppingList(); 

    }else{ 

     // Online 

     window.applicationCache.addEventListener("error",function(e) { 

      // Error, probably because of offline  

      loadShoppingList(); 

     },false); 

     window.applicationCache.addEventListener("cached",function(e) { 

      // Cached for the first time   

      document.location.href = "/shopping-app/login.html"; 

     },false); 

     window.applicationCache.addEventListener("noupdate",function(e) { 

      // No update 

      document.location.href = "/shopping-app/login.html"; 

     },false); 

     window.applicationCache.addEventListener("updateready",function(e) { 

      if(window.applicationCache.status == window.applicationCache.UPDATEREADY) { 

       // New manifest downloaded: redirect to online version 

       window.applicationCache.swapCache();   
       document.location.href = "/shopping-app/login.html"; 

      } // end if 

     },false); 

    } // end if 

}); // end ready 

function loadShoppingList() { 

    if($("#order_div").hasClass("hidden")) { 

     $("#wait_div").addClass("hidden"); 
     $("#order_div").removeClass("hidden"); 

    } // end if 

    if(typeof(Storage) !== "undefined") $("#order_div").html(localStorage.getItem("order_table")); 

} // end function

就目前來看，這似乎工作，但我要做的實際testings，看它是否工作順利anough。

Greetings， Kristof

來源

2017-06-18 17:59:09

Html5應用程序緩存在iPhone上無法正常工作

回答

相關問題