dominoGuru.com

Your Development & Design Resource

Adding custom iPhone/iPad/iPod Touch Web Clip Icons to your IBM Lotus Notes Domino XPage Apps

09/29/2010 12:25 AM by Chris Toohey

While the iOS 4.1 update auto-generates web clip icons (the bookmark/tile on the iPhone, iPad, and iPod Touch Home Screen) with a snapshot of the web app, sometimes you just want your web applications to appear more like an on-device app.

While working on a new IBM Lotus Notes Domino XPage application (more on that later), I wanted to do just that with the mobile device-friendly version of my app Incognito.

The idea is simple - I want to add the following markup to the HTTP HEAD Element container of my XPage:


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

<link rel="apple-touch-icon" href="/incognito.png" />

<link rel="apple-touch-startup-image" href="/incognito_startup.png" />

The apple-mobile-web-app-capable META Tag simply tells the iOS device to not render the Safari browser controls once the app is launched. It's up to you in-app to create the navigational structure.

The apple-touch-icon LINK Tag points to a 57x57 pixel image which the web clip will use as it's icon. I use a simple square PNG file and let the iOS render the spotlight tween and curved border.

You can alternately define a apple-touch-icon-precomposed LINK Tag if you don't like the iOS-rendering of your image. (ie., you want to control the border, the spotlight shadows and shine)

And finally the apple-touch-startup-image, which is a 320x460 pixel image that acts as the loader/startup image for your web clip app.

It's pretty slick, actually - as the user is given this screen while the iOS device connects to the web app. Just like with the on-device icon, this gives the web clip more of a traditional on-device app feel.

... but now to get these into your XPage-based apps.

Simple add the META and LINK to your XPage Resources via the linkResource and metaTag XPage markup:


<xp:this.resources>

    <xp:styleSheet 
href="/main.css"></xp:styleSheet>

    <xp:script src="/main.js" clientSide="true"></xp:script>

    <xp:metaData name="apple-mobile-web-app-capable" content="yes">

    </xp:metaData>

    <xp:linkResource 
href="/incognito.png" rel="apple-touch-icon">

    </xp:linkResource>

    <xp:linkResource 
href="/incognito_startup.png" rel="apple-touch-startup-image">

    </xp:linkResource>

</xp:this.resources>

The result is a pretty slick-looking web clip icon for your app:

Custom iOS/iPhone web clip icon from an IBM Lotus Notes Domino XPage app
-- Incognito

Followed immediately by a custom startup image for your app:

Custom iOS/iPhone web clip startup image
from an IBM Lotus Notes Domino XPage app -- Incognito

NOTE: IBM Lotus Notes Domino 8.5.2 introduced the headTag XPage Tag. Here's what that would look like:


<xp:headTag 
tagName="meta" 
rendered="true" 
loaded="true">

    <xp:this.attributes>

        <xp:parameter name="content" value="yes"></xp:parameter>

        <xp:parameter name="name" value="apple-mobile-web-app-capable"></xp:parameter>

    </xp:this.attributes>

</xp:headTag>



<xp:headTag tagName="link" rendered="true" loaded="true">

    <xp:this.attributes>

        <xp:parameter name="rel" value="apple-touch-icon"></xp:parameter>

        <xp:parameter name="href" value="/incognito_startup.png"></xp:parameter>

    </xp:this.attributes>

</xp:headTag>



<xp:headTag tagName="link" rendered="true" loaded="true">

    <xp:this.attributes>

        <xp:parameter name="rel" value="apple-touch-startup-image"></xp:parameter>

        <xp:parameter name="href" value="/incognito.png"></xp:parameter>

    </xp:this.attributes>

</xp:headTag>

The headTag gives us ultimate flexibility for injecting markup into the XPage HTTP HEAD Element container, but for this particular use it's not required: the metaTag and linkResource XPage Tags get the job done just fine.

Also of note, Mark Hughes points out in his post Getting Creative with Domino Web Development... that you may want to include the following META Tag to give your web clip XPage app even more of a native on-device appearance:


<meta name="apple-mobile-web-app-status-bar-style" content="black" />

At this point, I'm embarrassed that I don't have these tags and accompanying resources in Remote Console. Rest assured, they'll be in version 1.1 which will debut in October (and available as a free download to anyone who purchased version 1.0).

Until then, I have to get back to Incognito!

About the author: Chris Toohey

Thought Leadership, Web & Mobile Application Development, Solutions Integration, Technical Writing & Mentoring

A published developer and webmaster of dominoGuru.com, Chris Toohey specializes in platform application development, solutions integration, and evangelism of platform capabilities and best practices.