Make your website or web-app offline available

0 Comments

Android developers vs. web

One great advantage of native apps over web apps is that they don’t depend on an online connection to start. Therefore the startup is fast and you can use them in no-network conditions. Just, web apps can also have this advantage when done right.

If you look at a website like Google Docs, you notice that it appears even when you are offline (given that you have visited the same page before). It is even possible to edit files while offline. You can achieve the same with an HTML5 feature called the Offline Application Cache.

Use the Offline Application Cache

While keeping a state locally and syncing requires more effort, making your web(site/app) offline available is easy. You just have to use the Offline Application Cache. This is a single file with information about everything the client should keep in its local cache.

At first you create a file called cache.manifest with the following content:

CACHE MANIFEST
# Cache version #1

CACHE:
/index.html
/css/style.css
/images/header.png
/images/footer.png
/images/background_portrait.png

Change the resources below CACHE: to the required files of your project. Keep in mind that these resources are not requested again, even if they changed. If you want them to be re-downloaded, you need to change the cache manifest itself. This is the reason for the version counter. Increase it by one to make the clients refresh all resources.

The next step is to add it to your site html tag:

<html manifest="cache.manifest" type="text/cache-manifest">

Save, refresh the website on your client and you now have an offline available app. You can test the Offline Application Cache by switching off your server or internet connection and refreshing again. It will reload despite having no connection.

Network and Fallback

In case you have more dynamic content there are two sections you can use in the Offline Application Cache file called NETWORK and FALLBACK:

# Download default_state.xml to local cache
CACHE:
/default_state.xml

# Resources that have to be downloaded from a server
NETWORK:
/current_state.xml

# default_state.xml is used when current_state.xml is not available
FALLBACK:
/current_state.xml /default_state.xml

In this case, current_state.xml requires an online connection and can not be cached. default_state.xml will be added to the cache and used as a fallback when current_state.xml could not be downloaded.

For example, instead of your state data you can put a “state could not be retrieved” message into the default_state.

Wrap up

It is simple to make your web app offline capable. Most of the hybrid- or web-apps I see on the market fail to work without an online connection. It is a pity, because there is so little work necessary to greatly enhance the user experience.

Dynamic state is a different thing, though. Keeping and syncing state is a hard topic, whether native or on the web. While not simple, it is possible with HTML5 Local Storage.

Still, showing your own website with a message is much better than the default browser error. If you have web parts in your application that come from a remote server, be sure to use the Offline Application Cache, at least for the front page and your resources.

A Beginner’s Guide to Using the Application Cache

HTML Standard Application caches

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Android AppRater

The Android AppRater is a little tool in form of a source code snippet for getting better ratings in the Android Market. Its basic idea is to kindly ask users to rate your application, after…

German Paragliding XC Champion

Initially, this website was created to present my professional career and ideas around software development. Recently, with my work on paragliding tracklogs and the Thermal Map, it has also become a personal space. This paragliding…

Interviewing software engineers

Interviewing basics When interviewing software engineers, you typically want to answer one simple question: Will they be a good fit for my team? Therefore, your interviewing process should focus on answering this question. Obviously both sides try to answer…