Offline web applications are dependent on three things. Â It doesnât matter if your application is partially or fully offline, youâll still need to address these in your code.
- Data Storage
- Offline/Online detection
The AppCache is an essential part of your application strategy for allowing offline browser reloads or restarts. Without this an application will simply fail to re-load while offline.
LocalStorage. TheÂ LocalStorage API is super-easy to use. It stores Strings in simple key/value pairs. Itâs limited to about 5MBs on most browsers. The two main challenges youâll run into with LocalStorage are hitting the storage limit and performance hits when serializing and deserializing data.
IndexedDB. IndexedDB is essentially an asynchronous noSQL database that lets you store a wide variety of datatypes so that you donât have to deal with serialization/deserialization. Â Datatypes include String, Object, Array, Blob, ArrayBuffer, Uint8Array and File. While many online sources will tell you that there isnât a size limit, Iâll tell you that in general you should limit your storage on a mobile device around 50 â 100MBs to help prevent the browser from crashing.
WebSql. Itâs widely recommended that you not build applications directly on WebSql. The World Wide Web Consortium (W3C) is letting this standard die off in favor of IndexedDB and LocalStorage. Iâm really only including this here for reasons such asÂ Safari 7 and and the Android native browsers before 4.4Â only support WebSql. For more information on how to get around this read down to the section on IndexedDBShim.
3rd Party Browser Storage
If the built-in browser storage capabilities arenât meeting your needs you still have other options.
IndexedDBShim. IndexedDBshim is a Polyfill for WebSQL-based browsers. Because IndexedDB isnât natively supported on older versions Safari 7 and Opera you can use this 3rd party shim to transparently translate your IndexedDB code to work across Android and iOS.
PouchDB. PouchDB is an Open Source experimental library that is an attempt to smooth some of IndexedDBâs rough edges as well as provide additional functionality, such as the ability to sync with remote stores.
LocalForage (Mozilla). Â LocalForage is also an attempt to bridge the gap between LocalStorage and IndexedDB. It gives you an interface that provides much wider browser coverage than IndexedDB by itself. Â One of the downsides is the amount of storage you can use. If a user is on an older browser such as IE8 thatâs limited to LocalStorage then that user will be limited to storing about 5MBs of data. If you requirements call for using more than that, such as downloading large address lists, then the app wonât work on that browser or youâll have to build in some sort of paging mechanism that deletes the old data and brings in the new.
There are a number of ways to detect if the browser is online or offline as well as when the internet statusÂ changes.
NavigatorOnline.online. Â Some browsers have a built-in detection mechanism. However, it is not always reliable and false positives are a distinct possibility. For that reason, you will have to build additional detection capabilities or lean towards a 3rd party library.
Offline.js. Offline.js is a small Open Source library (~3KB) that detects when you lose an internet connection and when it comes back up. While not perfect, it doesÂ handle a lot of cross-browser compatibility issues for you. And, if you find bugs you can always create a fix and submit pull requests.