У нас довольно сложный JS Webapp, который по-разному загружает различные ресурсы (HTML-шаблоны, дополнительные файлы JS/CSS, данные JSON, изображения, видео, звуки) по-разному (string, arrayBuffer, base64, binary) в Интернете в браузере ( просто не прочитав ни одной записи). Теперь мы хотели бы внести в него изменения, чтобы все работало автономно (включая ресурсы) на разных платформах в качестве мобильного приложения Cordova.
Проблема №1 - загрузка файлов из локальной файловой системы
Он обращается к XHR-запросам для локального файла://ресурсы работают везде но с Chrome, который теперь является стоп-шоу, поскольку Android внутренне переходит к Chrome.
Хорошо, осталось еще 2 варианта:
- fake-load все в JSONP с тегами script, HTML с iframe и т.д. - это не очень хороший вариант, потому что он требует изменений самих ресурсов + своего рода хакки, и это требует от нас большой функциональности (строковая загрузка только для JS/HTML, arrayBuffer, двоичная и т.д.)
- используйте API файлов
Plain vanilla File API, к сожалению, всегда требует взаимодействия с пользователем (например, щелчок на поле ввода), чтобы получить ссылку на файл, а IE10 - нет-нет. Хорошо, поэтому единственный вариант - использовать настраиваемый плагин API файлов для PhoneGap - который приносит нам следующую проблему.
Проблема №2 - (кросс-платформенный?) путь к файлам в PhoneGap
Мне нравится PhoneGap CLI - вы вводите несколько команд в терминал, и он управляет файлами и сборками для разных платформ для вас. Или это?
Насколько я могу судить по PhoneGap, вы должны поместить все в папку WWW - однако (как только вы создаете приложение), сумасшедшая вещь - нет простого способа прочитать эти файлы (через File API), откуда их поставляет PhoneGap.
Вы думаете, что fileSystem.root (LocalFileSystem) указывает на эту папку, но по крайней мере на iOS папка WWW находится внутри вашего приложения, но ссылка fileSystem.root указывает на внешнюю папку Documents (все еще нужно проверить это на Android, но я угадываю его снова что-то другое).
После немного возиться я выяснил, как добраться до папки WWW, но ее негибкой, взломанной и кажется, что она не должна работать (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 во внешнюю папку "Документы", но:
- загрузите 50-мегабайтное приложение, а затем внутренне скопируйте 40mb его ресурсов в другую папку только для того, чтобы его можно было получить правильно, не кажется мне подходящим.
- Документирует собственно корневую папку (на iOS)?
Проблема №3 - лучший способ организовать локальные ресурсы в PhoneGap?
Так почему же /Documents корневой файловой системы в PhoneGap вообще? Согласно Руководство по программированию файловой системы Apple Папка с документами может даже не подойти к чему-то подобному. Похоже, что документы должны использоваться только для контента, созданного пользователями, и файлы/ресурсы данных приложения должны фактически переходить в папку "/Library". Это, между прочим, важно, поскольку некоторые приложения, похоже, отвергаются Apple за то, что они делают это неправильно + это также, конечно, влияет на резервные копии iTunes/cloud.
Итак, теперь, когда мы установили все это:
- Как вы правильно структурируете локальные файлы/ресурсы в PhoneGap?
- где/как я размещаю наши ресурсы (JS, JSON, HTML, CSS, media и т.д.), чтобы их можно было скопировать/установить в соответствующую папку для каждой платформы (например,/Library или ok even/Documents on iOS - но не остается встроенным в приложение). И, конечно же, для других платформ.
- как получить доступ ко всем из них должным образом и кросс-платформенный?
- (вопрос стороны) - это cordova.js действительно нужно? мы очень усердно работали над тем, чтобы исключить внешние библиотеки и ванильную оптимизацию производительности, поэтому я не слишком сумасшедший, включая другой, чтобы снова принимать события и разные вещи. Я понимаю, что здесь могут быть некоторые внутренние перехватчики - но, может быть, мы могли бы просто включить себя в то, что нам нужно?
Это оказалось более сложным, чем я.
И сколько бы я ни старался, и я ценю усилия, которые многие люди вложили в PhoneGap - мой разум продолжал рисовать параллели между всем этим нелогичным кросс-платформенным поведением и войнами в браузере десять лет назад. На мой взгляд, помимо отображения полноэкранной кросс-платформы браузера приложений, самая важная функция PhoneGap - это простой способ доступа к локальным файлам и ресурсам.
Любые лакомые кусочки знаний и обратной связи всегда приветствуются!
