It's amazing what you can do with HTML / JavaScript / CSS across many platforms these days. SmartPhones, Tablets, PC's, etc... all provide browsers that can do more or less the same things. Local datastorage, animation, scripting, AJAX, and other technologies are becomming almost consistant over a wide range of devices. ChromOS is a logic extension of this idea, but even on other platforms, there is a drive for web apps to "just work".
By using the manifest="file.appcache" parm in the <HTML> tag (e.g. <HTML manifest="/js/taps.appcache"> ), files needed by a web page including scripts, images, css, etc... can be stored locally in the device, removing the need to access the server. The page becomes a local app. The .appcache format can be as simple as
CACHE MANIFEST /dir/file.ext /file2.ext
For example, the tap and die calculator web app has this manifest:
CACHE MANIFEST /techref/taps.asp /js/phone.css
Which causes it's main page, taps.asp, (or rather the HTML generated by that .asp page) to be saved locally, along with a special .css file which re-formats the page to better fit smaller cell phone screens and appear more "app like".
Hardware Access to hardware is difficult on many systems. On the SmartPhones, some hardware is accessable as a sub-object of the navigator object in the browser. On PC's, other drivers must be installed to allow access to anything outside the browsers "sandbox". The most common example of this is access to web cams via Adobe FLASH.
Hardware access drivers:
Cross browser Basically, it boils down to this: Internet Explorer sucks. Most other browers do most things the same; IE is in it's own world. JQuery and other libraries may help to remove the differences.
See also:
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
+
// on page load.
window.addEventListener('load', function(e) {
//Check if a new cache is available
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
// Swap it in and reload the page to get the new version.
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new yet.
}
}, false);
}, false);
Note: To trigger the update, the .appcache file, not the .html page, must change. After changing the page, just edit a comment (perhaps include a datecode or version number?) in the .appcache file. Comments start with '#'. e.g. #version 1.2+
"Intro to Automation - Living beyond yourself." by James Newton. Writing HTML and publishing Web Pages to automate answers, Forms automated with JavaScript made into Apps, and Automating the Real World
Input and Output to Physical Devices from JavaScript +
Questions:
| file: /Techref/language/html/HTML5webapps.htm, 9KB, , updated: 2023/5/26 15:33, local time: 2025/4/4 14:17,
18.216.80.63:LOG IN
|
| ©2025 These pages are served without commercial sponsorship. (No popup ads, etc...).Bandwidth abuse increases hosting cost forcing sponsorship or shutdown. This server aggressively defends against automated copying for any reason including offline viewing, duplication, etc... Please respect this requirement and DO NOT RIP THIS SITE. Questions? <A HREF="http://massmind.ecomorder.com/Techref/language/html/HTML5webapps.htm"> HTML 5 Web Apps</A> |
| Did you find what you needed? |
Welcome to ecomorder.com! |
|
Ashley Roll has put together a really nice little unit here. Leave off the MAX232 and keep these handy for the few times you need true RS232! |
.