del.icio.us .:. tweet

iClock, an Instant iPhone App .:. kentbrewster.com

Here's an interesting technique spotted on W. Clawpaw's page quite a while back, using data: urls as the source of toolbar bookmarklets and iPhone apps.

What you're seeing on this page isn't mine; it's lifted mostly from the Mozilla Developer Center's Basic Animations page for the <CANVAS> tag.

To try running it on your iPhone, visit this page and click this handy iClock Link and wait for it to load up. Once it's running, hit the + at the bottom of your browser to add it to your home screen. (For the nicest-looking icon, turn the iPhone or iPod on its side into landscape mode.)

The rendered page shouldn't look any different from this; you can even view source and see how it works. The difference will be in the URL: instead of http://kentbrewster.com/iclock, the entire base-64-encoded page will be contained in the bookmarked URL. Once it's running, go back out to your Settings, turn off your network by going into Airplane Mode, and then come back and try iClock again. If all went well, you should see a working clock with your network disabled, because the bookmark itself contains everything necessary to recreate the page.

How to Do Something Like This Yourself

First, write a page that looks good and works well on an iPhone. If you haven't tried this already you're in for some head-scratching; good search terms include window.onorientationchange, preventDefault, and window.scrollTo(0, 1).

Next, you'll need to concatenate everything--the entire page, HTML, CSS, JavaScript, the works--into a single file. Remember, we want to load everything up at once, without including any external resources from the network.

Finally, convert the source of your working page to base-64 encoding. I wound up using an online form from Tyler Akins.

Once you've got your base-64 encoded page, serve it up thusly:

<a href="data:text/html;charset=utf-8;base64,Base64EncodedGibberishHere">Link Title</a>

Your page ought to load up inline and work when you click it or drag it up into your Web browser's bookmark tool. Once you're happy with it, fire it up on your iPhone the same way you installed iClock.

As always, have fun with this and please let me know how it goes.

Comments from before Disqus:

Copyright Kent Brewster 1987-2014 .:. FAQ .:. RSS .:. Contact