Jim's Blog

Offline webpages for the iphone

My wife asked me for an easier way to access data on her phone without going through a couple of clicks to get there. The first way that popped into my head was to make a webpage that she could do the whole "Add to home screen". However this is something that she needs to access, even if there is only a shitty wireless connection. After a little digging I found that you can have a base64 "data url" which can contain the whole page. There's even a website called iWebSaver that someone built that can do a couple of the steps for you.

I didn't want to put this page up public, so I just used the tools on my mac to base64 the page that I wrote:
openssl enc -base64 -in my-page.html | tr -d "\n" && echo ""
I used the tr to strip out the newline characters and the last echo was to just make it easier to copy and paste from terminal.

So I emailed the base64 text, but prepended with "data:text/html;base64," (no quotes). For example, you wanted to have a web page with "hello world" you might do something like this:
echo "hello world" | openssl enc -base64 | tr -d "\n" && echo ""
That will give you aGVsbG8gd29ybGQK to which you'd put into the url bar of safari
data:text/html;base64,aGVsbG8gd29ybGQK
(I understand for "hello world" you probably should have the content type of "text/plain" rather than "text/html", but I don't want to confuse anything too much.)

The only issue that I ran into was that the page didn't look very nice on the iphone. Doing a bit more digging I found a meta tag that I could drop in that fixed everything:
<meta name="viewport" content="width=device-width,user-scalable=no" />