In our hybrid app we need to maintain HTML locally inside our app. These HTMLs have to be refreshed locally once they get changed in the hosted server. what should be the approach to achieve this ?
Download HTML files locally in Hybrid app
2.4k Views Asked by sij At
5
There are 5 best solutions below
0
On
My background with Hybrid apps: I love them. I have encountered many issued and have fixed almost all of them.
This is what I like to do when I encounter a situation where I need a server or database which is used on more than one device.
Steps
- Write you web app
- Host the web app on a cheap server like Heroku which I use for free
- Run the web server
- In your hybrid app, make the hybrid app only have one feature which will be an IFRAME which links to your webserver
What you will achieve by doing this:
- A webserver which is running 24/7 and you don't have to worry about the server heating or anything
- Free webserver
- Your app will take up less space on the device because everything is on the cloud
- Your app will take less time to download
- You can make your app cache the
.htmlfile onto the client so that they can view the page later without a network connection. - The if you cache the files properly, everytime you connect to wifi and view the .html page, it should check the server for a new version of the html file.
Hope this helps =) =P
0
On
You can load any HTML content or file inside a WebView.
Using the method loadDataWithBaseURL() you can load any HTML data:
//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);
You can also load data directly from a file:
File htmlFile = new File(Environment.getExternalStorageDirectory() + "page.html");
webView.loadUrl("file:///" + htmlFile.getAbsolutePath());
or from the assets folder:
webView.loadUrl("file:///android_asset/pageInAssets.html");
You can fetch the updated data (and store it locally) periodically from your server or every time the user gets internet connectivity.
0
On
If you are handling the HTML files in your mobile application in android or iphone device, you need to pay attention to the below factors.
1. Data Handling - Best way to parse the data and render it on device screen
Assuming your HTML file has 1000 nodes and each node is going to have 10 sub nodes. Now, you try to fetch a value based on the key in 800th node. Now what happens is, the parser reads each of the 1 to 800 nodes before finding the search value. This will create a very bad user experience.
To avoid this, for android mobile application, use JSON file format and for iOS devices, use PLIST file format.
Since you are targeting a hybrid application, it might run on both android and iphone device. So, in server, create the conversion math and render appropriate files to the device accordingly.
2. Data Loading - Things to remember while your application syncs up with server to update the HTML files.
Battery Utilization - If your application keeps hitting the server at regular interval to see if any update on the HTML files, it would impact the device battery very high and the network utilization of the application will be high.
Approach i would recommend is, your server should push a message to the application if there is any update on the files. Based on that user can choose to update the application.
Things to do before starting the file sync up.
Current battery level of the device should be checked before starting the data sync up with server.
Network state should be checked. Upgrade should happen if the device is connected to wifi.
Based on the user location and time stamp, you can choose to perform the sync up when the phone is not used by the user.
0
On
- You can load from a local webpage (e.g. a webpage in the Resources folder of your project) so into the project you should create a file html/index.html
- This code have two button local and remote page
Html file resource should have details below
<!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 file details below
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();
What about having a timestamp with the latest update available, checking this each time the app starts and if it's newer than the latest update performed then re-download the HTML files? This can of course be extended to be performed on a per-file or per-directory basis instead to re-download only the changed files.