PWA vs AMP : qu'est-ce qui est le mieux et en quoi sont-ils différents les uns des autres ?

Environ une décennie après l'introduction du premier iPhone, le Web mobile rattrape enfin les modes de vie de ses utilisateurs. Le pincement et le zoom ont été effacés par les pages réactives. AMP et les applications natives combattent les temps de chargement lents…

Mais il reste un problème majeur pour le web mobile : l'engagement. Les 1 000 premiers sites Web mobiles touchent 4 fois plus de personnes que les 1 000 meilleures applications natives. Cependant, ces sites Web engagent les utilisateurs pendant 20 fois moins de minutes, en moyenne, que les applications mobiles.

Il semble que les sites Web mobiles puissent attirer des visiteurs, mais pas les retenir. Les applications Web progressives sont l'une des technologies les plus récentes qui résolvent ce problème.

Que sont les applications Web progressives ?

Les applications Web progressives sont des expériences de sites Web mobiles conçues pour ressembler, ressentir et fonctionner de la même manière que les applications mobiles natives. Les utilisateurs les rencontrent dans un navigateur comme ils le feraient sur n'importe quel site Web mobile. Après avoir consulté ce site, l'utilisateur est invité à installer l'application Web sur son appareil. S'ils choisissent de l'installer, l'application sera téléchargée sur l'appareil de la même manière qu'une application native le ferait.

Le terme « applications Web progressives » a été inventé par Google en 2015. La société affirme que les applications Web progressives répondent à trois critères :

• Fiable - Chargez instantanément et n'affichez jamais le downasaur, même dans des conditions de réseau incertaines.
• Rapide – Répondez rapidement aux interactions des utilisateurs avec des animations fluides et sans défilement saccadé.
• Engageant - Sentez-vous comme une application naturelle sur l'appareil, avec une expérience utilisateur immersive.

Une fois ces exigences remplies, l'application Web mobile peut être proposée en tant que téléchargeable aux utilisateurs. Avant de plonger plus profondément dans les applications Web progressives, revenons brièvement à la surface et définissons les applications natives et une autre technologie accélérant le Web mobile, Accelerated Mobile Pages (AMP).

Qu'est-ce qu'une application native ?

Les applications natives sont installées via un marché comme l'App Store ou Google Play et vivent sous forme d'icônes sur l'écran d'accueil d'un appareil. Ils sont conçus spécifiquement pour un appareil particulier et peuvent utiliser toutes ses fonctionnalités, telles que le GPS, l'appareil photo, la liste de contacts, etc. Ce sont des applications susceptibles d'être actuellement sur votre appareil, comme Google Maps, Gmail ou Instagram.

Qu'est-ce que l'AMP ?

Le projet open source Accelerated Mobile Pages (AMP en abrégé) permet aux développeurs de créer des pages Web qui se chargent presque instantanément avec un langage de codage unique. Ce langage est une version allégée de HTML et CSS qui restreint l'utilisation de JavaScript. Ces pages sont hébergées sur un CDN, qui fournit une version mise en cache de la page lorsqu'elle est visitée par un utilisateur.

Applications Web progressives vs applications natives

Les applications natives offrent des expériences utilisateur instantanées et transparentes, et elles sont prises en charge par de grands marchés comme l'App Store et Google Play, alors pourquoi opter pour une application Web progressive plutôt que la version native traditionnelle ? Dans un article pour Forbes, Andrew Gazdecki propose une explication de haut niveau :

Les sites Web mobiles sont rapides et faciles d'accès, mais ils ont tendance à être moins agréables en ce qui concerne l'expérience utilisateur. Les applications natives offrent la meilleure expérience utilisateur, mais elles sont limitées à certains appareils et présentent des obstacles élevés à l'adoption. Les applications natives nécessitent un téléchargement, ce qui signifie générer d'abord une adhésion considérable des consommateurs et perdre le bénéfice du comportement impulsif. Entre ces options se trouve la toute dernière solution mobile : la PWA.

Pour une explication plus précise, examinons certaines des plus grandes différences entre les applications natives et les applications Web progressives :

• Utilisation des fonctionnalités : actuellement, alors que les applications Web peuvent tirer parti des fonctionnalités d'un appareil, les applications natives le peuvent davantage. Des éléments tels que le GPS, les notifications push et les gestes sont plus facilement disponibles dans une application native.
• Restrictions de contenu : pour donner à votre application une chance de rivaliser sur Google Play ou l'App Store, vous devrez vous plier aux règles du marché. Les restrictions de contenu et les frais rendent difficile la création d'applications natives réussies pour certains sites Web. Pour les applications Web, cependant, aucune restriction de contenu ni aucun frais ne sont imposés, ce qui permet à quiconque de créer plus facilement une application, quel que soit le type de contenu.
• Connectivité hors ligne : ici, l'avantage va aux applications natives, qui offrent une mise en cache plus complète que les applications Web progressives construites en HTML5. Si votre application doit fonctionner hors ligne, le meilleur choix est actuellement le natif.
• Installation : l' installation d'une application native nécessite une action importante de la part de l'utilisateur. Ils doivent ouvrir une place de marché et rechercher une application, puis la télécharger. Il doit y avoir une intention sérieuse. Pour l'installation d'une web app progressive, il y a beaucoup moins de frictions. En ajouter un à votre appareil, c'est comme créer un signet sur votre écran d'accueil. Il est plus facile d'installer une application Web progressive, mais le processus est beaucoup moins familier, ce qui peut empêcher une adoption précoce.

• Vitesse : actuellement, les applications Web progressives sont à la traîne par rapport aux applications natives. Cependant, ils comblent continuellement l'écart. C'est particulièrement vrai lorsque l'on considère la comparaison suivante.

Applications Web progressives vs AMP

Des gens comme Gazdecki pensent que les applications Web progressives finiront par remplacer les applications natives, mais qu'en est-il de l'AMP ? D'où viennent les pages mobiles accélérées ici, et y a-t-il une place pour les deux ? Quelques différences clés entre ces deux:

• Découvrabilité : AMP remporte cette bataille. AMP obtient l'aide d'un carrousel dans les résultats de recherche Google, où les applications Web progressives ne bénéficient pas d'une meilleure visibilité sur les moteurs de recherche.
• Engagement : les applications Web progressives ne sont pas limitées à l'utilisation de HTML ou CSS AMP, elles peuvent donc inclure un contenu beaucoup plus attrayant qu'AMP. Tout ce qui est interactif nécessitant JavaScript ne peut pas être créé à l'aide du framework AMP. Pour AMP, le contenu dynamique est exclu.
• Vitesse : l'avantage va ici à AMP pour la même raison que les applications Web progressives gagnent en engagement. AMP ne peut prendre en charge que du contenu léger, mais cela permet des temps de chargement plus rapides.

Dans Smashing Magazine, Paul Bakaus résume bien le compromis entre les deux formats :

Pour rendre l'expérience rapide et fiable, vous devez vivre avec certaines contraintes lors de la mise en œuvre des pages AMP. AMP n'est pas utile lorsque vous avez besoin de fonctionnalités très dynamiques, telles que les notifications push ou les paiements Web, ou tout ce qui nécessite du JavaScript supplémentaire.

De plus, étant donné que les pages AMP sont généralement servies à partir d'un cache AMP, vous n'obtiendrez pas les plus grands avantages de l'application Web progressive sur ce premier clic, car votre propre Service Worker ne peut pas s'exécuter. D'un autre côté, une application Web progressive ne peut jamais être aussi rapide qu'AMP sur ce premier clic, car les plates-formes peuvent pré-afficher les pages AMP en toute sécurité et à moindre coût - une fonctionnalité qui simplifie également l'intégration (par exemple, dans une visionneuse en ligne).

Mais au final, faut-il vraiment choisir l'un plutôt que l'autre ?

Coopération plutôt que compétition

Vous pouvez choisir d'utiliser AMP uniquement pour créer une expérience rapide mais simple. Vous pouvez compter sur une application Web progressive pour créer une expérience utilisateur dynamique mais plus lente. Ou, vous pouvez commencer rapidement et rester rapide en incorporant les deux dans votre conception Web.

Aujourd'hui, les utilisations d'AMP avec des applications Web progressives sont de plus en plus répandues, les développeurs exploitant les deux de trois manières.

1. AMP en tant qu'application Web progressive

Si votre contenu est principalement statique et que vous pouvez vous contenter des fonctionnalités limitées d'AMP, cette option vous permet de créer des expériences ultra-rapides en tant qu'application Web progressive. AMP par exemple, est construit comme ceci - une application Web progressive entièrement chargée en AMP. Il dispose d'un service worker, qui permet un accès hors ligne, ainsi que d'un manifeste, qui affiche la bannière « Ajouter à l'écran d'accueil ».

2. AMP vers une application Web progressive

Une autre façon d'utiliser AMP et une application Web progressive consiste à considérer votre page AMP comme le point d'ancrage de votre site Web. Il attrape l'utilisateur avec une charge instantanée, puis l'enroule dans votre application Web progressive. Cela vous permet de combiner les pages AMP à chargement rapide avec une PWA plus dynamique que la première option.

3. AMP dans une application Web progressive

Comme c'était le cas avec AMP contre PWA, il n'est pas nécessaire que ce soit tout ou rien. Vous n'avez pas besoin de créer toutes vos pages avec AMP ; vous n'avez pas non plus besoin de séparer les AMP et les PWA en tant que crochet et tige. Désormais, vous ne pouvez réellement AMP qu'une petite sous-section d'une seule page, diminuant ainsi sa taille et réduisant son temps de chargement sans le compromis complet de la fonctionnalité dynamique.

Cela implique l'utilisation d'une autre forme d'AMP appelée "Shadow AMP", qui permet à l'AMP de s'imbriquer dans une zone d'une page Web. Le résultat est AMP dans le shell d'une application Web progressive. Pour le voir en action, consultez la démo créée par Google et appelée ShadowReader :

Prêt à créer votre propre application Web progressive ?

Créer une expérience de type application native rapide avec la possibilité de découvrir le Web commence ici, où vous pouvez apprendre toutes les cases que vous devez cocher pour répondre aux critères de Google pour les PWA. Pour plus d'informations sur l'utilisation conjointe d'AMP et de PWA, consultez :

• Cette conférence de Ben Morss
• Cette conférence d'Eric Lindley

Lorsque vous êtes prêt, commencez à utiliser le générateur de page de destination post-clic AMP dans Instapage pour offrir votre expérience utilisateur la plus rapide à ce jour.