Loading...
Offline / Storage
Expect the unexpected
Application Cache
<html manifest="cache.appcache">
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
}
}, false);
cache.appcache:
CACHE MANIFEST # version 1.0.0 CACHE: /html5/src/logic.js /html5/src/style.css /html5/src/background.png NETWORK: *
Turn off your internet connection and refresh this page!
Realtime / Communication
Stay connected
Web Workers
var worker = new Worker('task.js');
worker.onmessage = function(event) { alert(event.data); };
worker.postMessage('data');
task.js:
self.onmessage = function(event) {
// Do some work.
self.postMessage("recv'd: " + event.data);
};
Loading Route...
Try dragging the map while the complex route is being calculated (you will only be able to do that with Workers!)
WebSocket
var socket = new WebSocket('ws://html5rocks.websocket.org/echo');
socket.onopen = function(event) {
socket.send('Hello, WebSocket');
};
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert('closed'); }
Full-duplex, bi-directional communication over the Web: Both the server and client can send data at any time, or even at the same time. Only the data itself is sent, without the overhead of HTTP headers, dramatically reducing bandwidth.
Use the echo demo below to test a WebSocket connection from your browser.
Both the message you send and the response you receive travel over the same WebSocket connection.
Location:
Message:
Output:
Demo powered by 
File / Hardware Access
Deeper integration with the Operating System
Native Drag & Drop
document.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text', 'Customized text');
event.dataTransfer.effectAllowed = 'copy';
}, false);
- Select text and drag (original text will be dropped)
- Select text and drag (dragged text data will be altered from original)
Source Data
Drop Area
Geolocation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latLng = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
var marker = new google.maps.Marker({position: latLng, map: map});
map.setCenter(latLng);
}, errorHandler);
}
Device Orientation
window.addEventListener('deviceorientation', function(event) {
var a = event.alpha;
var b = event.beta;
var g = event.gamma;
}, false);
This sample requires FF3.6+ or Google Chrome on a device with a built in accelerometer or iOS 4.2.
Semantics & Markup
More meaningful elements
Microdata
<div itemscope itemtype="http://example.org/band"> <p>My name is <span itemprop="name">Neil</span>.</p> <p>My band is called <span itemprop="band">Four Parts Water</span>.</p> <p>I am <span itemprop="nationality">British</span>.</p> </div>
Form field types on mobile
type="text"
type="number"
type="email"
type="tel"
Graphics / Multimedia
2D & 3D
CSS3
Presentation & Styling
Nuts & Bolts
Improvements to the core platform
