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.
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.
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.
<html manifest= "game.manifest" >
<head> <title> Cool Game</title>
And now you know the basics of the Offline API.