Vous avez un site internet.
Vous voulez une application ?
C’est possible facilement avec une PWA (Progressive Web App).
PWA : qu’est-ce que c’est ?
Simple à ajouter à votre site internet WordPress, ce plugin est compatible avec l’AMP (Accelerate Mobile Pages). Concrètement, les PWA sont des sites internet qui vont se comporter sur votre smartphone comme des applications. Les fonctionnalités Progressive Web App sont multiples. On va donc pouvoir ajouter un système de notification, avoir un accès offline, etc. La cerise sur le gâteau : il y a un impact positif sur le référencement ! Alors voyons ce que ça apporte et comment ça marche.
Pourquoi transformer son site en application via une PWA ?
Par rapport au dispositif AMP, qui permet d’accĂ©lĂ©rer l’affichage des pages de contenus en consommant moins de donnĂ©es, les PWA s’appliquent aisĂ©ment Ă l’ensemble du site. L’objectif est comparable : optimiser l’expĂ©rience utilisateur. NĂ©anmoins, la transition s’applique Ă tout le site, et pas uniquement quelques pages.
Avec une Progressive Web App, votre site chargera beaucoup plus rapidement. De plus, si vous revenez sur le site en mode hors-ligne, vous pourrez naviguer dessus sans encombre. Finalement, les PWA vous permettent de profiter des avantages d’une application sans souffrir des contraintes qui y sont liées. Évidemment, le design de votre site sera conservé, vous retrouverez l’ensemble de vos fonctionnalités, mais le rendu utilisateur sera optimisé.
Comment transformer mon site en Progressive Web App ?
Un site sécurisé https est fondamental
En pré-requis, votre site doit être intégralement en https. Cela signifie que si votre site comporte du mixed content, la transition ne sera pas possible. Nous pouvons passer votre site en https afin de préparer votre site pour une PWA.
Quelques vérifications de base
– Vos pages doivent ĂŞtre responsives pour tablettes et smartphone.
– Nous vĂ©rifions que vos pages s’affichent correctement mĂŞme hors-ligne.
– On met en place des mĂ©tadonnĂ©es pour permettre l’ajout du site/application Ă la page d’accueil.
– Nous vĂ©rifions que le temps de chargement soit ultra rapide, mĂŞme avec une connexion faible.
– Les transitions doivent ĂŞtre impeccables.
– La plateforme fonctionne sans problème, peu importe le navigateur utilisĂ© (Chrome, Edge, Firefox, Safari).
– Enfin, chaque page a sa propre URL unique avec une possibilitĂ© de linking en profondeur.
Pour un fonctionnement idéal
– Pour obtenir une Progressive Web App parfaitement fonctionnelle, nous suggĂ©rons Ă©galement de vĂ©rifier les points suivants.
– Le contenu de votre site doit ĂŞtre indexĂ© par les moteurs de recherche.
– Des balises de donnĂ©es structurĂ©es de Schema.org sont implĂ©mentĂ©es lĂ oĂą elles sont requises
– Des mĂ©tadonnĂ©es sociales sont conseillĂ©es s’il y a lieu, pour optimiser le rendu via Facebook et Twitter, par exemple.
– Les URLs canoniques sont renseignĂ©es lorsque c’est nĂ©cessaire (si votre contenu s’affiche sous plusieurs URLs).
– Pour les applications Ă page unique, il faut Ă©viter les identificateurs de fragments, c’est-Ă -dire tout ce qui suit # dans une URL.
Pour une expérience utilisateur optimale
Aujourd’hui l’expérience utilisateur est le point névralgique du web, c’est sur ce point que Google veut mettre l’accent. Il est donc important de bien le penser et d’y prêter une attention toute particulière.
– Le contenu ne saute pas quand la page se charge.
– Revenir en arrière conserve la position de dĂ©filement sur la page prĂ©cĂ©dente.
– Le clavier Ă l’écran ne masque pas les entrĂ©es que l’utilisateur touche.
– Le contenu se partage facilement en plein Ă©cran ou non.
– Le site est responsive, que ce soit sur un Ă©cran de tĂ©lĂ©phone, un Ă©cran de tablette ou sur un ordinateur.
– Aucune invite d’installation d’application n’est utilisĂ©e de façon excessive.
– L’invite “Ajouter Ă l’Ă©cran” d’accueil est interceptĂ©e.
Gestion des notifications push
– Fournir Ă l’utilisateur toutes les informations dont il aura besoin pour savoir comment les notifications seront utilisĂ©es.
– L’interface utilisateur encourageant les utilisateurs Ă activer les notifications push ne doit pas ĂŞtre trop agressive.
– L’écran est sombre lorsque la demande de notification s’affiche.
– Les notifications sont prĂ©cises, pertinentes et opportunes.
– Les notifications peuvent ĂŞtre facilement activĂ©es et dĂ©sactivĂ©es.
Quelques optimisations supplémentaires sur le pwa
– L’utilisateur est connectĂ© Ă travers tous ses pĂ©riphĂ©riques via le gestionnaire des informations d’authentification.
– L’utilisateur peut payer facilement via l’interface utilisateur native Ă partir de l’API Payment Request.
Finalisation vers une Progressive Web Appr6
Une fois que tout votre site est sécurisé, et que vous avez vérifié cette rapide checklist, il suffit d’installer un module qui va prendre en charge le processus. Celui-ci va créer un fichier qui décrit le site comme une application. Il ne reste qu’à ajouter vos logos aux formats adéquats.
Contactez-nous pour toute information supplémentaire. Nous pouvons réaliser pour vous une application à partir de votre site internet avec ce procédé.
Un article rédigé pour vous par JP Loup
He’s sexy and he knows it, you can touch his mustach. "Issu de l'imaginaire de l'équipe, Jean-Pierre Loup c'est une mascotte, une égérie, un mythe. Il vous propose dans ce blog de découvrir les coulisses du web à travers la plume virtuelle des gens qui sont passés par l'agence Keole : stagiaires, anciens employés, amis, famille..." Spécialités : sauver le monde | taper l'incruste | raconter de belles histoires. Il aime : se compliquer la vie, car optimisé c'est triché | les arrêts maladie | la deeptechnopunktrancealternative. Il aime pas : réfléchir à outrance | les au revoir | signer ses mails avec un "Cordialement".