Кордова
Для веб-разработчиков использование Cordova было естественным выбором.
Я решил задокументировать эту обработку, потому что мне понадобилась неделя, чтобы все заработало.
Шаги
Резюме
- Открыть размещенное приложение без локального кеша
- Доступ к плагинам в размещенном приложении
- Работа с файлами; с устройства на веб-просмотр
1) Открыть размещенное приложение без локального кеша
Чтобы приложение указывало на веб-приложение, можно просто изменить config.xml:
<content src="http://YOUR-DOMAIN/index.html" />
Но таким образом, когда приложение загружается, оно кэширует все страницы на устройстве. Если мы изменим что-то в веб-приложении, это не изменится в устройстве, только если мы очистим кеш приложения.
Чтобы обойти эту первую проблему, мы использовали плагин com.tiltshiftfocus.cordova.plugin.clearCache.
В Баше:
cordova plugin add com.tiltshiftfocus.cordova.plugin.clearCache
- 2) Создайте простой
script.js:
Скрипт:
var URL = "http://YOUR-DOMAIN/index.html?platform="
var app = {
initialize: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
var targetUrl = URL + cordova.platformId;
function cb(){
window.location.replace(targetUrl);
}
window.cache.clear(cb, cb);
}
};
app.initialize();
Обратите внимание, что мы передаем переменную platform в основной URL. Мы будем использовать эту переменную позже в веб-приложении.
- 3) Создайте простой
index.html для загрузки script.js:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: cdvfile: http://YOUR-DOMAIN/ https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<title>TITLE</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
- 4) Обновите
config.xml, чтобы он указывал на index.html:
Конфиг.xml:
<content src="index.html" />
2) Доступ к плагинам в размещенном приложении
Проблема использования размещенных веб-приложений заключается в том, что мы не можем получить простой доступ к плагинам, установленным в приложении. К счастью, решение простое.
После установки всех подключаемых модулей, которые вы хотите использовать, в проекте Cordova перейдите в папку платформы и скопируйте весь контент в свой проект веб-приложения.
Android
Скопируйте содержимое
Cordova_Project_Folder/platforms/android/platform_www
В ваш каталог public внутри проекта веб-приложения
Webapp_Project_Folder/public_www/android/
Веб-приложение
После копирования папки плагина вам необходимо указать ссылку на файл cordova.js.
Индекс веб-приложения.html:
<script scr="/android/cordova.js"></script>
Обратите внимание, что нам нужно указать правильную папку для правильной платформы. Затем на этом этапе мы используем переменную platform, которая ранее была предоставлена размещенному веб-приложению. Я не буду вдаваться в подробности этого процесса.
3) Работа с файлами; с устройства на веб-просмотр
На данный момент у нас есть размещенное веб-приложение и необходимые плагины. Теперь нам нужно обработать файлы, хранящиеся на устройстве.
Чтобы заставить этот процесс работать, мы в конечном итоге используем следующие шаги:
- Получить полный URL файла.
- Преобразование полного URL-адреса в
cdvfile://.
- Используйте
cdvfile:// в веб-приложении.
- Преобразуйте любой URL-адрес в
Blob.
1) Получить полный URL-адрес файла.
Практически любой доступный плагин, который создает или читает файлы (камера, аудио и т. д.), возвращает полный URL-адрес.
<сильный>2. Преобразовать полный URL в cdvfile://.
Подключаемый модуль камеры cordova-plugin-media-capture возвращает объект MediaFile, который уже содержит cdvfile:// путь: fullPath атрибут.
Но в некоторых случаях вам нужно преобразовать полный путь, например. с file:///Pictures/image.jpg по cdvfile://localhost/image.jpg. Вы можете добиться этого, используя метод resolveLocalFileSystemURL из cordova-plugin-file.
Скрипт:
function getCDVFromFullURL(fullURL, callback){
window.resolveLocalFileSystemURL(fullURL, gotFile, callback);
function gotFile(fileEntry) {
callback(null, fileEntry.toInternalURL());
}
};
getCDVFromFullURL('file:///Picture/image.jpg', function(err, cdvUrl){
cdvUrl === 'cdvfile://localhost/image.jpg'; // example!!!
});
<сильный>3. Используйте cdvfile:// в веб-приложении.
Одной из проблем были файлы ссылок в тегах веб-приложений. Фрагмент ниже не работал.
<img src="cdvfile://path/image.jpg" />
Для работы нам нужно обновить config.xml с помощью:
<access origin="cdvfile://*" />
Примечание. Если вы используете AngularJS, вы должны внести в белый список протокол cdvfile://:
.config(['$compileProvider', function( $compileProvider ){
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|file|blob|cdvfile):|data:image\//);
}]);
<сильный>4. Преобразуйте любой URL-адрес в Blob.
Вся цель этого усилия состоит в том, чтобы отправить ресурс на сервер. Нам нужен объект Blob для добавления в FormData. Мы все еще можем использовать resolveLocalFileSystemURL для этого.
function getBlob(anyUrl, callback){
window.resolveLocalFileSystemURL(anyUrl, gotFile, callback);
function gotFile(fileEntry) {
fileEntry.file(readFile);
}
function readFile(file){
var reader = new FileReader();
reader.onloadend = function(e) {
callback(null, new Blob([ this.result ], { type: file.type } ));
};
reader.readAsArrayBuffer(file);
}
}
getBlob('file:///Picture/image.jpg', function(err, blob){
// formData.append('imagem', blob, 'iamge name');
}
Заворачивать
Теперь у нас есть:
- доступ к любым медиа с устройств
- возможность отображать любые локальные медиа в нашем размещенном веб-приложении
- инструменты для преобразования этого локального носителя и загрузки, а затем через веб-приложение
Надеюсь, этот пост сэкономит время.
person
raphaelbs
schedule
28.09.2017
