I started playing with HTML5 iPhone apps this week, and as a result there is a new piece of Plack middleware sitting on CPAN called Plack::Middleware::iPhone. It’s a (borderline ACME) module that rewrites html on the fly to make it play nicer with iPhones.
Here’s a silly example:
# A Perl one-liner for the iPhone generation
plackup -MPlack::App::Directory -e 'builder {enable iPhone; Plack::App::Directory->new}'
That makes your current directory browsable as a web app, with some special iPhone meta tags injected so that the viewport is appropriately resized & fullscreen mode is enabled when you launch your “app” from your Home Screen.
Here’s a slightly more usable one – your own personal mobile.search.cpan.org:
plackup -MPlack::App::Proxy -e 'builder {enable iPhone; Plack::App::Proxy->new(remote => "http://search.cpan.org/") }'
You can customise things too:
# app.psgi
use Plack::Builder;
use Plack::App::Proxy;
builder {
enable "iPhone",
statusbar => 'black-translucent', # transparent status bar
startup_image => 'loading.png', # displayed as the app loads
icon => 'icon.png'; # cutom app shortcut icon
Plack::App::Proxy->new(remote => "http://search.cpan.org/");
};
Here’s an actual app that I have running on my phone to display the New York subway map (images courtesy of the MTA website):
<!-- index.html -->
<html>
<head>
<title>NYC Map</title>
<style>
body, img { margin: 0; padding: 0; }
</style>
</head>
<body>
<script>
window.scrollTo(300, 700); // Initially zoom in on my local area
</script>
<img src="sub1a.gif">
<img src="sub2a.gif">
</body>
</html>
# app.psgi
use Plack::App::Directory;
builder {
enable "iPhone",
icon => 'icon.png',
manifest => 1,
viewport => 'initial-scale = 1, maximum-scale = 1.5, width = device-width',
statusbar => 'black-translucent',
startup_image => 'loading.png';
Plack::App::Directory->new;
};
Use plackup to run the site on your local network, connect via Safari on your iPhone (via wifi) and then use the “Add to Home Screen” option to add an app shortcut to it on your phone. Your 57×57 icon.png image will be used as the app icon, and your 320×460 loading image will appear as the app loads. The viewport string sets the initial zoom scale and limits how far in the user can zoom. Nice and shiny.
With the manifest option enabled, Plack::Middleware::iPhone automatically generates a manifest file and injects the appropriate html to enable HTML5 offline web app caching on your iPhone. This means that your app keeps working once you Ctrl-C the plackup server and walk out your front door. And it keeps on working when you’re stuck in the New York subway system without phone reception, trying to figure out what train you’re supposed to catch to get home.
If you’ve just started exploring how to build iPhone apps with web technologies, I suggest you check out Jonathan Stark’s book “Building iPhone Apps with HTML, CSS, and JavaScript” (online here).
