Drop-in « Add to home » pour inviter les utilisateurs de webapp iOS à ajouter à l’écran d’accueil

Je profite d’une petite découverte pour blogger un peu (je suis à fond sur le développement de ma première webapp full HTML qui donne de très bons résultats, j’espère pouvoir plus en parler bientôt sur ce blog).

Les applications sous forme de site web tournant dans le navigateur (alias webapp) occupent une place réduite, à cause de la place prise par l’interface du navigateur elle-même (barre d’adresse, signets, …). Sous iOS, on peut faire mieux en ajoutant l’application à l’écran d’accueil. Dans ce mode « standalone » (repéré par window.navigator.standalone), seule le header principal de l’iDevice (avec heure, batterie, signal, …) apparaît, ce qui laisse toute la place à l’application.

Pour cela, il faut tout de même placer un meta-tag dans le head de sa page:

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

Bref, vous savez déjà que cela est possible mais peut-être que vos utilisateurs ne le savent pas. Pour cela, Mattea Spinelli (qui a aussi fait iScroll) a créé un petit script nommé « Add to home ». Celui-ci vous permet de proposer automatiquement aux utilisateurs iOS d’ajouter l’application à l’écran d’accueil:

http://cubiq.org/add-to-home-screen

Lors de la consultation de la page, ce script fera apparaître un pop-up comme ceci:

Si vous naviguez sur maps.google.fr avec Safari, vous verrez que GMaps vous propose aussi cette option, un peu de la même manière.

Le script gère automatiquement le positionnement de la pop-up, suivant l’appareil (en haut à gauche pour l’iPad, en bas au centre pour l’iPhone / iPad touch. En plus de cela, pas mal d’options:

  • Timing de l’apparition
  • Effet de l’apparition
  • Gestion de la persistance
  • Contenu personnalisé …

A noter, l’option « returningVisitor » qui permet si activée, de ne proposer la pop-up qu’à la seconde visite de l’utilisateur. En effet, comme il l’indique dans l’article, si vous lui présentez cette option à la première consultation de votre site, l’utilisateur va peut-être directement fermer cette aide, car il ne sait pas encore si votre webapp vaut le coup :). De base, cette propriété est à false, ce qui signifie que l’utilisateur verra la pop-up même à sa première visite. A vous de voir.

Pour l’utiliser sur sa webapp, il suffit d’intégrer le JS et le CSS de Add2Home dans sa page, le script s’occupe du reste.

Voilà, un script très pratique qui m’a personnellement sauvé quelques heures. Si c’est aussi votre cas, faîtes aussi un don Paypal à l’auteur :)

7 réflexions au sujet de « Drop-in « Add to home » pour inviter les utilisateurs de webapp iOS à ajouter à l’écran d’accueil »

  1. k33g_org

    j'<3 bien l'explication " l’option « returningVisitor »" je n'y avais pas pensé.

    dis tu voudrais pas rajouter les boutons twitter et G+ sur ton blog ?

    Répondre
    1. admin Auteur de l’article

      C’est encore plus rapide d’aller coller l’url dans twitter.com ou d’utiliser la fonction partager de son mobile, non ? :P

      Répondre
  2. regelgato

    bonjour,

    Je cherche désespérement la même chose pour android afin que mon site soit « multi » plateforme. Avez vous déjà vu ca quelque part ?

    Thx

    Regelgato

    Répondre
  3. Pacto

    Bonjour,
    Je recherche deseperement un code pour integrer directement un bouton sur mon site qui reproduirait directement l’action « ajouter à l’écran d’accueil ».
    La solution de la pop up est interressante mais j’ai vu il y a quelques temps la solution que je cherche mise en place, seulement je ne me rappelle plus du site et je n’ai pas eu le reflexe de conserver le code source.

    Auriez vous deja vu ou fait utilisé ce type de code?
    Merci à vous

    Répondre
  4. Soohael

    Bonjour

    Je cherche à faire fonctionner ce script mais impossible… je ne comprends pas vraiment pourquoi.

    Cela fonctionne bien sur les iPhone 4 ?!

    J’ai mis les fichier Js ainsi que le code dans mon index mais rien ne fonctionne. Et quand je visite les pages de démos je n’ai aucun message non plus …

    Merci pour votre aide !

    Répondre

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *