Offline Apps

One of the things a lot of people don’t real­ise about web apps is that they don’t actu­ally have to run off a server. These days with little effort at all you can write a web app that runs dir­ectly on the tar­get com­puter which reduces infra­struc­ture costs and makes the app more respons­ive for the end user.

There are a num­ber of reas­ons you might make an off­line app, but it’s espe­cially use­ful in cases where web access may be lim­ited (kiosks, trade shows, etc), some­where imme­di­ate action might be required (such as point of sales sys­tems, doctor’s sur­ger­ies), or where the func­tion­al­ity just makes sense to per­form on the cli­ent side (such as cal­cu­lator apps, to do lists, image edit­ors etc).

How do I make an off­line app?

There’s a few tech­no­lo­gies that let you do this, for instance:

  • Web Stores such as the Chrome Web Store
  • Packaged desktop solu­tions like node-webkit and the now-defunct Adobe Air
  • Hosted, but off­line applic­a­tions delivered from your web­server using con­ven­tional meth­ods but cached for off­line use using AppCache.

I’m not going to focus on any par­tic­u­lar tech­nique, rather than go through some gen­eral tac­tics you can use to cre­ate a fully off­line app.

What’s an off­line app anyway?

An off­line app is exactly what it sounds like, it runs on your com­puter like a reg­u­lar app, regard­less of your Internet connection.

These apps use tech­no­lo­gies such as Javascript, local stor­age and cache mani­fests to keep the app on the cli­ent side. These apps can also be used to update data on the server but might util­ise cach­ing to save web requests until the user is online. The primary pur­pose of an off­line app doesn’t require an Internet con­nec­tion to run.

Offilne apps are denoted in the Chrome web store by a lightning bolt.

The Chrome Web Store denotes off­line apps with a light­ning bolt icon. You can tick a box when you pub­lish your app, put­ting “Offline” in the name is optional.

How to make my web app offline

There’s a bunch of tech­niques you can use, but the most basic one is ensur­ing all your applic­a­tion logic is executed in the browser, and that there are no server-side com­pon­ents (such as log-in, stor­age, processing).

A good start might be to make sure your app runs straight off your hard disk. If you can double-click your HTML file and your web app launches and oper­ates cor­rectly then there’s a good chance it’s going to work great as an off­line app. This isn’t a hard and fast rule though, as depend­ing on your plat­form you may have more or less func­tion­al­ity at your disposal.

Once your applic­a­tion is built, one of the more standards-based approaches is to use App Cache to instruct the browser to cache your app for off­line use.

Specific Technologies for Offline Apps

Some spe­cific tech­no­lo­gies exist that work really well for off­line web apps.

Technology Support Description
AppCache IE10+ AppCache lets you spe­cify the files that need to run off­line. The browser caches these files for sub­sequent app loads.
Web Storage IE8+ Web Storage lets you store per­sist­ant data with an inter­face akin to an asso­ci­at­ive array.
File APIs IE10+/Android 3+ Read, manip­u­late and write files to disk. Especially use­ful in con­junc­tion witht he drag & drop API.

Of course there’s a bunch of other tech­no­lo­gies, both stand­ard and pro­pri­et­ary which you can use to make your web app rock on vari­ous plat­forms. If you don’t need gen­eral web sup­port, check out the doc­u­ment­a­tion for the web app stores or ren­der­ing engines you’re plan­ning to support.

Ultimately, the best way to make an off­line web app is to break the ties with that server-side code. It’s a shift in think­ing from tra­di­tional web devel­op­ment, but the pay­offs can be huge.

Leave a Reply