HTML5 缓存 Javascript 文件以供在线和离线使用

Question

我发布了一个 问题 关于为什么我的 $.getJSON 停止了，但我认为现在问题有点广泛了。

我有一个移动 HTML5 应用程序，它可以向 php Web 应用程序（在同一域上）发出 Ajax 请求。当有互联网连接时，即。 navigator.onLine == true 我对 Web 应用程序进行 $.getJSON 调用，并将响应本地存储在设备浏览器上的 websql 数据库中。

如果 navigator.onLine == false 那么我想跳过 json 请求并在本地提取数据。我的 JSON 工作正常，并且我成功存储在离线 websql 存储中，但在添加缓存清单文件时出现了问题。

我不确定如何缓存我需要的内容。这是我的缓存清单：

CACHE MANIFEST

# rev 2

CACHE:
index.html
app.html
http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js
http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css
http://code.jquery.com/jquery-1.4.3.min.js
js/data.js 
js/script.js

我认为我假设我可以缓存来自 code.jquery.com/.. 的外部文件是正确的？因为我在线上和线下都需要它们。

Eric 在我之前的问题中发布了一个答案，说我应该在 NETWORK: 标题下添加 JS 文件，末尾带有 * 。当我这样做时，我的 JSON 调用就会像我希望的那样被触发。但是现在这些文件无法离线使用。

这似乎也有效，但是当我离线时，甚至连我的 CSS 都没有加载：

CACHE MANIFEST

# rev 2

CACHE:
index.html
app.html
js/data.js
http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js
http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css
http://code.jquery.com/jquery-1.4.3.min.js
js/script.js

NETWORK:
*

任何人都可以建议缓存 javascript/css 文件以供离线使用的最佳实践吗？

非常感谢，

比利

Answer 1

查看 http://westciv.com/tools/manifestR/，它是创建您的应用程序需要的清单文件。

AppCache 要求在清单文件中列出您想要在本地提供的所有内容，因此在这种情况下，您需要列出您的应用程序在离线体验中运行所需的所有 JavaScript、CSS 和任何其他文件。 ManifestR 将帮助您找出该列表并为您构建它。

您的清单文件应类似于：

CACHE MANIFEST
# rev 3

CACHE:
index.html
app.html
js/data.js
http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js
http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css
http://code.jquery.com/jquery-1.4.3.min.js
js/script.js
style.css
images.png

NETWORK:
*