Blog

Un cocktail de nouvelles fraîches !

Importer une vCard depuis Mobile Safari

Par L'équipe WILD le dans "développement"

Cet article va nous permettre d’inaugurer une section que nous jugeons importante de ce blog : la partie développement. Chaque fois que nous rencontrerons un problème, un bug ou un casse-tête lors du développement d’une application Web, nous le posterons ici dans l’espoir que nos efforts puissent aider quelqu’un d’autre...

Le postulat de départ est assez simple : vous êtes en train de créer une page contact comprenant toutes les informations dont un visiteur pourrait avoir besoin et vous vous dites qu’il serait très pratique, à partir d’un iPhone ou iPad, d’avoir la possibilité de créer directement à partir du site un nouveau contact dans le carnet d’adresses.

En un clic, il serait possible de rentrer les différentes adresses (courrier et e-mail) les numéros de téléphone, un logo etc. Ca a l’air tout simple, non ? A priori, il suffirait de rentrer toutes ces informations dans un fichier vCard (.vcf) qu’on l’on mettrait en lien sur la page. Et bien non ! Si le client mail des iDevices est parfaitement capable d’importer une vCard, ce n’est pas le cas de Mobile Safari, qui vous renverra un message d’erreur : "Safari ne peut télécharger ce fichier".

Colorbox thumb

On pourrait penser à un bug, malheureusement, une simple recherche Google montre des discussions à ce sujet datant de plusieurs années. Il ne vaut donc mieux pas retenir son souffle en attendant un correctif Made by Apple. Mais alors que faire ?

Accrochez-vous pour la solution, elle n’est pas forcément très élégante et est relativement fastidieuse à mettre en place, mais le jeu en vaut la chandelle. Puisque Mail sait quoi faire des fichiers .vcf, nous allons nous en servir.

La première étape consiste, en jQuery, à détecter les iDevices et, pour eux, à désactiver l’action de l’attribut href du lien sur lequel se trouve la vCard et à la remplacer par l’affichage d’un prompt javascript expliquant la situation au visiteur et lui demandant de rentrer son adresse e-mail.

Colorbox thumb
var agent=navigator.userAgent.toLowerCase();
        var is_iphone = (agent.indexOf('iphone')!=-1);
        var is_ipod = (agent.indexOf('ipod')!=-1);
        var is_ipad = (agent.indexOf('ipad')!=-1);
        if (is_iphone||is_ipod||is_ipad){
                $(".contact #card p .spip_documents a").click(function(e) {
                e.preventDefault();
                        var adresse = window.prompt("Mobile Safari ne permet pas d'importer un fichier vCard. Il est possible de le faire via Mail, veuillez entrer votre adresse ci-dessous afin de recevoir la vCard par pièce jointe. (NB: votre adresse ne sera pas conservée sur nos serveurs)");
                        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                        if(emailReg.test(adresse)){
                                jQuery.ajax({
                                        data: {adr:adresse},
                                        url: 'squelettes/stuff/mailvcf.php',
                                        success: function(){alert("Envoi effectué")},
                                        error: function(){alert("Erreur lors de l'envoi. Veuillez réessayer")}
                                });
                        }else{
                                alert("Adresse e-mail erronée");
                        }
                });
        }

Bien entendu, c’est ici que l’on risque de perdre du monde. Il faut parvenir à être assez convaincant en disant que cette adresse ne sera pas conservée, sans oublier de toutes façons qu’une personne qui souhaite ajouter votre carte de visite dans son téléphone a de toutes façons l’intention de prendre contact.

Si une adresse mail a été entrée et qu’elle est valide, elle est transmise à un script PHP qui sera chargé d’y envoyer un e-mail contenant, en pièce jointe, la fameuse vCard.

Colorbox thumb
<?php
        $recipient;
        if((isset($_GET['adr'])) && (strlen(trim($_GET['adr'])) > 0)){
                $recipient = stripslashes(strip_tags($_GET['adr']));
        }else{
                $recipient = 'err';
        }
        $message="Cher visiteur, vous trouverez ci-jointe la carte de visite vCard de la société WILDmotion S.A. En l'ouvrant depuis le client Mail de votre iPhone, vous pourrez facilement ajouter nos coordonnées à votre carnet d'adresses. N'hésitez pas à nous contacter! Merci et à bientôt";
        $from="infos@wildmotion.eu";
        $subject="Carte de visite WILDmotion";
        require_once("EPDev_Emailer.php");
        $myEmail = new EPDev_Emailer($recipient, $from, $subject);
        $myEmail->addText($message);
        $myEmail->addFile("wildmotion.vcf");
        $myEmail->send();
?>

NB : la classe EPDev_Emailer.php n’est plus facilement trouvable, mais la voici : EPDev_Emailer



Haut de page