Скачать файлы HTML локально в приложении Hybrid
В нашем гибридном приложении нам нужно поддерживать HTML локально внутри нашего приложения. Эти HTML-коды должны обновляться локально после их изменения на размещенном сервере. каким должен быть подход для достижения этой цели?
5 ответов
Если вы обрабатываете файлы HTML в своем мобильном приложении на устройствах Android или Iphone, вам необходимо обратить внимание на следующие факторы.
1. Обработка данных - лучший способ проанализировать данные и отобразить их на экране устройства.
Предполагая, что ваш HTML-файл имеет 1000 узлов, и каждый узел будет иметь 10 подузлов. Теперь вы пытаетесь получить значение, основанное на ключе в 800-м узле. Теперь, что происходит, парсер читает каждый из 1-800 узлов, прежде чем найти значение поиска. Это создаст очень плохой пользовательский опыт.
Чтобы избежать этого, для мобильного приложения Android используйте формат файла JSON, а для устройств iOS - формат файла PLIST.
Поскольку вы нацелены на гибридное приложение, оно может работать как на устройствах Android, так и на устройствах iPhone. Итак, на сервере создайте конверсионную математику и соответствующим образом отобразите соответствующие файлы на устройстве.
2. Загрузка данных - что нужно запомнить, пока ваше приложение синхронизируется с сервером для обновления файлов HTML.
Использование батареи - если ваше приложение будет регулярно подключаться к серверу, чтобы увидеть, есть ли какие-либо обновления в файлах HTML, это очень сильно повлияет на батарею устройства, и использование приложения в сети будет высоким.
Подход, который я бы порекомендовал, заключается в том, что ваш сервер должен отправить сообщение приложению, если в файлах есть какие-либо обновления. На основании этого пользователь может выбрать обновить приложение.
Что нужно сделать перед началом синхронизации файла.
Текущий уровень заряда батареи устройства следует проверить перед началом синхронизации данных с сервером.
Состояние сети должно быть проверено. Обновление должно произойти, если устройство подключено к Wi-Fi.
В зависимости от местоположения пользователя и отметки времени вы можете выполнить синхронизацию, когда телефон не используется пользователем.
Как насчет наличия временной метки с последним доступным обновлением, проверяющей ее каждый раз, когда приложение запускается, и, если она новее, чем последнее выполненное обновление, повторно загружайте файлы HTML? Это, конечно, может быть расширено для выполнения для каждого файла или для каждого каталога вместо того, чтобы повторно загружать только измененные файлы.
- Вы можете загрузить с локальной веб-страницы (например, веб-страницы в папке ресурсов вашего проекта), поэтому в проекте вы должны создать файл html/index.html.
- Этот код имеет две кнопки локальной и удаленной страницы
Html файловый ресурс должен иметь детали ниже
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Google</title>
<meta name="description" content="">
<meta name="author" content="">
</head>
<body>
<h1>Hello there</h1>
<p>Welcome to this webpage</p>
</body>
</html>
Подробности файла app.js ниже
var win = Titanium.UI.createWindow({
title:"Loading Local and Remote Web Pages",
backgroundColor:"#FFFFFF",
});
var loadLocalButton = Titanium.UI.createButton({
title:"Load local",
height:36,
width:100,
bottom:12,
left:12
});
var loadRemoteButton = Titanium.UI.createButton({
title:"Load remote",
height:36,
width:100,
bottom:12,
right:12
});
var webView = Titanium.UI.createWebView({
top:0,
left:0
});
loadLocalButton.addEventListener("click", function(e){
//You can load from a local webpage (e.g. a webpage in the Resources folder of your project)
webView.url = "html/index.html";
//or you can load an HTML-formatted string
webView.html = "<h1>This is from a string</h1><p>Yes, it is</p>";
});
loadRemoteButton.addEventListener("click", function(e){
webView.url = "http://www.google.com";
});
win.add(webView);
win.add(loadLocalButton);
win.add(loadRemoteButton);
win.open();
Вы можете загрузить любой HTML-контент или файл внутри WebView.
Используя метод loadDataWithBaseURL(), вы можете загрузить любые данные HTML:
//read html data from any file or resource
String HTML = "<html><head><title>TITLE</title></head><body><center><b>MY BODY</b></center></body></html>";
//load HTML inside webview
webView.loadDataWithBaseURL(null, HTML, "text/html", "utf-8", null);
Вы также можете загрузить данные прямо из файла:
File htmlFile = new File(Environment.getExternalStorageDirectory() + "page.html");
webView.loadUrl("file:///" + htmlFile.getAbsolutePath());
или из папки ресурсов:
webView.loadUrl("file:///android_asset/pageInAssets.html");
Вы можете получать обновленные данные (и сохранять их локально) периодически с вашего сервера или каждый раз, когда пользователь получает подключение к Интернету.
Мой опыт работы с гибридными приложениями: я люблю их. Я столкнулся со многими выпущенными и исправил почти все из них.
Это то, что мне нравится делать, когда я сталкиваюсь с ситуацией, когда мне нужен сервер или база данных, которая используется более чем на одном устройстве.
меры
- Написать веб-приложение
- Разместите веб-приложение на дешевом сервере, таком как Heroku, который я использую бесплатно
- Запустите веб-сервер
- В гибридном приложении сделайте так, чтобы гибридное приложение имело только одну функцию - IFRAME, которая ссылается на ваш веб-сервер.
Что вы достигнете, сделав это:
- Веб-сервер, который работает 24/7, и вам не нужно беспокоиться о нагреве сервера или о чем-либо
- Бесплатный веб-сервер
- Ваше приложение будет занимать меньше места на устройстве, потому что все в облаке
- Загрузка вашего приложения займет меньше времени
- Вы можете сделать кеш вашего приложения
.htmlфайл на клиент, чтобы они могли просматривать страницу позже без подключения к сети. - Если вы правильно кэшируете файлы, каждый раз, когда вы подключаетесь к wifi и просматриваете страницу.html, он должен проверить сервер на наличие новой версии файла html.