Qu'est-ce qu'une application Web progressive (et pourquoi vous en soucier)?

En 2016, les utilisateurs mobiles ont d'abord dépassé ceux qui accèdent au Web à partir de périphériques de bureau. Depuis lors, le mobile n'a montré aucun signe de ralentissement.

Alors que tout le monde cherche à créer des sites Web et des applications Web plus conviviaux pour les mobiles, vous commencerez de plus en plus à trouver l'expression «application Web progressive». Aujourd'hui, nous examinons en quoi cela consiste, en quoi cela diffère d'autres technologies comme AMP et comment commencer.

Mobile ne ralentit pas

Une étude de Stone Temple montre comment ce fossé continue de se creuser d'année en année. Voici comment ces tendances d'utilisation ont changé de 2016 à 2017 aux États-Unis uniquement:

Et le mobile semble être encore plus populaire auprès des utilisateurs mondiaux:

En tant que tels, nous devons nous demander: «Comment améliorer l'expérience mobile actuelle? Avons-nous atteint le summum de la convivialité mobile ??

Google a pris l'initiative de répondre à cette question avec l'introduction de l'application Web progressive en 2015. Explorons l'avenir du Web mobile avec les applications Web progressives et les raisons pour lesquelles vous devriez vous en soucier.

Qu'est-ce qu'une application Web progressive?

Une application Web progressive (PWA) est une application qui comble le fossé entre les sites Web mobiles et les applications mobiles. Il serait facile de décrire un PWA comme un site Web mobile intégré à un shell d'application, mais cela ne se résume pas à cela.

Essentiellement, il prend l’expérience mobile souhaitée par les utilisateurs et l’amplifie avec tout ce qu’il y a de mieux à avoir sa propre application native entièrement réactive. Vous pouvez vous attendre aux éléments suivants d'une application Web progressive:

  • Interface utilisateur et navigation de type application
  • Pagespeed
  • Fiabilité
  • Présence sur l'écran d'accueil
  • Capacités hors ligne
  • Fonctions de téléphonie (comme les notifications push et la géolocalisation)

Il existe de nombreux types de sites Web pouvant bénéficier d'un PWA. Les réseaux sociaux comme Twitter ont déjà fait le changement.

Des sociétés de médias comme Forbes, des sites immobiliers comme Housing.com et des services d'hébergement comme Ele.me ont également déployé des AHP avec succès.

Chacune a eu des résultats différents, même si le résultat est toujours le même: temps de chargement plus rapide, interface utilisateur améliorée, grande commodité et accès. Qui mènent tous à des utilisateurs plus engagés.

Comment créez-vous une application Web progressive?

Contrairement aux applications natives, qui nécessitent généralement l’embauche de développeurs pour gérer le processus et un investissement important en fonds, les applications Web progressives sont beaucoup plus simples et souvent moins chères à créer.

Une application Web progressive se compose de deux parties: un manifeste d'applications Web et des employés de service. Permettez-moi d'expliquer davantage.

Manifeste Web App

Il s'agit d'un fichier JSON qui définit les éléments de type d'application d'un PWA. Il comprend des choses comme:

  • Nom de l'application
  • Icône de l'application
  • Conception de navigation et éléments pour l'en-tête et / ou le pied de page
  • Conception de l'écran de démarrage
  • Autres métadonnées

Travailleurs de service

Ce sont les travailleurs du service qui donnent vraiment aux applications Web progressives leur pouvoir sur l'expérience Web standard.

Les ouvriers de service sont configurés via un fichier JavaScript. Ils font en sorte que votre application fonctionne de la manière la plus efficace et rapide possible. De plus, que vos utilisateurs soient en ligne ou hors ligne, ils ont toujours accès à votre contenu, de la même manière que les opérateurs de services fonctionnent de la même manière que les serveurs proxy de mise en cache.

Pour ce qui est de la création d’une application Web progressive, vous avez plusieurs options.

La première option consiste à utiliser la documentation destinée aux développeurs de Google et à créer votre propre fichier PWA. Mais cette option nécessite toujours un investissement de votre temps et de vos ressources.

