HTML 5 est un langage cross-platform très puissant permettant de créer des webapp performantes. Cependant si la technologie est la, il manque toujours un éco-système de distribution afin de pouvoir faire connaître sa webapp. La question est donc : Comment publier une webapp sur l’AppStore de l’iPhone et de l’iPad ou sur l’Android Market ?

Les composants WebView

Les webview (UIWebView pour iOS et WebView pour Android) sont des composants du SDK natif du téléphone qui permettent d’intégrer du contenu web dans une application native. C’est ce composant qu’il va falloir utiliser.

En effet, l’idée est d’empacketer votre web-app dans une application native afin de pouvoir la distribuer sur les stores. Pour ce faire, on va donc faire pointer la webview sur notre webapp et donc donner l’impression à l’utilisateur d’utiliser directement notre webapp alors qu’il passe en fait par une application native et une webview.

Une fois ce principe compris : vous n’avez plus qu’a créer une application iPhone/iPad avec une UIWebView et/ou une application Android avec une Webview. Le code de chacune des applications ne dépasse donc pas les 15 lignes.

On a donc notre webview, mais encore faut-il la faire pointer sur notre webapp. La question qui se pose alors est la suivante : Comment et ou stocker notre webapp ?

Le stockage de la webapp

Ici il existe 2 possibilités distinctes qui ont chacun leurs avantages et leurs inconvénients :

1. Le stockage local dans le téléphone
La première possibilité est d’intégrer votre webapp dans l’application native directement. Il est donc alors possible de faire pointer la webview directement sur votre dossier contenant l’HTML local.
Les avantages sont la rapidité d’exécution et le fait de ne pas demander de connexion internet pour exécuter l’application.

2. Le stockage en ligne sur un serveur
La seconde possibilité est stocker votre webapp sur un serveur web en ligne et de faire pointer votre webview sur l’url du serveur.
L’avantage est alors de pouvoir faire des traitements serveur (php, stockage dans une base de donnée en ligne etc…) directement depuis la webapp.

Libre à vous, selon votre application de choisir l’une des deux possibilités.

Les spécifications de l’AppStore d’Apple

Attention cependant, il est précisé dans les guidelines d’Apple pour la soumission de votre application pour l’AppStore que votre app ne doit pas être simplement une webview qui pointe sur un site web classique. L’idée est de protéger l’appstore contre une invasion de sites web non optimisés mobiles.

Veillez donc bien à ce que votre webapp soit pertinente, optimisé pour le mobile et qu’elle apporte un réel plus à l’utilisateur, sinon vous avez de grande chance de voir la soumission de votre application refusée par Apple.

Deux exemples de webapp HTML 5

Voici deux exemples de webapp HTML 5 empacketés dans des applications native et qui sont donc disponibles sur les stores Android et iOS :

1. Open RSS Reader
Un lecteur de flux RSS réalisé en jQuery mobile HTML 5, l’application est disponible sur l’Android Market et sur l’AppStore. Elle utilise la deuxième méthode de stockage à savoir le stockage en ligne sur un serveur afin de pouvoir effectuer les traitements sur les flux en ligne.

• Lien Android Market : Open RSS Reader Android
• Lien AppStore : Open RSS Reader iPhone / iPad

2. Save the Pig
Save the Pig est un mini-jeu pour iPhone réalisé en HTML 5 avec la librairie Easel JS. Il utilise le stockage local dans l’application afin d’offrir des performances maximales. Le jeu est disponible gratuitement sur l’AppStore :

• Lien AppStore : Save the Pig iPhone

Mots-clefs : Android, android market, app, appstore, HTML 5, iPad, iPhone, webapp

Cet article a été publié le Samedi 19 février 2011 à 13 h 36 min et est classé dans Android, Developpement mobile, Développement web, HTML / CSS, iPhone. Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0. Vous pouvez laisser un commentaire, ou faire un trackback depuis votre propre site.