Offline API
More and more people are experiencing the web in motion, either with their mobile phones as they are walking down the street or their laptops or iPads while riding a commuter train. This increase the likelihood of them experiencing some sort of disruption to their connectivity. They could encounter a sudden reduction in bandwidth and a slowing of their web experience. They could also lose connection altogether if they enter a network’s “dead zone.” Anyone developing a website has to take this aspect of the user’s experience into consideration. HTML5’s new standards make it easier for web developers to create a seamless web experience, even using the Offline API.
The Offline API, allows you to create websites that give your users a continuous experience even when they are disconnected or unable to reach your server.
When your user is connect to your server, he or she has access to all the files that make up your website, which could include, images, html pages, CSS files and JavaScript files. When your user loses connection they no longer have access to those files and therefore your website. Browsers that implement HTML5’s Offline API can create a seamless experience by downloading some of those files and storing them locally. This way even if your user gets disconnected they can still continue to experience the website thanks to those downloaded files.
Here is how it works:
The Cache Manifest
A cache manifest is a file that tells the browser what files to download and store locally. It is a simple text file. The files are listed under specific categories also known as namespaces. The default category is CACHE, and if it isn’t stated, all the files listed are assumed to be under this category. The NETWORK category lists files that are NOT to be cached, or not to be downloaded. The FALLBACK category lists files with offline alternatives. This means, there are two different versions of specific file, an online version and an offline version.
Let us look at an example of a Cache Manifest for a game. Your Cache Manifest must include all of the files that are needed to keep your game going even when it is offline. These files will be listed under CACHE.
Now suppose the online version of the game has a multiplayer feature. But, there is no reason to make this feature available in the offline version of the game because your user is not connected. Therefore there is no reason to download the multiplayer.php file, need to implement this feature. We will list this under NETWORK.
Finally since the multiplayer feature is disabled in the offline version, we have to swap out the JavaScript file that activates the feature in the game with another one that tells the user that the feature has been disabled. In our example, the multiplayer.js file will be replaced by the fallback_multiplayer.js file which tells the user that the feature is disabled in the offline version. Both multiplayer.js and fallback_multiplayer.js files will be listed under FALLBACK.
CACHE MANIFEST
CACHE:
game.css
game.js
game_image.png
game.html
FALLBACK:
multiplayer.js fallback_multiplayer.js
NETWORK:
multiplayer.php
This file is saved as game.manifest.
Now we need to add a reference to the manifest in the actual html file. All you have to do is add the manifest attribute to the <html> element. When you user first encounters the webpage game.html, their browser will download all the files listed in game.manifest.
<!DOCTYPE HTML>
<html manifest= "game.manifest" >
<head> <title> Cool Game</title>
</head>
<body>
</body>
</html>
And now you know the basics of the Offline API.