加载静态资源（图像，html，css）

Question

我们有一个相当复杂的JS webapp，可以在浏览器中以不同的方式（字符串，arrayBuffer，base64，二进制）加载不同的资源（HTML模板，额外的JS / CSS文件，JSON数据，图像，视频，声音）（只读不写）。现在，我们想对其进行更改，以使所有内容在不同平台上脱机（包括资源）作为Cordova移动应用程序。

问题＃1 - 从本地文件系统加载文件

它变为XHR请求本地文件：//资源在任何地方工作but with Chrome这是一个显示停止现在，因为Android内部过渡到Chrome。

好的，还剩下2个选项：

使用脚本标签，带有iframe的HTML等来伪装JSONP中的所有内容 - 这不是一个非常好的选择，因为它需要更改资源本身+它的hacky并且它会花费我们很多功能（字符串）仅为JS / HTML，arrayBuffer，二进制等加载。）
使用文件API

简单的vanilla文件API很遗憾总是 requires user interaction（就像在输入框上点击一样）来获取文件参考和IE10是禁忌。好的，所以唯一的选择就是为PhoneGap使用自定义的File API plugin - 这会给我们带来下一个问题。

问题＃2 - （跨平台？）PhoneGap中的文件路径

我喜欢PhoneGap CLI - 您在终端中输入一些命令，它可以为您管理不同平台的文件和构建。或者是吗？

据我所知，根据PhoneGap你应该把所有东西都放在WWW文件夹中 - 但是（一旦你构建应用程序），疯狂的事情是 - 没有简单的方法来读取这些文件（通过文件） API插件）来自PhoneGap放置它们。

您认为fileSystem.root（LocalFileSystem）指向该文件夹，但至少在iOS上，WWW文件夹在您的应用中，但fileSystem.root引用是指向一个外部的 Documents 文件夹（仍然需要在Android上测试这个，但我猜它还有不同之处）。

经过一些修补后，我想出了如何进入WWW文件夹，但它不灵活，hacky，感觉它应该不起作用（目前仅限iOS）：

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem){
   fileSystem.root.getDirectory("../HelloWorld.app/www", {create: true}, function(entry) { 
      entry.getFile("test.json", {create: false}, function(fileEntry) {
         fileEntry.file(function(file){
            var reader = new FileReader();
            reader.onloadend = function(evt) {
               console.log(evt.target.result);
            };
            reader.readAsText(file);             
         }, fail);
      }, fail);
   });
}, fail);

这不是最好的方法。如果没有别的，现在JS代码现在需要能够访问WWW文件夹的应用程序名称（BTW是否有一个系统快捷方式或系统变量，这将使访问应用程序的文件夹通用？）。

但无论如何，这在其他平台上也会有所不同。

理论上我可以将图像从内部WWW文件夹“下载”到外部Documents文件夹，但是：

下载一个50mb的应用程序，然后在内部将40mb的资源复制到另一个文件夹，以便可以正常访问它对我来说似乎不合适
是 Documents 正确的根文件夹（在iOS上）？

问题＃3 - 在PhoneGap中组织本地资源的最佳方式？

那么为什么 / Documents 根本就是PhoneGap中的文件系统根？根据{{3}} Documents 文件夹甚至可能不适合这样的事情。似乎 Documents 应仅用于用户生成的内容，而app的数据文件/资源实际上应该进入'/ Library'文件夹。这是其他重要的事情，因为有些应用程序似乎被苹果公司拒绝做了这个错误+这当然也会影响iTunes /云备份。

现在我们已经建立了所有这些：

如何在PhoneGap中正确构建本地文件/资源？
在哪里/如何放置我们的资源（JS，JSON，HTML，CSS，媒体等），以便将它们复制/安装到每个平台的适当文件夹中（例如 / Library 或者甚至可以在iOS上使用 / Documents - 但不能保留app内部版本。当然也适用于其他平台。
如何正确地和跨平台地访问所有这些？
（旁边的问题）是cordova.js真的需要吗？我们非常努力地排除外部库和 vanilla 优化性能，因此我不会太疯狂地包含另一个再次接管事件和不同的东西。我意识到这里可能会有一些内部钩子 - 但也许我们可以把自己包含在我们需要的东西中？

事实证明这比我更复杂。

尽管我没有尝试过，但我很欣赏许多人为PhoneGap付出的努力 - 我的思想在十年前所有这些不合逻辑的跨平台行为和浏览器之间的战争之间保持着相似之处。在我看来，除了跨平台显示浏览器应用程序之外 - PhoneGap最重要的功能应该是访问本地文件和资源的简单方法。

任何花絮的知识和反馈总是非常受欢迎！

Answer 1

据我所知，使用cordova / phonegap时有三种方法可以将内容放在屏幕上：

对模板文件进行ajax调用，然后对$（div）.append
将所有内容都包含在index.html和show / hide
将内容内联到js文件和$（内容）.appendTo（div）

我一直在玩，看看是否有任何优势，这是我（在我的有限测试中）发现的：

首次加载时，模板具有最小的内存占用量，其次是内联js，并且包含在index.html中最高。

但是，在应用程序中导航一段时间之后，这会发生变化，并且它们大致相同（在我的测试中介于1.8到2.1 MB之间）。

对于速度，index.html是最快的，其次是内联js和模板是最慢的。但是，差异可以忽略不计，相当于数十毫秒。

老实说，除了模板似乎不适用于Windows Phone之外，这些方法之间没有任何真正的区别（可能会改变10，不知道）。我想它更像是一种编码风格的东西，而不是一种坚硬而快速的规则。虽然来自cordova / phonegap开发者的输入会很好。

Answer 2

我不认为您正在讨论针对webview或cordova应用程序的chrome安全限制（并且它们不是特定于chrome但适用于任何现代浏览器）。

我已经测试过使用jquery ajax函数从位于phonegap应用程序中的www文件夹内的文件加载资源（json文件，javascript文件或html模板），它可以在android 2.3,4.0.4,4.1.2中运行4.4.2关于nexus 5（所以使用新的chrome webview）。

Answer 3

看起来你对科尔多瓦的工作方式非常困惑。精心制作的SPA应用程序将与Cordova一起使用，只需对安全性和Cordova样板配置进行非常轻微的修改。

加载静态资源（图像，html，css）

除www位置之外，无需将这些资源放在某个位置。如果使用相对路径来发出XHR请求，Cordova XHR请求就可以正常工作。所以在www文件夹

中有这样的文件夹结构

www
|
|- css
|   |- style.css
|- js
|   |- app.js
|- html
|   |- page.html
|
|- index.html

来自index.html您可以使用

进行常规请求

$.get('page.html')

还要确保在index.html中设置了正确的内容安全策略（CSP）。例如，见下文。

动态资源

这些资源将在应用程序生命周期内发生变化。这是您应该使用File API的资源。此API不需要Cordova应用程序内的用户交互。

在Cordova File插件中，记录了每个变量如何与OS特定文件夹对齐。请参阅文档的Where to Store Files部分。

安全

Cordova的最新更改要求您在HTML中指定CSP策略，否则您将无法与外部资源进行任何通信。您可以看到HTML5 tutorial on CSP的解释，以及Cordova Whitelist plugin文档，了解如何以Cordova特定的方式配置CSP。

Answer 4

现在有几种方法可以轻松地构建和管理Cordova Web应用程序。我建议使用英特尔的XDK作为构建和构建iOS，Android和Windows手机应用程序的免费解决方案： https://software.intel.com/en-us/intel-xdk

Apache Cordova（PhoneGap）中的资源结构并从文件系统加载文件

4 个答案:

加载静态资源（图像，html，css）

动态资源

安全