Create fullscreen webapp shortcuts on your iPhone home screen
This post is about a tool to create full screen webapps on your iPhone. You can check it out for yourself at: www.lessannoyingsoftware.com/tools/iphone/
Every pixel counts for applications on your iPhone, but web applications are often at a disadvantage due to the Safari navigation bar that usually shows up. It turns out that some web applications, when saved to your iPhone home screen will launch in "stand-alone mode," without any of the normal navigation controls, leaving the app with more vertical space. While this type of mode isn't right for every webapp, there are few out there (including quite a few from Google) for which it can be very useful.
A recent post over at Lifehacker highlighted a tool created by user ckcallen that lets you create a Gmail shortcut in stand-alone mode, by wrapping around the GMail website. While having a dedicated Gmail shortcut is great (as well as other webapps available at www.jongpie.com), we decided to make a tool that lets you create a iPhone fullscreen shortcut for any website.
A quick disclaimer: Not every website is well suited to a stand-alone iPhone shortcut. Clicking on links will launch a new tab in safari, so this really only works for single-load mobile sites like Gmail, Google Calendar, and Google Reader.
The iPhone Webapp Generator
To create your own full screen webapp shortcuts, start by heading to the tool at www.lessannoyingsoftware.com/tools/iphone/. To use the tool, you input the target url, a name for the shortcut, and (optionally) a url for an icon image to use. In the example below, I've created a shortcut for Google Reader (google.com/reader) which I'm calling GReader. I had previously uploaded an icon to use to my public Dropbox folder. Alternatively you can plug in the link to an image that is already online, or leave the field blank to get a default image. Once you've filled in the fields, you'll be redirected to a new page with the permanent link for the full-screen app.
If you're setting things up from your phone, just click the bookmark '+' symbol and then click "Add to Home Screen." Alternatively, if you're setting up the link from your computer, you can just email the link to your phone and visit it from there to save the bookmark. Once you've added it to your homescreen, you should see the icon you selected (or a green thumbtack if you're using the default). When you open up the webapp, you'll end up with a fullscreen view without any of the extra Safari clutter.
What apps can you make
Unfortunately, due to the way that the iPhone handles links in stand-alone webapps, not every website is well suited to this tool. For the most part, only apps that are entirely written in AJAX, meaning that the entire site is only a single page load, will work well. Sites with links in them will open up a new tab in Safari rather than staying inside the webapp. Fortunately, there are a number of AJAX-only mobile web applications. Google in particular has a ton of stand-alone-friendly sites. I've created versions of a few that you can use just by clicking through on your iPhone and saving to your home screen:
While Google is unique in that many of it's webapps aren't available as installed iPhone apps, other services such as Dropbox and Facebook also have AJAX-only webapps that are compatible with this method. There are plenty of other webapps out there as well, so feel free to let us know if you run across any great ones.
Subscribe: RSS | Twitter
Browse all articles
Share this article:
