Vous pouvez maintenant ajouter du JavaScript personnalisé aux pages AMP

Google a annoncé cette semaine que du JavaScript personnalisé peut maintenant être ajouté aux pages AMP. Le nouveau composant amp-script offre plus de flexibilité et d'interactivité.

Le composant amp-script peut être utilisé pour activer les interactions utilisateur et pour partager du code sur les pages AMP et non-AMP.

C’est l’information que Google a partagée dans un récent post :

Plus tôt cette année, à l’AMP Conf, nous avons présenté l'aperçu développeur de <amp-script>. Maintenant, nous annonçons la disponibilité générale de <amp-script>.

Il s'agit d'un composant AMP qui exécute votre propre JavaScript dans un thread de travail distinct. Cela vous permet d'ajouter du JavaScript personnalisé à votre page AMP tout en conservant sa vitesse ultra-rapide !

<amp-script> vous permet de couvrir les cas d'utilisation que vous ne pourriez pas utiliser avec les composants AMP existants. Il vous permet également de partager du code sur vos pages AMP et non-AMP.

Vous pouvez même utiliser un framework JavaScript. Voici quelques exemples que l'équipe travaillant sur <amp-script> a développé :

• Todo MVC à l'aide de Vue,
  
  
• Un vérificateur de mot de passe,
  
  
• Visualisation des données dans un article à l'aide de D3.js,
  
  
• Formulaires de plusieurs pages où chaque section a besoin d'être validée avant de passer à la section suivante comme on peut le voir ci-dessous.

Source : Searchengineland.com

Les fonctionnalités JavaScript, telles que les formulaires de plusieurs pages qui doivent être validés avant de passer à la section suivante, peuvent maintenant être livrées via AMP, comme dans l’exemple ci-dessus.

L'équipe AMP a déclaré que c'était l'une des fonctionnalités les plus demandées par les développeurs utilisant AMP. Elle permet aux pages Web livrées via AMP d'intégrer plus de fonctionnalités d'interactivité que JavaScript offre.

Le composant amp-script exécute le JavaScript personnalisé d'une page dans un thread de travail séparé.

Avant cette mise à jour, les pages AMP ont été pour la plupart statiques, ce qui a limité ses utilisations et forcé les éditeurs à compromettre les fonctionnalités pour la vitesse et potentiellement la visibilité dans les résultats de recherche mobiles.

Plus d'infos

• Le nouveau composant amp-script est compatible avec les cadres React, Preact, Angular, Vue.js, jQuery et D3.js.
  
  
• amp-script ne modifie pas le contenu de la page sans interaction avec l'utilisateur, de sorte qu'il ne modifiera pas votre contenu lors du chargement de la page.
  
  
• Le script dans un seul amp-script doit être inférieur à 150ko.
  
  
• Toutes les API ne sont pas prises en charge à l'intérieur d'un Web Worker : se référer à la liste des API autorisées de WorkerDOM’s.

Si les exemples ci-dessus vous intéressent, vous pouvez tester <amp-script>. Gardez à l'esprit que, afin de préserver la garantie de performance de l'AMP, il y a quelques contraintes :

1. Saut de contenu :
   
   • Pour éviter les sauts de contenu inattendus, <amp-script> nécessite généralement des gestes de l'utilisateur pour modifier le contenu de la page.
   
   
   
2. Chargement de la page :
   
   • Etant donné que <amp-script> ne modifie pas le contenu de la page sans interaction avec l'utilisateur, il ne modifie pas non plus le contenu lors du chargement de la page.
   
   
   
3. Taille du script :
   • Le script utilisé dans un seul <amp-script> doit être inférieur à 150 ko. Veuillez noter que vous êtes les bienvenus pour utiliser votre cadre JS préféré, mais il doit s'adapter à cette limite de 150Ko.
   
   
   
4. Support API :
   
   • Toutes les API ne sont pas prises en charge à l'intérieur d'un WorkerWeb et WorkerDOM’s a une liste d'API autorisées.
     
     En outre, certaines méthodes et propriétés DOM ne sont pas encore implémentées. La liste complète est disponible publiquement dans la compatibilité WorkerDOM.
     
     Veuillez contacter l’équipe s’'il y a une API que vous voulez voir ajoutée.

<amp-script> est compatible avec des frameworks que vous utilisez peut-être déjà tels que React, Preact, Angular, Vue.js, jQuery et D3.js.

Vous pouvez en apprendre davantage sur la façon dont <amp-script> fonctionne en arrière-plan ici et essayer <amp-script> en suivant ce guide.

C'est finalement un excellent moyen de déverrouiller un grand nombre de cas d'utilisation qui n'étaient pas possibles avant !