Application Web progressive (AWP)

Une Progressive Web App (PWA) est une application Web qui vous permet d'offrir aux utilisateurs qui visitent votre site Web sur leur mobile une expérience semblable à celle d'une application native, à la fois rapide, fluide et interactive.

Les PWA garantissent un chargement instantané, une réponse rapide aux interactions des utilisateurs et une expérience similaire à celle offerte par une application native. Elles ne nécessitent pas d'installation et permettent aux utilisateurs de retourner rapidement sur le site, même si leur appareil est en mode hors ligne.

Remarque :

  • Les PWA peuvent uniquement être activées sur des sites HTTPS. Pour plus d'informations, consultez SSL (HTTPS).

  • Les PWA sont prises en charge par Chrome sous Android. Lorsque celles-ci sont activées, le navigateur demande automatiquement à l'utilisateur s'il souhaite ajouter le site à l'écran d'accueil.

  • Vous pouvez également utiliser les PWA sur des appareils iOS exploitant la version 11.3. Toutefois, le message automatique « ajouter à l'écran » n'étant pas encore disponible sur ces appareils, les utilisateurs devront réaliser cette action manuellement. Pour en savoir plus, veuillez consulter le centre d'assistance d'Apple.

Pour activer la fonctionnalité PWA :

  1. Dans le panneau de gauche, cliquez sur SEO & Settings, puis sur Progressive Web App (PWA).

  2. Cliquez sur la bascule Activer l'application Web progressive.

  3. (Facultatif) Cliquez sur la case à cocher Serve pages markup from cache first. Ce paramètre modifie la stratégie de mise en cache du travailleur de service (pour les sites d'exécution) ; au lieu de vérifier d'abord dans le réseau, il récupère d'abord la page dans le cache (tant qu'elle n'est pas republiée). Cache first (activer ou désactiver) peut être la meilleure solution si vous savez que le site et ses actifs ne vont pas beaucoup changer, car il chargera rapidement les informations mises en cache et sera plus facilement disponible pour les clients hors ligne. L'utilisation du réseau en premier (en désactivant cette option) est préférable lorsque les données doivent être aussi récentes que possible.

  4. (Facultatif) Cliquez sur l'option Activer les navigateurs mobiles pour demander l'installation du site en tant qu'application. Lorsque cette option est activée, vous pouvez configurer les paramètres suivants :

    • Nom. Il s'agit du nom qui s'affiche sur l'écran de démarrage ainsi que dans le message « Ajouter à l'écran d'accueil ». Il peut comporter jusqu'à 60 caractères.

    • Nom abrégé. Ce nom est utilisé lorsque l'espace est insuffisant pour afficher le nom complet (par exemple, sur l'écran d'un téléphone portable). Il peut comporter jusqu'à 60 caractères, mais nous vous recommandons de le raccourcir autant que possible.

    • Icône. Il s'agit de l'icône qui apparaît sur l'écran d'accueil du mobile et sur l'écran de démarrage lors du chargement de l'application. L'icône doit faire au moins 192 pixels de large et être au format .png.

    • Couleur d'arrière-plan de l'écran d'affichage. Il s'agit de la couleur qui apparaît pendant le chargement du site.

Lorsqu'un utilisateur accède à un site doté de la fonctionnalité PWA à partir d'un appareil mobile, un bouton AJOUTER À L'ÉCRAN D'ACCUEIL s'affiche en bas du site. Une fois le site ajouté à l'écran d'accueil, l'icône reste disponible sur l'appareil pour permettre à l'utilisateur de se rendre rapidement sur le site (comme pour une application).

L'utilisateur peut désormais accéder au site à partir de cette icône, même si son appareil est en mode hors ligne.

24517246525719-pwa_4screens.gif