Si vous n'êtes pas prêt à gérer ce niveau de travail, ou si vous préférez concentrer vos énergies ailleurs, vous pouvez utiliser un outil tel que la plate-forme de conception Web Duda pour convertir facilement votre site Web en une application Web progressive.

Il suffit d’un clic pour activer la fonctionnalité et de quelques-unes de plus pour la configurer à votre guise!

Comment une application Web progressive est-elle différente d'un site Web?

Comme vous pouvez le constater d'après le rapport 2017 sur les applications mobiles numériques de comScore, les utilisateurs mobiles passent la plupart du temps sur leur téléphone avec des applications et non avec des sites Web basés sur un navigateur.

Il existe de très bonnes (et valides) raisons pour lesquelles les utilisateurs mobiles préfèrent l'expérience de type application au navigateur de base. Et, parce que PWA aide les utilisateurs à faire ce saut sans avoir à s’engager dans un autre téléchargement gourmand en ressources à partir de l’app store, vous devez prêter une attention particulière aux différences et aux avantages suivants.

Les applications Web progressives constituent le choix optimal par rapport au Web mobile pour les raisons suivantes:

  • Un PWA est conçu pour être plus attrayant, car il utilise des barres d’outils et des éléments faciles à trouver.
  • Les utilisateurs ajoutent votre icône à leur écran d'accueil. Cela augmente la visibilité, ce qui les rend plus susceptibles d'interagir avec votre application.
  • Les navigateurs Android invitent automatiquement les utilisateurs à? Installer? PWA à leurs écrans d'accueil, ce qui augmente le facteur de commodité.
  • Les PWA entraînent des temps de chargement incroyablement rapides.
  • Les agents de service renforcent la fiabilité de l'accès aux PWA, car ils sont indépendants de la connectivité.
  • Les PWA s'intègrent de manière transparente aux fonctionnalités de téléphonie des utilisateurs; notamment les notifications push, les services de clics téléphoniques et les services de géolocalisation.
  • HTTPS est une exigence de tous les PWA, ce qui les rend intrinsèquement plus sécurisés que le Web.
  • Mynet est l'une de ces sociétés qui a pris note de la différence radicale entre l'expérience de son site Web mobile et son application mobile.

    Alors que 85% du trafic reçu par Mynet provenait du Web mobile, les utilisateurs passaient deux fois plus de temps dans le pendant de l'application mobile. Une fois que la marque de médias turque a lancé son PWA (avec l’aide d’un contenu optimisé par AMP), Mynet a vu ses pages vues et son temps passer sur site considérablement améliorer.

    En quoi une application Web progressive est-elle différente des pages mobiles accélérées?

    Que veulent les utilisateurs mobiles? Rapidité, commodité et convivialité sont des atouts exceptionnels pour les articles PWA et AMP. Cela dit, il existe une différence nette entre les deux plates-formes compatibles avec les appareils mobiles créées par Google.

    AMP, ou Accelerated Mobile Pages, maintient les utilisateurs dans le navigateur mobile. Cependant, il réduit considérablement les temps de chargement en supprimant ou en optimisant les éléments qui ont tendance à ralentir la vitesse de chargement du navigateur, tels que:

    • JavaScript bloquant le rendu
    • Fichiers lourds
    • Scripts externes
    • CSS gonflé
    • Animations coûteuses en ressources

    Fondamentalement, il prend tous les éléments du backend qui alourdissent l'expérience frontale et les transforme en quelque chose de plus léger et plus facile à gérer. De ce fait, certaines parties de l'expérience mobile sont compromises, ce qui explique pourquoi AMP est idéal pour les sites Web à fort contenu, qui privilégient la lisibilité par rapport à la fonctionnalité.

    Les PWA, d’autre part, sont aussi rapides que l’AMP, mais ne sacrifiez pas les fonctionnalités pour le faire. C'est pourquoi les PWA sont plus diversifiés.

    Cependant, ce que de nombreux utilisateurs ne réalisent peut-être pas, c’est qu’il ne faut pas choisir entre l’un ou l’autre. Google a développé ces solutions pour qu'elles puissent fonctionner en tandem. Le cas d'espèce est Wego.

    AMP a été associé aux opérateurs de service PWA pour des vitesses de chargement ultra-rapides (moins de 1 seconde). Cela s'est traduit par de grandes améliorations des visites de produits biologiques (+ 12%) et des conversions (95% de plus). Wego a également découvert que le chargement plus rapide des pages signifiait plus d'engagement (trois fois plus) avec les éléments monétisés de l'application.

    Quelle est la différence entre une application Web progressive et une application native?

    Une étude Localytics de 2016 montre à quel point il peut être difficile pour les applications natives de revendiquer un emplacement dédié sur les appareils mobiles des utilisateurs:

    Bien sûr, une fois qu'une application a fait ses preuves et incité les utilisateurs à se connecter et à s'engager près d'une douzaine de fois, ces taux de rétention semblent plutôt solides. Mais que se passe-t-il ici? Pourquoi les utilisateurs aiment les applications mobiles, mais ne peuvent pas s'y engager?

    Eh bien, lorsque vous comparez une application native à une application Web progressive, vous pouvez voir une nette différence entre les raisons pour lesquelles le Web mobile se déplace de plus en plus vers le PWA:

    Coût

    Construire un PWA coûte beaucoup moins cher, ce qui le rend accessible à plus d'entreprises.

    Possibilité de recherche

    Les PWA peuvent être classés comme n'importe quel site Web mobile classique. Cela signifie que les utilisateurs sont plus susceptibles de les rencontrer que ceux qui doivent se rendre sur la boutique d'applications dédiée de leur appareil.

    Ressources

    Les PVA ont tendance à être maigres, grâce aux travailleurs du service Les applications natives, en tant que bande passante et ressources de stockage, ne peuvent rivaliser avec cela. Selon le rapport de comScore, l'une des principales raisons pour lesquelles les utilisateurs suppriment une application est due à la quantité d'espace utilisée:

    La flexibilité

    En général, les applications natives sont construites pour un appareil sur un autre: iOS ou Android. L'entretien d'un produit nécessite donc au moins deux fois plus de travail dans la plupart des cas. Toutefois, avec les PWA hébergés dans le navigateur et pouvant exister en dehors d’eux, ils sont compatibles avec tous les navigateurs et appareils.

    Partabilité

    Les PWA ont des URL qui peuvent être facilement partagées avec d’autres. Les applications natives ne le font pas.

    Évidemment, tout cela ne veut pas dire que vous devriez éviter de créer une application native pour votre entreprise si cela a du sens. Les applications natives sont idéales pour des cas d'utilisation très spécifiques. Par exemple:

    Les réseaux sociaux, le chat et les plateformes de divertissement dominent la liste des applications mobiles les plus populaires. Vous trouverez également un grand nombre de concepts de jeu, de productivité et de récompense basés sur les applications.

    Les PVA, en revanche, ne sont généralement pas soumis à de telles restrictions quant aux types d’entreprises les plus performants.

    Résumé

    Alors, pourquoi tout cela importe-t-il? Eh bien, si vous espériez trouver un meilleur moyen de communiquer avec vos utilisateurs mobiles et de dialoguer avec eux, les autres options disponibles ne l’auraient peut-être pas réduit.

    • Le Web mobile est trop contraignant et ne fonctionne pas au-delà des limites du navigateur.
    • AMP est idéal pour les sites axés sur le contenu, mais pas grand chose d'autre.
    • Les applications natives sont une bonne solution pour certains modèles commerciaux, mais leur construction peut être coûteuse, difficile à gérer et difficile à satisfaire les utilisateurs.

    L'application Web progressive prend les forces de chacune de ces plates-formes et les fusionne pour créer ce que nos utilisateurs mobiles souhaitent et dont ils ont besoin. C'est l'avenir du Web mobile.