HTML 5 Web Apps

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:

https://developers.google.com/web/updates/2016/03/access-usb-devices-on-the-web Chrome, including on Android, now allows direct access to the USB ports via WebUSB. User permission is required. See "Can I Use*"
http://www.walking-productions.com/jsserial/new/JSSerial.html Serial port access from browser javascript, via Java, via a DLL. Yike.

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:

Calculate Drill Size for Tap Diameter, TPI, and Thread depth
Resistor color code calculator
Use of an appcache and CSS to restyle the page for the smaller screen allows these web apps to work (even offline) as phone apps.

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
1. Get permission from the user for the site to access a folder
2. Get files from that folder into the browser
3. 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月28日 03:55,

^{40.74.122.252: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?

Please DO link to this page! Digg it! / MAKE!

<A HREF="http://techref.massmind.org/techref/language/html/HTML5webapps.htm"> HTML 5 Web Apps</A>

Did you find what you needed?

HTML 5 Web Apps

Problems / Solutions

Examples:

Welcome to massmind.org!

Welcome to techref.massmind.org!