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

Question

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

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

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

我不确定如何缓存我需要的内容。这是我的缓存 list :

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/ ，它是创建应用所需的 list 文件的绝佳工具。

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

您的 list 文件应该类似于:

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:
*