PWA vs AMP : quel est le meilleur 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 le mode de vie de ses utilisateurs. Le pincement et le zoom ont été effacés par les pages réactives. AMP et les applications natives luttent contre les temps de chargement lents…

Mais il reste un problème majeur pour le Web mobile : l'engagement. Les 1 000 meilleurs 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, se sentir et fonctionner comme le font les applications mobiles natives. Les utilisateurs les rencontrent dans un navigateur comme ils le feraient pour n'importe quel site Web mobile. Après s'être engagé sur 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 comme le ferait une application native.

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 ne montrez 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é.
• Engager - Sentez-vous comme une application naturelle sur l'appareil, avec une expérience utilisateur immersive.

Une fois ces exigences satisfaites, l'application Web mobile peut être proposée en téléchargement 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 simplifiée de HTML et CSS qui limite l'utilisation de JavaScript. Ces pages sont hébergées sur un CDN, qui fournit une version 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 d'abord générer une adhésion considérable de la part 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 choses comme 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 d'être concurrentielle sur Google Play ou l'App Store, vous devrez vous plier aux règles du marché. Les restrictions de contenu et les frais compliquent la création d'applications natives réussies pour certains sites Web. Pour les applications Web, cependant, aucune restriction de contenu ni 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 natif.
• Installation : l'installation d'une application native nécessite une action importante de la part de l'utilisateur. Ils doivent ouvrir un marché et rechercher une application, puis la télécharger. Il doit y avoir une intention sérieuse. Pour l'installation d'une application Web progressive, il y a beaucoup moins de friction. En ajouter un à votre appareil revient à 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 réduisent continuellement l'écart. C'est particulièrement vrai lorsque vous considérez la comparaison suivante.

Applications Web progressives vs AMP

Des gens comme Gazdecki pensent que les applications Web progressives remplaceront éventuellement les applications natives, mais qu'en est-il de l'AMP ? Où les pages mobiles accélérées entrent-elles 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'un coup de pouce dans la découvrabilité des moteurs de recherche.
• Engagement : les applications Web progressives ne sont pas limitées à l'utilisation d'AMP HTML ou CSS, elles peuvent donc inclure un contenu beaucoup plus attrayant que l'AMP. Tout élément interactif nécessitant JavaScript ne peut pas être créé à l'aide du framework AMP. Pour AMP, le contenu dynamique n'est pas de mise.
• Vitesse : l'avantage revient 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 accélère les temps de chargement.

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

Pour rendre l'expérience fiable et rapide, 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 hautement 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 lors de 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 que l'AMP dès le premier clic, car les plates-formes peuvent pré-rendre 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 ?

La coopération plutôt que la 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 les applications Web progressives sont de plus en plus répandues, les développeurs tirant parti des 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 agent de service, 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 ensemble AMP et une application Web progressive consiste à considérer votre page AMP comme le crochet 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 à 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 ?

La création d'une expérience rapide de type application native 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.