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 ne peuvent être activés que sur les sites HTTPS. Pour plus d'informations, voir SSLs (HTTPS)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 affiché sur l'écran d'accueil et du message "Ajouter à l'écran d'accueil". Il peut comporter jusqu'à 60 caractères.

    • Nom court. Il s'agit du nom utilisé lorsqu'il n'y a pas assez d'espace pour afficher le nom complet, par exemple sur l'écran d'accueil d'un téléphone portable. Ce nom peut comporter jusqu'à 60 caractères, mais nous vous conseillons de le raccourcir au maximum.

    • Icône. Il s'agit de l'icône qui apparaît sur l'écran d'accueil du téléphone portable et sur l'écran de démarrage lorsque l'application est en cours de chargement. Elle doit avoir une largeur d'au moins 192 pixels et être au format .png. format.

    • 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