Key Cache Traps in HTML5 Applications

Original author: Tanay Pant
  • Transfer
The application cache, also known as AppCache, is by far one of the hot topics for web developers. AppCache allows visitors to your site to download the site when they are offline. You can even save parts of your site, such as images, style sheets, or web fonts, in cache on the user's computer. This can help load your site faster, thereby reducing the load on your server.

To use AppCache, a description file is created with the extension "appcache", for example, manifest.appcache. In this file, you can list all the files that should be cached. To enable this feature on your website, you must include the link to this description file on your web page in the html element as follows:



Here is an example description file:

CACHE MANIFEST
# 23-01-2015 v0.1
/style.css
/logo.gif
/script.js
NETWORK:
*
FALLBACK:
/server/ /fallback.html


In addition to the benefits, AppCache has a few basic pitfalls that should be avoided in order to prevent disruption of user experience and disruption to your application.

Never include a description file in the description file list.


If you include the description file itself in the description of the application cache, it will loop and it will be almost impossible to tell the site that there is a new cache file and that it needs to download and use the new description file instead of the old one. Therefore, always be careful not to make the following mistake:

CACHE MANIFEST
# 23-01-2015 v0.1
manifest.appcache
page2.css


Do not load uncached resources on a cached page


This is a very common mistake when working with AppCache for the first time. Here NETWORK in the description file can come to the rescue. The NETWORK section of the description file indicates the resources for which the web application needs access to the network.
The addresses indicated by the NETWORK flag usually fall into the “white list”, that is, the files specified here are always downloaded from the server with an Internet connection. For example, the following code snippet ensures that resource requests contained in the / api / sub-tree are always loaded from the network, not from the cache.

NETWORK:
/api


Always provide an application type description in your server’s .htaccess


The description file must always be submitted in accordance with the correct type of text / cache-manifest environment. If the environment type is not specified, then AppCache will not work.

This should always be configured in the .htaccess of your production server. This point is mentioned in most tutorials on how to use AppCache, but is often overlooked by many developers when they port web applications from the development server to the production server.

Enter the following into your Apache .htaccess file:

AddType text/cache-manifest .appcache


If you upload your application to Google App Engine, you can complete the same task by adding the following code to your app.yaml file:

- url: /public_html/(.*\.appcache)
  static_files: public_html/\1
  mime_type: text/cache-manifest
  upload: public_html/(.*\.appcache)


Avoid breaking the entire description as a result of incorrect file location.
If one of the files specified in the description file is not found or cannot be loaded, then the entire description file is lost. This is the weird behavior of AppCache and should be kept in mind.

For instance:

CACHE MANIFEST
# 23-01-2015 v0.1
/style.css
/logo.gif
/script.js


If you delete logo.gif, AppCache will not be able to find the deleted image file, and as a result, nothing from the description file will be executed.

Do not forget that data is downloaded from AppCache even if there is a connection


Immediately after the description file is saved by the browser, the files will be downloaded from the cache description file, even if the user is connected to the Internet. This feature helps increase the loading speed of your site and helps reduce the load on the server.

Changes on the server will not take effect until the description file is updated


As you already know from the previous paragraph, the data is downloaded from AppCache, even if the user is online, and the changes you made to the files on your site or server will not be valid until you update the description file.

You always need to update the description file after updating the site, otherwise your user will never see the changes, and will only see previously cached data. You can change the version number or data in a comment on your description file to force the user's browser to download a new version of the description file. For example, if the previous description file you used before the changes on the site looked like this:

CACHE MANIFEST
# 23-01-2015 v0.1


It can be changed as in the next block of code so that the user's browser can download a new copy of the description file.

CACHE MANIFEST
# 23-01-2015 v0.2


Note that the line that starts with # is the comment line, and it is not executed.

The description file must be supplied from the same source as the host


Although the description file may contain links to resources that must be cached from other domains, it should always be submitted to the browser from the same source as the host page. Otherwise, the description file will not load. For example, the correct description file looks like this:

CACHE MANIFEST
# 23-01-2015 v0.2
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js


Here we specified the content that will be stored in the cache of the user's browser, a link to which is provided from another domain, which is good.

Associated URLs Associated with Description URLs


Another important thing to remember is that the associated URLs that you specify in the description file are associated with the description file, not the document in which you specify the link to the description file. If you make a mistake that the description and the link will not be in the same path, the resources will not be loaded, and in turn the description file will not be loaded.

If your application structure looks like this:

css/style.css
js/main.js
img.jpg
index.html
manifest.appcache


Then your description file should look like this:

CACHE MANIFEST
# 23-01-2015 v0.2
css/style.css
js/main.js
img.jpg


Check description status programmatically


You can programmatically check if your application uses an updated version of the cache description by testing window.applicationCache.status. Here is a sample code:

function onUpdateReady() {
  alert('found new version!');
}
window.applicationCache.addEventListener('updateready', onUpdateReady);
if (window.applicationCache.status === window.applicationCache.UPDATEREADY) {
  onUpdateReady();
}


By running the above code on the site, you can find out when the update will be available to describe AppCache. Note that UPDATEREADY is a specific state. You can even use the swapCache () method in the onUpdateReady () function to replace the old description file with the new one:

window.applicationCache.swapCache();


Conclusion


AppCache is a useful technology, but as we can see, you need to be careful when using it in your projects. Developers should carefully choose what to include in the description file. Ideally, the description file should include static content such as style sheets, scripts, fonts, and images. In this case, only you can decide what to include in your description file. Appcache is a double-edged sword, so use it carefully!


Also popular now: