PWA : Transformer son site en application

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é.