Html5アプリケーションキャッシュがiPhoneで正しく動作しない

Question

Webアプリケーションのショッピングリストを作成しようとしています。 オフラインのときに、html5アプリケーションキャッシュを使用してリストを表示したいとします。 ショッピングリストアイテムはローカルストレージに保存されます。 私のラップトップではすべて正常に動作しますが、私のiPhoneでは、これは私の目的ではない間にすべてのページがキャッシュされているようです。

続き、index.htmlをとするlist.htmlで、HTMLタグに含まれているように私のマニフェストファイル（offline.appcache）が見えます

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) 

：

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 

目的はあなたが訪問whouldたときにということでした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'> 

任意のアイデアこの問題を解決するために？事前に

おかげで、長い検索の後 クリストフ

Answer 1

は、私は私の作品解決策を見つけました。 私はアプリケーションのキャッシュ機能がまだすべてのブラウザで完全にサポートされていないことを発見しました。 下のリンクの助けを借りて、私は実際の解決策に出た。 これは最も洗練されたソリューションではありませんが、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 

、これは動作しているようですが、私はそれがanoughスムーズに動作するかどうかを確認するために実用的なtestingsを行う必要があります。

ご挨拶、 クリストフ