Question

我正在尝试构建一个网络应用程序购物清单。我想使用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）如下所示，并包含在index.html和list.html的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'>

有什么想法解决这个问题吗？

提前致谢，克里斯托夫

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页面具有manifest-attribute。此页面包含离线购物清单。此页面的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

目前，这似乎有效，但我必须进行实际测试，看看它是否能够顺利运行。

问候，克里斯托夫

Html5应用程序缓存在iPhone上无法正常工作

1 个答案: