15

需要明确的是，Web 应用程序正在缓存，并且在 Mobile Safari 中离线运行良好。

问题是当它被添加到运行 iOS 6.0.1 的 iPhone 4s 和 iPad 2 的主屏幕时。它无法脱机工作，并在连接到互联网时出现网络错误，即“无法打开 MYWEBAPP。MYWEBAPP 无法打开，因为它没有连接到互联网”

我已经调试了几个小时，似乎找不到解决方案。我在控制台中没有收到任何错误，我正在运行 Jonathan Stark 的调试代码

我已经在桌面 Safari、Chrome 和 Firefox 的在线/离线开发者工具中测试了该应用程序。以及带有 Safari 中设备的 Web Inspector。结果在 iPhone 或 iPad 上都是一样的。它们都将缓存 Web 应用程序并在 Mobile Safari 中运行，但在添加到主屏幕时不会。离线或在线都没有错误。

据我所知，我正在使用最佳实践：

  1. 添加了 HTML 标头： <html manifest="photo.appcache">

    我还尝试过为清单文件使用不同的名称，包括：cache.manifest 和 offline.manifest，因为我读到它会有所不同，但在我的测试中，只要扩展名是 . manifest 或 .appcache 并在 .htaccess 文件中适当地提供。

  2. 添加了正确的 MIME 类型： AddType text/cache-manifest appcache manifest

    我也试过：AddType text/cache.manifest manifest,, AddType text/cache.manifest .manifest manifestAddType text/cache-manifest .manifest

    我不相信这有效：AddType text/cache.manifest 但我不记得了。在大多数情况下，这并不重要，我坚持：

    AddType text/cache-manifest 应用缓存清单

    就像 HTML5 Mobile Boilerplate 中的内容一样。

  3. 添加：

网络： *

到 appcache 文件。我相信这允许下载所有内容以及使所有链接正常工作。

  1. 我试过删除这一行： <meta name="apple-mobile-web-app-capable" content="yes"> 因为我在这里阅读了 SO 解决了与我类似的问题，但我可以确认它在我的测试中不起作用。当按下主屏幕图标时删除此行或将内容设置为“否”将重定向到 Mobile Safari 而不是全屏打开。

我几乎把它缩小到它是 iOS 6 中的一个错误（我实际上使用的是 iOS 6.0.1），因为我知道现在已经为浏览器中的 Web 应用程序和添加到主屏幕的应用程序分离了数据. 我在这里发布这个问题，看看是否有其他开发人员遇到过同样的问题。

4

4 回答 4

15

我已经解决了这个问题。对于 iOS 6 中的主屏幕 Web 应用程序，我推荐以下内容。

出于测试目的，请使用 Web Inspector 和 Jonathan Stark 之类的 JS 脚本来了解应用程序何时缓存到 Mobile Safari 中：

http://jonathanstark.com/blog/debugging-html-5-offline-application-cache?filename=2009/09/27/debugging-html-5-offline-application-cache/

成功缓存后，将应用添加到主屏幕并保持打开状态，以便单独缓存主屏幕版本。它必须完全缓存才能离线工作。

由于我的应用程序缓存是 22mb 的数据，并且数据的缓存对于 web 应用程序是单独的，所以我遇到的问题是没有让主屏幕应用程序打开足够长的时间来缓存。

就用户体验而言，这很糟糕，但数据是分开的也很好。我可以确认这一点，因为如果您从 Safari 中删除网站数据，主屏幕网络应用程序仍然可以运行。

据我所知，没有办法调试为主屏幕 Web 应用程序缓存的数据或其存储位置。

于 2012-11-09T18:43:55.850 回答
1

上面的答案非常有帮助。@aul 说他不知道调试主屏幕网络应用程序的方法，但我找到了一种方法。

将您的 iPad 或 iPhone 连接到您的计算机，然后在 Safari 中转到“开发”> 并选择您的设备。您的主屏幕应用程序必须打开才能显示在下拉菜单中。访问该应用程序后，您可以打开错误控制台并观看Jonathan Stark 的脚本开始工作。下载清单后，您将能够在离线模式下使用该应用程序。

于 2013-01-23T22:15:40.773 回答
1

这个脚本让生活更轻松！感谢@保罗！

var cacheStatusValues = [];
cacheStatusValues[0] = 'uncached';
cacheStatusValues[1] = 'idle';
cacheStatusValues[2] = 'checking';
cacheStatusValues[3] = 'downloading';
cacheStatusValues[4] = 'updateready';
cacheStatusValues[5] = 'obsolete';

var cache = window.applicationCache;
cache.addEventListener('cached', logEvent, false);
cache.addEventListener('checking', logEvent, false);
cache.addEventListener('downloading', logEvent, false);
cache.addEventListener('error', logEvent, false);
cache.addEventListener('noupdate', logEvent, false);
cache.addEventListener('obsolete', logEvent, false);
cache.addEventListener('progress', logEvent, false);
cache.addEventListener('updateready', logEvent, false);

function logEvent(e) {
    var online, status, type, message;
    online = (navigator.onLine) ? 'yes' : 'no';
    status = cacheStatusValues[cache.status];
    type = e.type;
    message = 'online: ' + online;
    message+= ', event: ' + type;
    message+= ', status: ' + status;
    if (type == 'error' && navigator.onLine) {
        message+= ' (prolly a syntax error in manifest)';
    }
    console.log(message);
}

window.applicationCache.addEventListener(
    'updateready', 
    function(){
        window.applicationCache.swapCache();
        console.log('swap cache has been called');
    }, 
    false
);

setInterval(function(){cache.update()}, 10000);
于 2013-08-20T18:32:38.123 回答
0

我有一个两部分的问题。我正在使用 ASP.NET MVC/Razor 生成我的缓存清单，因为我希望能够轻松地将站点托管在虚拟应用程序之外并且仍然保持路径对齐。缓存清单上的内容类型未正确设置，因此 Internet Explorer 和 Safari (iOS) 无法识别它（即使 PC 和 Android 上的 Chrome 可以）。

一旦我解决了这个问题，当我尝试使用 iOS Safari 访问我的 Azure 托管应用程序时，它仍然无法正常工作。当我尝试使用 Internet Explorer 访问时，我发现它没有我所拥有的字体的正确 mime 类型。

因此，请注意：不仅要绝对确定清单的 MIME 类型，还要确定清单所依赖的所有文件的 MIME 类型。

于 2015-05-08T18:36:29.237 回答