One of the things a lot of people don’t realise about web apps is that they don’t actually have to run off a server. These days with little effort at all you can write a web app that runs directly on the target computer which reduces infrastructure costs and makes the app more responsive for the end user.
There are a number of reasons you might make an offline app, but it’s especially useful in cases where web access may be limited (kiosks, trade shows, etc), somewhere immediate action might be required (such as point of sales systems, doctor’s surgeries), or where the functionality just makes sense to perform on the client side (such as calculator apps, to do lists, image editors etc).
How do I make an offline app?
There’s a few technologies that let you do this, for instance:
- Web Stores such as the Chrome Web Store
- Packaged desktop solutions like node-webkit and the now-defunct Adobe Air
- Hosted, but offline applications delivered from your webserver using conventional methods but cached for offline use using AppCache.
I’m not going to focus on any particular technique, rather than go through some general tactics you can use to create a fully offline app.
What’s an offline app anyway?
An offline app is exactly what it sounds like, it runs on your computer like a regular app, regardless of your Internet connection.
The Chrome Web Store denotes offline apps with a lightning bolt icon. You can tick a box when you publish your app, putting “Offline” in the name is optional.
How to make my web app offline
There’s a bunch of techniques you can use, but the most basic one is ensuring all your application logic is executed in the browser, and that there are no server-side components (such as log-in, storage, 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 operates correctly then there’s a good chance it’s going to work great as an offline app. This isn’t a hard and fast rule though, as depending on your platform you may have more or less functionality at your disposal.
Once your application is built, one of the more standards-based approaches is to use App Cache to instruct the browser to cache your app for offline use.
Specific Technologies for Offline Apps
Some specific technologies exist that work really well for offline web apps.
|AppCache||IE10+||AppCache lets you specify the files that need to run offline. The browser caches these files for subsequent app loads.|
|Web Storage||IE8+||Web Storage lets you store persistant data with an interface akin to an associative array.|
|File APIs||IE10+/Android 3+||Read, manipulate and write files to disk. Especially useful in conjunction witht he drag & drop API.|
Of course there’s a bunch of other technologies, both standard and proprietary which you can use to make your web app rock on various platforms. If you don’t need general web support, check out the documentation for the web app stores or rendering engines you’re planning to support.
Ultimately, the best way to make an offline web app is to break the ties with that server-side code. It’s a shift in thinking from traditional web development, but the payoffs can be huge.