jQuery Widget for Showing Add To Home Message on iOS

I recently wrote an article discussing Making HTML5 Apps Appear Native on iOS where I mentioned building a widget for telling the users to add your application to the home screen. This article introduces a simple jQuery plugin that can be used to show the Add to Home message on an iOS device. It is fully customizable, but looks good right out of the box.

Getting ready

Download the plugin at the jQuery Plugin Site or the GitHub Project Homepage.

How do it…

Include the addToHome.js at the end of the </body> tag on your iOS native-looking HTML 5 app page:

	<script src="/addToHome.js"></script>
</body>

Execute the function to render the message:

$(window).showAddToHome();

Options may be passed as an object to the showAddToHome function:

$(window).showAddToHome({
	triangleDiameter: 10
});

This will create the following markup:

	<div style="..."><p style="...">Add to Home</p></div>
	<div style="..."></div>
</body>

How it works…

The showAddToHome function uses jQuery to render a fixed positioned message with a disclosure triangle, pointing to the button on an iOS device where the end user can add your page to their homescreen. It will only show the message when window.navigator.standalone === false, so it won’t be seen by non-iOS browsers or if the end user launched your application from their home screen. The message is position fixed, so it will float at the bottom of the screen until it is removed from the page via a touch or click event, so it doesn’t get in the way of your UI.

The markup created is two sibling divs, the first is the message box and the second is the disclosure triangle. Inside the message box will be a <p> tag containing the actual message.

All styles are applied directly in JavaScript, so we do not need to include a separate CSS file. The styles can be overwritten by providing arrowStyles, elStyles, and pStyles to the options object passed into the showAddToHome function, but I don’t recommend it.

If you use the standard styles, you can control the size of the arrow using the triangleDiameter option; it defaults to 20 pixels. The text can be controlled by overwriting the html option. However, the default HTML includes a <p> tag, so you should as well, unless overwriting the default styles.

Making HTML5 Apps Appear Native on iOS

In version 6 of iOS, Apple added a simple, but powerful new feature allowing HTML5 webpages, saved to the home screen, to look like native apps. One of the best apps doing this right now is weather app ForeCast.io (try opening it on your iOS device). Today’s article describes how you can make your HTML5 apps look native when they are saved on and opened from the home screen.

How do it…

...