Make your website or web-app offline available
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