Gmail web app ios

When the iPhone first came out there were no third-party applications allowed, and as a result users had to resort to “web apps” as a way to quickly access the tools they used the most. Apple tried to make this a little more convenient by letting them bookmark sites on the home screen, but in the end all that bookmark really did was open a new tab in Safari.

Eventually Apple got around to implementing a way to make home screen web apps feel more like native apps by opening the links in a full screen mode void of an address bar and toolbar. Developers can enable this by adding one line of code to the <head> section of a page:

<meta name="apple-mobile-web-app-capable" content="yes" />

You can see the difference above. The “before” shot is without that code implemented and shows the address bar on the top and toolbar on the bottom, while the “after” shot is what Gmail would look like when launched if they actually implemented that line of code. Unfortunately many sites like Google don’t have that line of code on the page, but someone has cleverly come up with a bookmarklet to get around that.

iOS doesn’t let you bookmark JavaScript links directly there are a couple approaches you can take with this. The way I did it is I dragged the “App Mode” link below into the Safari Bookmarks Bar and sync it through iCloud to my devices (or you can also sync through iTunes). Alternatively the source of this trick explains how you can edit an existing bookmark on your device and just paste in the snippet of JavaScript code. If you want to take my approach here is the link you’ll want to drag into your Bookmarks Bar:

App Mode

Once you’ve got that on your iPhone just click the bookmarklet before saving the page to your home screen, and it will insert that line of code into the <head> section of the site if it isn’t already there. Then you can bookmark the link on your home screen and enjoy browsing your favorite sites in full screen mode!

iPhone App Mode Bookmarklet Homepage