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

Question

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

---

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

它使XHR对本地file://资源的请求在任何地方都能正常工作,但由于Android正在向Chrome内部过渡,因此Chrome现在是一个显示阻止器.

好的,还剩下2个选项:

1. 假装JSONP中的所有内容都带有脚本标签,带有iframe的HTML等等 - 这不是一个非常好的选择,因为它需要更改资源本身+它的hacky并且它会花费我们很多功能(仅限字符串加载) JS/HTML,arrayBuffer,二进制等)
2. 使用File API

遗憾的是, 普通的vanilla File API 总是需要用户交互(比如点击输入框)来获取文件引用加上IE10是禁止的.好的,所以唯一的选择是为PhoneGap 使用自定义的File API插件 - 这给我们带来了下一个问题.

---

问题#2 - (跨平台？)文件路径在PhoneGap中

我喜欢PhoneGap CLI - 你在终端输入一些命令,它为你管理不同平台的文件和构建.或者是吗？

据我所知,根据PhoneGap你应该把所有东西放在WWW文件夹中 - 但是(一旦你构建应用程序),疯狂的事情是 - 没有简单的方法来读取这些文件(通过File 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文件夹,但是:

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

---

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

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

---

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

• 如何在PhoneGap中正确构建本地文件/资源​​？
• 在哪里/如何放置我们的资源(JS,JSON,HTML,CSS,媒体等),以便可以将它们复制/安装到每个平台的适当文件夹(例如/ Library或ok even / iOS上的文档 - 但是不是应用程序内部).当然也适用于其他平台.
• 如何正确和跨平台访问所有这些？
• (附带问题)是cordova.js真的需要吗？我们一直很努力地排除外部库和vanilla优化性能,所以我不会太疯狂包括另一个再次接管事件和不同的东西.我意识到这里可能有一些内部钩子 - 但也许我们可以把自己包含在我们需要的东西中？

事实证明这比我更复杂.

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

任何花絮的知识和反馈总是非常感激!

Answer 1

我不认为你所说的 chrome 安全限制适用于 webview 或 cordova 应用程序（它们不是特定于 chrome 的，而是适用于任何现代浏览器）。

我已经测试过使用jquery ajax函数从phonegap应用程序中www文件夹内的文件加载资源（json文件、javascript文件或html模板），它适用于android 2.3、4.0.4、4.1.2和4.4.2在 Nexus 5 上（因此使用新的 chrome webview）。