检测远程资源的 applicationCache 可行性

Question

我正在尝试确定缓存（通过 applicationCache 和 HTML5 缓存清单获得）是否在不同的域（本地文件系统与 WWW）上可用。

缓存检查资源（网关机制，如果你愿意的话）位于本地文件系统上并通过 webview 加载。这是我无法解决的要求。

直到最近，这个网关本地文件会检查设备是否在线并使用 window.location 重定向到远程资源，如果设备不在线，它会显示一个图形（也是本地打包的） ) 本质上说 "You must connect to the internet to use this feature."

但是，我最近才对该远程资源实施离线支持。有用。如果我们有网关文件只是在离线时重定向到远程资源，它将从缓存中加载远程资源。

用户可能会在尚未通过在线访问设备时尝试在离线时使用设备，因此需要在网关代码中放置逻辑以测试缓存是否存在。我运行遇到了跨域问题，这是我预料到的，但我不确定如何解决它。

这是我试过的代码：

if (window.navigator.onLine === false) {
    // See if we're able to reach the content (if it's cached, we'll get HTML, else it'll fail)
    cacheCheck = $.ajax(contentLoc, {async:false});

    // the request failed so we have no cache at all. let's just show the offline graphic.
    if (cacheCheck.status === 0) { // no cache available :(
        $("#launchpage").addClass("offline");
    } else { // we have a cache :)
        redirect();
    }
} else {
    redirect();
}

当我写它的时候，我天真地希望 $.ajax() 会获取缓存的版本（如果它存在的话），我可以测试返回的对象看看是否返回的状态代码不是错误状态代码。

但是，这不起作用，因为对象正在返回“错误：NETWORK_ERR：XMLHttpRequest 异常 101”

有没有其他方法可以用来确定重定向是否安全？如果重定向失败（由于没有缓存），我需要显示本地图像

Answer 1

我找到了解决方法。如果我注入一个指向远程资源的 iframe 并检查该 iframe 是否加载 HTML（我特别检查标签是否包含清单属性）它假定缓存存在并且它可以执行重定向。

如果我没有得到预期的结果，则会显示错误图形。虽然在我的实现中图形总是在离线时显示，因为我必须等待 iframe 异步加载。

下面是让它工作的示例代码：

if (window.navigator.onLine === false) {
// We're offline, so show the offline graphic, in case the future test fails (i.e., no cache available)
    $("#launchpage").addClass("offline");

    // Create an iframe pointing to the canvas. If it loads, we have a cache
    $('body').append('<iframe id="offlineTest" src="'+contentLoc+'" style="display:none;" />');

    $('#offlineTest').bind('load', function() {
        // See if the result HTML tag has a manifest tag.
        manifest = $("#offlineTest").contents().find('html').attr('manifest');

        if (manifest !== undefined) { // cache is available.
            redirect();
        }
    });
} else {
    redirect();
}

检测远程资源的 applicationCache 可行性

Detecting applicationCache viability of remote resource

javascript

application-cache

cross-domain

offline-caching