Parlons technique

Il est temps d’aborder le côté technique des PWA et AMP. Commençons par les trois concepts qui entourent une PWA :

  1. La description des métadonnées du site mobile dans un fichier manifest.json (nom de l’appli + icône à utiliser + URL pour démarrer + orientation de l’écran +mode d’affichage + couleur du thème)
  2. L’intégration d’un fichier Javascript comme proxy interne pour la fonctionnalité hors-connexion
  3. Le squelette de l’application avec l’application Shell pour faire apparaître rapidement l’aperçu du site.

Poursuivons par les outils qui permettent de développer une PWA :

  •  » Lighthouse PWA Anlysis Tool  » : outil de Google pour évaluer la qualité d’un site web par rapport aux principes d’une PWA.
  •  » Mobile HTML5.org  » : cet outil permet de tester le bon fonctionnement d’une PWA
  •  » Web App Manifest Generator  » : c’est un outil qui automatise la création du fichier manifest.json
  •  » What Web can Do Today  » : l’outil aide à connaître quels fonctionnalités sont compatibles avec tels navigateurs.

Continuons avec les 3 concepts qui entourent le format AMP :

  1. AMP HTML : c’est le code HTML qui réduit la taille des fichiers pour un chargement rapide.
  2. AMP Javascript : cela permet d’avoir un rendu graphique immédiat
  3. Caches AMP : le code HTML est chargé instantanément.

Puis, des plugins existent pour le CMS WordPress, ce qui facilite la tâche. Joomla et Drupal ont également un plugin pour l’AMP. Ensuite, des outils sont mis à disposition pour savoir si le site suit les principes de l’AMP :

  • « The AMP Validator » : outil qui permet de tester l’efficacité des AMP
  • « Google Search Console : test amp » : c’est un outil qui permet de savoir si votre page AMP est valide

Doit-on associer AMP et PWA ensemble ?

On a l’impression que le format AMP est proche des PWA néanmoins il faut savoir qu’il y a quelques différences. Le format AMP n’est valable que pour les pages de contenus (appelés page cms sur les sites développés avec un cms) tandis que PWA intègre les fonctionnalités d’une application.

Et si une combinaison des deux technologies pouvait améliorer l’expérience utilisateur ? Comme le combo gagnant du référencement SEM = SEO + SEA + SMO.

Les deux technologies PWA et AMP s’associent pour faciliter le SXO (UX et SEO) que ce soit sur mobile ou Desktop. Par conséquent, l’association de ces deux concepts serait une solution efficace pour améliorer un site Internet. Cela permettrait de prendre que les points forts de chacune des technologies. D’ici 2022, le standard technologie sera le PWAMP.

Voici les points forts qu’on retrouve si on associe AMP et PWA ensemble :

  • Chargement de la 1ère page instantanément
  • Optimisation SEO
  • Mise en avant de l’expérience utilisateur riche
  • Chargement des pages rapides après le passage de l’AMP
  • Fonctionnalités avancées : hors connexion par exemple

PWA + AMP = PWAMP