Description
Support for HTML5 app cache (using manifest) for Titanium's webview for Android.
Test case
The test case needs a client and a server. Once the files are created, follow these steps:
be sure the device is online, then open the app: you would see 2 images in the webview
turn off network on the device
hit reload in the app: only one image should be shown (the first) as it is the only one cached
Test code
Client side
app.js
var win = Ti.UI.createWindow({
backgroundColor: 'white'
});
var web = Ti.UI.createWebView({
url: 'http://example.com/index.html',
left: 0,
right: 0,
top: 0,
bottom: 100
});
var btn = Ti.UI.createButton({
title: "Refresh",
bottom: 0
});
btn.addEventListener('click', function() {
web.reload();
});
win.add(btn);
win.add(web);
win.open();
Server side
example.manifest
CACHE MANIFEST
v1 - 2011-08-13
http://example.com/index.html
http://example.com/image.php
index.html
<html manifest="example.appcache">
<head>
<body>
<img src="image.php" />
<img src="imagenocache.php" />
</body>
</html>
image.php and imagenocache.php
<?php
// make sure the file is not cached
header("Content-Type: image/jpg");
header("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
header("Expires: Sat, 26 Jul 1997 05:00:00 GMT");
echo file_get_contents("image.jpg", "r");
It also appears that the AppCache is not enabled by default: http://stackoverflow.com/questions/12709673/application-cache-in-html5-doesnt-work-in-android-phonegap-application
Added support for appCache https://github.com/appcelerator/titanium_mobile/pull/4661
If you don't want to setup the server, use the following code which uses server url that is already setup to use HTML5 caching var win = Ti.UI.createWindow({ backgroundColor: 'white' }); var web = Ti.UI.createWebView({ url: 'http://www.w3schools.com/html/tryhtml5_html_manifest.htm', left: 0, right: 0, top: 0, bottom: 100 }); var btn = Ti.UI.createButton({ title: "Refresh", bottom: 0 }); btn.addEventListener('click', function() { web.reload(); }); win.add(btn); win.add(web); win.open();