Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Simple Offline Application

DZone's Guide to

Simple Offline Application

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

I've written my fair share of single file applications. All the JavaScript and CSS are inline, and if I'm feeling particularly ninja, I'll base64 encode the images, and make them inline too.

To make the whole thing completely available offline is insanely easy, and reusable to boot.

The first step is to add the manifest attribute to the html element:

<html manifest="self.manifest">

In this case we've got a file called self.manifest which is pretty simple. It contains the following:

CACHE MANIFEST

Yep, that's it. Since the application cache automatically includes the file that references the manifest file, we've now got an offline application cache for our single file app.

Make sure you're serving the manifest file correctly, if you're not sure, check out the HTML5 Doctor introduction to offline applications, but otherwise, that's it.

When I went away this last week, I wrote a little Boggle clone, and wanted it work offline on the plane - so I added this technique to the single file app (it's only the board and a countdown, not interactive).

Dirt simple, but totally reusable!

Note: the manifest file is subject to the same-origin rule, in that you can't point the manifest attribute to something like http://simpleapp.com/self.manifest. Equally, you can't base64 encode the manifest file as some people have asked in the comments - that would be really awesome!

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}