Vous avez sans doute entendu parler de la vague à venir du Web mobile. La chose la plus commune que vous avez probablement entendue est que l’accès mobile au Web augmente rapidement, et qu’environ la moitié de tout le trafic Web est maintenant par téléphone ou tablette. Un rapport de février 2018 du Pew Research Center note que 95% de tous les Américains possèdent un téléphone portable, alors que la part des Américains avec les smartphones est de 77%.
Vous n’avez pas à chercher loin pour voir l’impact du mobile. Regardez votre propre comportement et celui de votre famille. En décembre 2016, comScore a rapporté que l’Américain moyen de plus de 17 ans passait deux heures et 51 minutes par jour sur son téléphone (Englais).
Statcounter.com note que le trafic Web mondial provient principalement des appareils mobiles depuis au moins un an (51,95% en février 2018).
Alors que vous pouvez penser que vous ne pouvez pas vous permettre de développer une application native pour vos utilisateurs mobiles pour stocker sur leurs téléphones, il existe une alternative formidable à la portée de toutes les entreprises: Progressive Web Applications. Peut-être avez-vous entendu parler des applications Web progressistes (PWA) et comment les gens les utilisent pour développer leur entreprise. Dans cet article, vous en apprendrez un peu plus sur les PWA et pourquoi vous devriez réfléchir d’avantage à leur utilisation en 2018.
Quelques définitions
Les applications Web progressives (PWA) représentent une collection de normes Web développées à l’origine par Google pour améliorer les performances des sites Web sur les appareils mobiles. Par conséquent, les sites Web fonctionnent d’avantage comme des applications mobiles dédiées que vous trouverez sur l’App Store d’Apple ou sur Google Play.
Une autre définition des développeurs pour la chaîne hôtelière indienne Treebo : « Les PWA sont des applications sous forme d’une seule page qui sont progressivement améliorées avec des fonctionnalités qui apportent une expérience native plus immersive. »
En réduisant cela un peu, les PWA sur les appareils mobiles permettent à vos lecteurs et clients de charger rapidement la page d’accueil de votre site et d’utiliser la plupart des mêmes fonctionnalités sur l’appareil mobile qu’une application native utiliserait. Votre site peut exister en dehors du navigateur, même lorsque l’appareil n’est pas connecté à Internet.
Autres définitions
Certaines des pièces techniques clés d’un PWA comprennent:
Les Services Workers sont la technologie clé associée aux PWA. Ceux-ci permettent aux PWA de fonctionner en dehors du réseau.
Les fichiers manifestes contiennent l’icône et le nom qui relie l’application sur le périphérique au site Web. Le développeur peut également ajouter des éléments de conception ici pour améliorer votre expérience client.
Les notifications push communiquent avec vos utilisateurs (avec leur permission), alors ils reviennent.
Certaines raisons
Alors pourquoi votre site devrait-il inclure un PWA ? C’est plutôt simple.
Meilleure performance – même sur le bureau !
Vous savez que vous disposez d’un temps limité pour gagner un visiteur pour la première fois – six secondes de chargement avant qu’un client potentiel se retire et visite le prochain site sur les résultats de recherche. Les utilisateurs mobiles sont encore plus impatients – la moitié de vos utilisateurs potentiels partent si un site prend plus de 3 secondes à charger !
Bonne nouvelle: les modifications que vous apportez pour créer une application Web progressive accélèreront votre site !
Exemple: La société hôtelière indienne Treebo a réduit son temps de chargement mobile de six secondes à 1,5 seconde en créant son PWA. Le site se charge maintenant sur le bureau en une seconde ! Leur équipe technique a signalé que les classements de recherche du site se sont améliorés et que le taux de conversion mensuel a plus que doublé !
Capacité hors ligne
Les PVA n’ont pas besoin d’être sur Internet pour s’exécuter. Vos utilisateurs peuvent accéder à tout le contenu de l’application depuis leur appareil ou leur bureau.
En fait, l’une des plus belles choses à propos d’un PWA est que votre client peut enregistrer le site sur la page d’accueil de son appareil et l’utiliser plus tard pour acheter votre produit, ou obtenir plus d’informations.
Par exemple, Tech Today de CNET offre un résumé quotidien des nouvelles liées à la technologie qui constituent le pain quotidien du site. Si vous ouvrez le site avec Google Chrome sur un appareil Android et que vous faites défiler vers le bas de l’écran, vous verrez ceci:
Appuyez sur Ajouter à l’écran d’accueil pour télécharger l’application Web progressive de Tech Today sur votre appareil. Appuyez sur l’icône pour charger les 10 meilleures histoires actuelles. Balayez vers la gauche pour lire chaque histoire. Appuyez sur le logo CNET pour ouvrir la page d’accueil de CNET sur votre navigateur.
Remarque : sur Firefox, les sites avec PWA ont une icône « Ajouter à la page d’accueil » (un signe plus dans une minuscule case) directement sur la barre d’adresse. Si le PWA est déjà installé, le logo Android sur la barre d’adresse vous amène au PWA.
Une chose dont votre site n’a pas besoin: les widgets « Télécharger notre application » prennent de la place sur votre page (généralement avec les logos d’iTunes et d’Android distrayant les utilisateurs). Si Chrome remarque qu’un utilisateur a ouvert votre site PWA plusieurs fois par semaine, il vous invite à ajouter votre PWA. Les mises à jour sont également automatiques.
Pas besoin de langages de programmation complexes
Vous avez peut-être envisagé de créer une application mobile native pour votre entreprise, mais vous avez découvert que la création d’une application mobile est un animal différent de la création d’un site Web. Si vous travaillez avec une agence de conception / développement Web pour maintenir votre site, ils n’auront pas nécessairement les compétences nécessaires pour créer une application pour les fournisseurs mobiles dominants.
Pour que votre logiciel s’affiche dans l’App Store d’Apple, vos développeurs doivent s’enregistrer auprès d’Apple Developer Network, utiliser l’outil de développement d’Apple (qui fonctionne uniquement sur Mac) et connaître un langage de programmation approuvé par Apple: Swift ou Objective C.
La programmation pour Android est un peu plus facile (aucune approbation de développeur n’est requise), mais la grande majorité des applications Android sont écrites en Java, ce qui peut être une langue difficile à apprendre.
Pour que l’application apparaisse dans les boutiques en ligne Apple ou Android, l’application complétée doit obtenir l’approbation des gardiens du magasin respectif.
En revanche, les applications Web progressives sont créées avec les langages courants du Web: HTML, CSS (Cascading Style Sheets) et JavaScript. En bref, même les développeurs Web débutants peuvent créer des PWA de haute qualité.
Plus précisément, vous n’avez pas besoin de beaucoup d’éducation en informatique pour faire un PWA pour votre site WordPress. Si vous avez déjà modifié la mise en forme de votre site à l’aide d’un thème enfant, vous pouvez également créer un fichier PWA. Nous aborderons les problèmes de codage dans un autre article.
Augmenter le soutien des géants de la technologie
Les normes prennent beaucoup de temps pour devenir des normes. Google a d’abord promu les PWA en 2015.
Pendant longtemps, Chrome a été le seul navigateur à supporter les PWA, mais cela est en train de changer. Au cours des derniers mois:
- Mozilla a ajouté le support PWA dans Firefox 58
- Apple a récemment annoncé la prise en charge des applications Web dans iOS
- Microsoft prendra en charge les PWA dans la prochaine version de Windows 10, qui sera disponible plus tard cette année (2018).
Allant plus loin que les autres fournisseurs de systèmes d’exploitation, Microsoft a déclaré que les PWA de «haute qualité» seront bientôt intégrés dans l’app store de Windows 10 sur les mobiles et les ordinateurs de bureau.
WordPress et PWAs
WordPress ne supporte pas encore complètement la création d’applications web progressives dans l’application de base. L’équipe Jetpack s’est engagée à ajouter des fonctionnalités PWA dans l’année à venir. Ceci est aidé par le Javascript-ification de WordPress.
Jetpack « introduit progressivement les fonctionnalités PWA dès qu’elles sont prêtes », selon le développeur Dan Walmsley dans un article sur le blog VIP WordPress . Les développeurs peuvent ajouter des fichiers manifestes en utilisant le module manifeste de Jetpack depuis la version 5.6.0, et ils ont introduit le chargement progressif d’image, ce qui accélère le chargement du site même lorsqu’il y a beaucoup d’images sur la page. Plus de fonctionnalités seront à venir cette année.
Quelques plugins cherchent à ajouter une fonctionnalité PWA, mais n’ont pas été lourdement adoptés.
- L’outil WordPress Optimization fournit un outil de travail et de manifeste.
- Super Progressive Web Apps génère un manifeste et un bouton Ajouter à l’écran d’accueil, parmi d’autres fonctionnalités.
- Le pack WordPress Mobile ajoute également des fonctionnalités PWA
Comment allez-vous utiliser les PWA ?
Dans ce tutoriel, vous avez un peu appris sur Progressive Web Apps et pourquoi devriez-vous en ajouter un sur le site Web de votre entreprise:
- La vague croissante de trafic provenant des appareils mobiles
- De meilleures performances pour votre site Web – mobile et de bureau
- Disponibilité même lorsque l’appareil est hors ligne
- Utilise les fonctionnalités Web standard: HTML, CSS et Javascript. Moins cher à construire
- Augmentation du support des navigateurs et des systèmes d’exploitation
Peut-être que maintenant vous voulez savoir comment faire un PWA sur WordPress ? Ou montrez à vos développeurs comment y arriver ? Ceci sera l’objet d’un autre tutoriel.