Whenever you visit a page, your browser will try to update the cache. To do this, it checks your last copy of the manifest and compares it to the current manifest online. If the new manifest is even one byte different, the manifest file will begin firing events on the ApplicationCache object in order to update your files. There are several different events, and each has a pretty self explanatory name when it comes to what the event is listening for. A list of events and their meanings(as paraphrased from the W3 HTML5 specification) is as follows:
|checking||Always fired first, checks to see if the manifest is different(which results in the need to update), or if it’s attempting to download the manifest for the first time.|
|noupdate||There is no update, since the manifest hasn’t changed.|
|downloading||The user has found a new manifest and is now going to begin attempting to download it.|
|progress||The files are currently being downloaded.|
|cached||The files listed in the manifest have been downloaded, and the app is successfully cached.|
|updateready||The files are now downloaded, and the script can use the swapCache() function to switch to the new cache.|
|obsolete||The manifest is either a 404 or 410 page, so the app cache is going to be deleted. This basically means it wasn’t found.|
|error||Some form of an error has occurred, and the caching wasn’t successful.|
As noted above, in order for your browser to notice that it needs to fetch the new manifest file as the source of what files to download and cache, the new manifest needs to be at least one byte different than the previously used manifest. This can be done by changing anything, even a comment, to something else, in order for the browser to recognize the difference. This is something to keep in mind if you implement the offline functionality while you are developing your web application, since every time you update any file listed in the CACHE MANIFEST section, you will need to change your manifest file in some way so that your browser will fire a re-downloading process.
With this function, you can debug your manifest file to check whether or not it’s playing nice with your browser. One error that you might get(although hopefully not if you’ve followed all the instructions so far!) is the INVALID_STATE_ERR: DOM Exception 11 error. This refers to the setInterval() section of the code, which fetches and compares the manifest files every 10 seconds. If you receive this error, it’s because your manifest never cached anything successfully in the first place, so when the function is trying to re-compare manifest files, it has no way of doing so since nothing was cached. Check to make sure you’ve configured the manifest MIME type correctly in your server, change at least one byte in your manifest file, and then refresh the page.. This should solve your problem.
One last thing. You might notice that this function calls the swapCache() function whenever the status is updateready. This function swaps the caches when a new manifest file is found, allowing the web app to use the newly downloaded and cached files. However, you’ll have to refresh the page before the new files are used.
Well, that’s about the last bit of information you will need regarding the manifest file and how it works in conjunction with your offline web application. Click on to read the next portion of the guide regarding the specific HTML tags you will need in order to hit the ground running, and how implementing those can help make your offline web application look and feel even more like a native application. Next ->