HTML5 is a pretty huge undertaking to learn. So much is being added to the web that has been sorely required by web developers for a long time. Since the specification is so big, many features can easily be missed or thrown to the side by the community at large.
Web Notifications
Desktop and mobile applications have had notifications for a very long time. The reason this has never been implemented in a web application is because the browser was seen as the primary application. Nowadays, however, applications in the web browser are becoming replacements for their desktop counterparts. With HTML5 we can finally have system notifications which appear outside the browser. These are currently only available in Chrome (realistically), but are still pretty awesome. In Mountain Lion they appear in the new notification panel, and in other operating systems they appear as you would expect.
Implementing Web Notifications is pretty easy. They are opt in, so we don’t end up with a bunch of websites misusing them. Therefore, we need to first allow the notifications, and then we can run them whenever we want.
// This runs a notification should notifications be activated
function setNotification() {
// If the permission isn't set, alert the user to click the activate button
if (window.webkitNotifications.checkPermission() != 0) {
alert('Activate Notifications First!');
return false;
}
// Otherwise run the notification
window.webkitNotifications.createNotification('http://www.html5canvastutorials.com/blog/favicon.ico', 'Notification Title', 'This is a bit of text describing the notification').show();
}
// Request permission for notifications
function AllowNotification() {
window.webkitNotifications.requestPermission(function() { }); // Callback so it will work in Safari
}
Next we just have to make these run when the user clicks on an anchor:
<a id="activate" onclick="AllowNotification(); return false;" href="#">Activate Notifications</a> <a onclick="setNotification(); return false;" href="#">See Notification</a>
Try it yourself! Click the activate button, and then click show notification (remember, you have to be using chrome).
Activate Notifications
See Notification
Local Storage
Local storage is simply things that are stored on the users computer which have no expiration date. It’s pretty easy to use, too. Previously we would’ve had to juggle with cookies and sessions on the user side of things. Local storage is pretty easy to use and has wide support at this point. First we check if local storage is supported.
if(typeof(Storage) !== "undefined") {
// Local storage supported!
} else {
// Local storage not supported!
}
Then we can use the localStorage object to store stuff locally. This can be easily called later on in your code on other pages.
localStorage.vegetable = "potato";
Things to Remember
- Local storage is only stored on the users computer, it cannot be transfered from one computer to another like something stored on the server.
- Local storage is not a replacement for other means of storage. You could not use local storage as a cookie because cookies have an expiration date, and sometimes this is useful.
Application Caches
Applications on the web is a great idea, except sometimes you don’t have a constant internet connection. To fix this, HTML5 brings us application caches! An application cache stores the website as is described in a file called the manifest. You could then have a message which said that the application has updated when the user finally gets back to the internet. This provides a platform similar to desktop applications for web applications to work on. To do that we make the page cachable using this HTML tag:
<html manifest="cache.appcache">
Then we make a file called cache.appcache to store all the cache stuff in. This has to be served with a particular mime type, so open up your .htaccess file and add this line:
AddType text/cache-manifest .appcache
The Cache File
Now we need to update the cache file so we know which files are to be cached and which are not. Open up your cache file and add the following:
CACHE MANIFEST # The files here are the ones which will be cached. CACHE: /favicon.ico index.html style.css script.js # The files here are files which require an internet connection # Users will not be able to access these files. By using the # asterisk we are telling that all content on a page should be # cached along with the page. NETWORK: * # The first file is the file you wish to use. Should that file # be unaccessible you will receive the second file instead. The # code below means that if an html file is unaccessible, the user # will receive an offline page instead. FALLBACK: *.html /offline.html
Edit the files as you see fit to suit your own needs.
Things to Remember
- If you use a cache like this, the page will be loaded from the cache every time. The page will only be loaded differently if you change the cache file. You can just alter a comment and it will update
- You can use the cache in tandem with local content to create some pretty cool results
File Reading
With HTML5 its possible to get the information in a file and manipulate it on the web. I decided to use jQuery for this one, since it makes the process a little easier. We’re going to use the drag and drop HTML5 feature to accomplish this.
$(document).ready(function() {
// Makes sure the dataTransfer information is sent when we
// Drop the item in the drop box.
jQuery.event.props.push('dataTransfer');
// Bind the drop event to the dropzone.
$('#dropzone').bind('drop', function(e) {
// Stop the default action, which is to redirect the page
// To the dropped file
e.stopPropagation();
e.preventDefault();
// Remove any HTML that was previously in the dropbox.
$(this).html('');
// For every file, run this function.
$.each(e.dataTransfer.files, function(index, file) {
// Start a new instance of FileReader
var fileReader = new FileReader();
// When FileReader loads, run this function
fileReader.onload = (function(file) {
return function(e) {
// Place the image inside the dropzone
var image = e.target.result;
$('#dropzone').append('<img src="'+image+'" alt="" width="100" height="100" />');
};
})(file);
fileReader.readAsDataURL(file);
});
});
});
And then we have a dropzone:
<div id="dropzone"> </div>
Try it out!
Support
| Webkit | Gecko | Trident | Presto | |
| Web Notifications | Yes | Only Fennec | None | None |
| Local Storage | Yes | Yes | Yes | Yes |
| File Reading | Yes | Yes | 10.0 | Yes |
| Application Caches | Yes | Yes | 10.0 | Yes |
