1

我创建了使用 HTML5 的应用程序缓存功能的简单 HTML 页面。

<!DOCTYPE html>
<html manifest="test.appcache">
<head>
  <title>Test</title>    
  <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <!-- App icon for iPad (3rd gen) with retina display -->
  <link rel="apple-touch-icon" sizes="144x144" href="./img/app-icon/apple-touch-icon-144x144.png">
  <!-- App icon for iPhone with retina display -->
  <link rel="apple-touch-icon" sizes="114x114" href="./img/app-icon/apple-touch-icon-114x114.png">
  <!-- App icon for iPad (1st and 2nd gen) -->
  <link rel="apple-touch-icon" sizes="72x72" href="./img/app-icon/apple-touch-icon-72x72.png">
  <!-- App icon for iPhone (non-retina) and Android -->
  <link rel="apple-touch-icon" href="./img/app-icon/apple-touch-icon.png">
  <!-- Favicon for Android browser tabs/bookmarks -->
  <link rel="icon" type="image/png" href="./img/app-icon/favicon.png">  
  <link href="themes/theme1/splash.css" media="screen, projection" rel="stylesheet" type="text/css" />      
  <script src="js/src/vendor/jquery.js" type="text/javascript"></script>        
</head>

<body>
  <h1>TEST PAGE</h1>
  <div id="splash">    
    <div id="splash-logo"></div>
    <ol class="loader"><li></li><li></li><li></li></ol>
    <img id="splash-gtechg2" src="img/logo.png"/>
  </div>    
</body>
</html>

如您所见，它非常简单。以下是我的清单：

CACHE MANIFEST
# Modified: Thu Jan 24 12:22:59 2013
#-----------------------------------------------------------------------------
CACHE:
# js/src/vendor
  js/src/vendor/jquery.js

# img/app-icon
  img/app-icon/apple-touch-icon-114x114.png
  img/app-icon/apple-touch-icon-144x144.png
  img/app-icon/apple-touch-icon-72x72.png
  img/app-icon/apple-touch-icon.png
  img/app-icon/favicon.png
#-----------------------------------------------------------------------------
NETWORK:
  *
  http://*
  https://*
#-----------------------------------------------------------------------------
FALLBACK: 
  / offline.html

CSS文件是：

#splash {
  background-image    : url(img/background.jpg);
  background-position : top left;
}

#splash-logo {
  background-image    : url(img/splash-logo.png);
  background-position : center;
}

如您所见，主题 css 未包含在 appcache 中，因为实际应用程序 URL 可能随时更改，因此应始终从网络提供服务。

问题是当我在服务器上启用 SSL 时根本没有加载 CSS 文件。如果我使用 HTTP 或者将 CSS 及其图像放入清单中，它工作正常。请注意，这仅在 Mobile Safari 上复制。（我有 iOS 6.1 的 iPad3）。

重现步骤如下：

  1. 在 iPad 上的 Safari 中打开测试页面
  2. 一切正常
  3. 完全关闭 Safari，使其不会最小化，而是实际关闭。
  4. 打开 Safari。
  5. 现在它将尝试使用我们的测试页面恢复上次打开的选项卡，并且这里的 CSS 无法加载。

所以基本上我什至没有得到“混合内容警告”——它只是默默地无法加载。

起初我认为证书有问题，但一旦我删除清单属性，一切正常。

几天来试图找到解决方案，但我尝试的一切都不起作用，所以我决定在这里问。任何想法如何解决这个问题？

更新 1：这适用于 iOS 的 Chrome 23.0.1271.100

更新 2：向 Adob​​e 报告错误并暂时关闭 appcache

4

0 回答 0