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".
Problems / Solutions
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.
Examples:
See also:
-
https://jimmywarting.github.io/native-file-system-adapter/example/test.html
Instead of just file upload and download, if supported, this provides the ability to
- Get permission from the user for the site to access a folder
- Get files from that folder into the browser
- Save files from the browser into that folder.
+
-
https://eligrey.com/demos/FileSaver.js/
Save data created in a web page, including images and rich text / SVG+
-
https://jsfiddle.net/ourcodeworld/rce6nn3z/2/
Cause the browser to download a file with content created in the web page.
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);
+
-
-
http://motyar.blogspot.com/2011/09/handling-html5-application-cache-with.html
One unexpected problem with appcache is that if the web page changes on the
server, that change will not be seen on the remote device unless the appcache
itself is refreshed. On Chrome, you can manage the appcache at
chrome://appcache-internals/.
Web apps can offer updates when the appcache changes on the server by inserting
the following Javascript on the main page:
// 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+
-
http://blog.pamelafox.org/2012/05/triggering-numeric-keyboards-with-html5.html
When providing a field to input numbers, SmartPhones can be told to automatically
display a number key pad when the field is selected, but specifying
<input type="number">. iOS devices may add commas and remove
leading zeros. To further specify the precision of the input, add e.g.
step="0.01". To future proof, also add pattern="[0-9\.]*".
type="tel" will trigger help with entering a phone
number.+
-
http://ofps.oreilly.com/titles/9780596805784/ "Building
iPhone Apps with HTML5" by Jonathan Stark. A great little eBook from O'Reilly
that shows how a standard HTML page can slowly become more and more like
an iPhone app until the differences are
erased.
-
http://www.codeproject.com/Articles/820391/A-Very-Simple-Example-of-HTML-OFFLINE-Database-ind
Database management in the browser. Data stays at the client browser (of
course it can be sent back and forth to the server if desired).
http://techbrij.com/sync-offline-html5-indexeddb-aspnet-web-api
Syncing HTML5 IndexDB of multiple clients with central server SQL. Written
as an ASP.NET MVC project.
-
http://www.jqtouch.com/ Enables easy
conversion / formatting of web pages and apps to smartphones and tablets.
-
http://phonegap.com/ PhoneGap is an HTML5
app platform that allows you to author native applications with web technologies
and get access to APIs and app stores. Allows access to some phone hardware
such as geolocation, accelerometers, and compass.
-
http://www.gwtproject.org/overview.html?csw=1
Google Wet Toolkit (GWT) allows Java applications to be compiled into HTML5
web applications.
"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年9月1日 21:35,
©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://techref.massmind.org/techref/language/html/HTML5webapps.htm"> HTML 5 Web Apps</A>
Did you find what you needed?
Welcome to massmind.org!
Welcome to techref.massmind.org!
.