Quelque part, vous avez certainement déjà entendu les termes Progressive Web Apps, PWA, AMP ou même le PWAMP.
Mais qu’est ce PWA, AMP ou PWAMP, vous ne savez pas précisément le sens de ces mots.
Vous allez voir dans cet article une petite explication pour vous aider à intégrer ces technologies dans votre stratégie marketing ou refonte de site web.
PWA, AMP, PWAMP : c’est quoi ?
Qu’est ce que AMP
Pour commencer, parlons de Google AMP.
AMP est une technologie conçue par Google pour les mobiles. Son rôle de AMP est de réduire le poids et ainsi augmenter la vitesse de chargement des pages web sur les appareils mobiles et sans consommer autant de data. Actuellement, cette technologie fonctionne particulièrement bien. En outre, de nombreuses mesures ont été mises en place pour faciliter la transition des sites vers cette technologie.
Pourtant AMP est très difficile à appliquer à un site en entier car AMP n’est pas conçue pour cela.
Qu’est ce que une PWA ?
Ensuite, les PWA. Il s’agit d’une technologie similaire à l’AMP, mais qui est destinée à l’ensemble d’un site web. En effet, l’AMP fonctionne simplement en mettant en cache les ressources. Par contre, les PWA, eux, mettent en cache l’ensemble du site. De cette manière, le contenu va se charger quasi instantanément, et ce en grande partie hors connexion (à condition que vous avez déjà visité le site). Le rôle des PWA est ainsi de remplacer toutes les versions d’un site internet par une seule. Et ce, en gardant une même ligne directrice en termes de design et l’interface utilisateur.
Par ailleurs, Google propose une checklist permettant de voir si votre site est correctement mis en place en PWA.
En effet, les PWA sont des sites web pratiques réalisables via des langages basiques. Par contre, il en existe également d’autres langages ou framework que vous pouvez utiliser pour les PWA, qui intègrent une logique de composants.
Consultez la video ci dessus pour valider si vous avez besoin d’un PWA
PWA AMP
Enfin, c’est quoi un PWA AMP ? Premièrement, il faut noter qu’il s’agit d’un ensemble de deux choses bien différentes :
AMP + PWA = PWAMP.
En effet, il s’agit d’une technologie complémentaire pour votre site. En effet, l’AMP sert particulièrement pour les articles en bloquant le JavaScript. Ce qui n’est pas viable pour un site WordPress. Par contre, les autres pages de votre site, comme les formulaires en ont besoin de ce JavaScript, d’où l’importance des PWA.
Mettre en place le PWAMP : est-ce nécessaire ?
Le premier objectif de cette technologie est d’optimiser la navigation mobile. Actuellement, un site web important doit avoir au minimum une version desktop, une version responsive et si possible une version AMP de son site.
Par contre, cela représente de nombreux inconvénients. En effet, vous risquez de multiplier le coût du développement et de la maquette. Ensuite, vous aurez besoin de plusieurs accès pour la gestion et aussi pour l’utilisateur. Par ailleurs, chacune de vos versions peut avoir une apparence différente. Et ce n’est pas idéal en termes d’ergonomie. Ainsi, vous pouvez impacter l’expérience utilisateur négativement.
créer une progressive web app est une solution
Les PWA et les PWAMP sont la solution:Cette technologie vous permet de réunir toutes les versions de votre site dans une seule version.
Ainsi, vous n’avez besoin qu’un seul développement pour votre site en gardant toujours les avantages des applications mobiles.
Pour y arriver, vous devrez penser a la refonte votre site depuis le début.
La mise en place de l’AMP est rapide
Mettre en place le PWAMP sous WordPress : est-ce possible ?
En amont, WordPress n’est pas vraiment fait pour les PWA. Par contre, il existe des plug-ins, des thèmes qui fonctionnent de manière similaire sur WordPress. Par contre, ces derniers dépendent entièrement du corps de WordPress pour fonctionner.
D’autre part, un plug-in particulier propose un thème mobile PWA.
Avec celui-ci, la version desktop et la version mobile sont quasiment identiques. Pour cette raison, cette option peut ne pas être viable pour un PWA WordPress.
Soyons positif : vous pouvez faire un site web WordPress PWA mais vous devrez respecter les bonnes pratiques indiquées par Google.
Google vous met à disposition son outil Lighthouse qui permet de valider les PWA.
PWA vs App : inconvénients
Un support incomplet
Les PWA ne sont pas généralement utilisables sur les anciennes versions des navigateurs.
Les fonctionnalités disponibles ne sont pas les mêmes d’un navigateur à un autre : les fonctionnalités seront plus etendues sur Chrome que sur IOS.
Absence de l’App Store
Côté Apple, il sera donc impossible de faire référencer sa PWA dans l’App Store.
Pour vous faire aider dans la jungle des application n’hesitez pas a prendre rendez vous avec un de nos expert pour la refonte de votre site web
:not(.e-form__indicators__indicator--shape-none){background-color:var(--e-form-steps-indicator-inactive-secondary-color,#fff)}.e-form__indicators__indicator--state-inactive object,.e-form__indicators__indicator--state-inactive svg{fill:var(--e-form-steps-indicator-inactive-primary-color,#c2cbd2)}.e-form__indicators__indicator--state-active{color:var(--e-form-steps-indicator-active-primary-color,#39b54a);border-color:var(--e-form-steps-indicator-active-secondary-color,#fff)}.e-form__indicators__indicator--state-active [class*=indicator--shape-]:not(.e-form__indicators__indicator--shape-none){background-color:var(--e-form-steps-indicator-active-secondary-color,#fff)}.e-form__indicators__indicator--state-active object,.e-form__indicators__indicator--state-active svg{fill:var(--e-form-steps-indicator-active-primary-color,#39b54a)}.e-form__indicators__indicator--state-completed{color:var(--e-form-steps-indicator-completed-secondary-color,#fff)}.e-form__indicators__indicator--state-completed [class*=indicator--shape-]:not(.e-form__indicators__indicator--shape-none){background-color:var(--e-form-steps-indicator-completed-primary-color,#39b54a)}.e-form__indicators__indicator--state-completed .e-form__indicators__indicator__label{color:var(--e-form-steps-indicator-completed-primary-color,#39b54a)}.e-form__indicators__indicator--state-completed .e-form__indicators__indicator--shape-none{color:var(--e-form-steps-indicator-completed-primary-color,#39b54a);background-color:initial}.e-form__indicators__indicator--state-completed object,.e-form__indicators__indicator--state-completed svg{fill:var(--e-form-steps-indicator-completed-secondary-color,#fff)}.e-form__indicators__indicator__icon{width:var(--e-form-steps-indicator-padding,30px);height:var(--e-form-steps-indicator-padding,30px);font-size:var(--e-form-steps-indicator-icon-size);border-width:1px;border-style:solid;display:flex;justify-content:center;align-items:center;overflow:hidden;margin-bottom:10px}.e-form__indicators__indicator__icon img,.e-form__indicators__indicator__icon object,.e-form__indicators__indicator__icon svg{width:var(--e-form-steps-indicator-icon-size);height:auto}.e-form__indicators__indicator__icon .e-font-icon-svg{height:1em}.e-form__indicators__indicator__number{width:var(--e-form-steps-indicator-padding,30px);height:var(--e-form-steps-indicator-padding,30px);border-width:1px;border-style:solid;display:flex;justify-content:center;align-items:center;margin-bottom:10px}.e-form__indicators__indicator--shape-circle{border-radius:50%}.e-form__indicators__indicator--shape-square{border-radius:0}.e-form__indicators__indicator--shape-rounded{border-radius:5px}.e-form__indicators__indicator--shape-none{border:0}.e-form__indicators__indicator__label{text-align:center}.e-form__indicators__indicator__separator{width:100%;height:var(--e-form-steps-divider-width);background-color:#babfc5}.e-form__indicators--type-icon,.e-form__indicators--type-icon_text,.e-form__indicators--type-number,.e-form__indicators--type-number_text{align-items:flex-start}.e-form__indicators--type-icon .e-form__indicators__indicator__separator,.e-form__indicators--type-icon_text .e-form__indicators__indicator__separator,.e-form__indicators--type-number .e-form__indicators__indicator__separator,.e-form__indicators--type-number_text .e-form__indicators__indicator__separator{margin-top:calc(var(--e-form-steps-indicator-padding, 30px) / 2 - var(--e-form-steps-divider-width, 1px) / 2)}.elementor-field-type-hidden{display:none}.elementor-field-type-html{display:inline-block}.elementor-field-type-tel input{direction:inherit}.elementor-login .elementor-lost-password,.elementor-login .elementor-remember-me{font-size:.85em}.elementor-field-type-recaptcha_v3 .elementor-field-label{display:none}.elementor-field-type-recaptcha_v3 .grecaptcha-badge{z-index:1}.elementor-button .elementor-form-spinner{order:3}.elementor-form .elementor-button>span{display:flex;justify-content:center;align-items:center}.elementor-form .elementor-button .elementor-button-text{white-space:normal;flex-grow:0}.elementor-form .elementor-button svg{height:auto}.elementor-form .elementor-button .e-font-icon-svg{height:1em}.elementor-select-wrapper .select-caret-down-wrapper{position:absolute;top:50%;transform:translateY(-50%);inset-inline-end:10px;pointer-events:none;font-size:11px}.elementor-select-wrapper .select-caret-down-wrapper svg{display:unset;width:1em;aspect-ratio:unset;fill:currentColor}.elementor-select-wrapper .select-caret-down-wrapper i{font-size:19px;line-height:2}.elementor-select-wrapper.remove-before:before{content:""!important}
