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.

[![](/images/terminal-600.jpg)](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[READER DISCOUNTSave $50 on terminal.training](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[I’ve published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

[$49 - only from this link](https://training.leftlogic.com/buy/terminal/cli2?coupon=BLOG\&utm_source=blog\&utm_medium=banner\&utm_campaign=remysharp-discount)

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](http://html5doctor.com/go-offline-with-application-cache/), 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](http://rem.io/boggle/) (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!

Published 31-Jan 2011 under #code & #html5 & #offline. [Edit this post](https://github.com/remy/remysharp.com/blob/main/public/blog/simple-offline-application.md)

Comments

Lock Thread

Login

Add Comment[M ↓   Markdown]()

[Upvotes]()[Newest]()[Oldest]()

?

Anonymous

0 points

12 years ago

HTML5 introduced offline application, but browsers are still very old (read IE 6/7) to adopt it. In-fact, those old browsers should be absolute by now, but to our luck, are still being used.

BTW, nice article.

?

Anonymous

0 points

13 years ago

@Scyfox If I understand correctly, the idea of using base64 is to embed as much of the application assets into the same html page as possible.

You can, for example embed an image directly:

<img src="data:image/gif;base64,R0lGODlhUAAPAKIAAAsLav..ETC=" alt="embedded image" width="80" height="15" />

This way, you don’t need to include the image as a separate file and you don’t need to maintain the proper hyperlinks to it.

This is not a HTML5 feature, but rather part of the previous HTML 4.01 standard. More info available here: [http://en.wikipedia.org/wik…​;](http://en.wikipedia.org/wiki/Data_URI_scheme)

Hope this clarifies things for you.

?

Anonymous

0 points

13 years ago

I apologyze in advance because I’m really new to html5 (i’m still reading the book) but what is all the fuzz for getting the manifest encoded with base64??

Why is that?

?

Anonymous

0 points

13 years ago

Now that base64 is nixed, I wonder about constructing a manifest with the File API.

  1. well you could construct the file but I suppose you end up with nothing if you can’t base64 reference its value.. Nevermind!

?

Anonymous

0 points

13 years ago

@David - well, if anything, it would be impossible to update the application, since it would be cached and there’d be no way to update the manifest (through an update application.html file).

?

Anonymous

0 points

13 years ago

Allowing an inline manifest would be a security flaw, imho.

?

Anonymous

0 points

13 years ago

@Andy - none if you’re just running from your localhost. However, if you wanted to share it and make the single file app offline it’s easy. There’s also the simple fact that I couldn’t run this simple boggle page from a localhost on my iPad! :)

@Jos - I tried that, although I knew the answer, but to confirm it: no - you can’t base64 encode it. Shame, because that would be cool.

?

Anonymous

0 points

13 years ago

What would base64’n CACHE MANIFEST do?

so:

<html manifest="data:text/cache-manifest;base64=Q0FDSEUgTUFOSUZFU1Q=">

?

Anonymous

0 points

13 years ago

Deviously simple!

?

Anonymous

0 points

13 years ago

Can’t you b64-inline that manifest file, too?

?

Anonymous

0 points

13 years ago

Remy…​

For something as simple as this Boggle board, what’s the benefit of making it "offline" vs just running the code in localhost?

[Commento](https://commento.io)