Progressive Web App (PWA)

Une Progressive Web App (PWA) est une application web qui offre aux visiteurs mobiles une expérience proche de celle d'une application native : votre site devient rapide, fluide et agréable à utiliser.

Une PWA se charge instantanément, réagit vite aux interactions et se comporte comme une véritable application. Elle ne nécessite aucune installation via un store et permet aux visiteurs de revenir sur le site en un instant, même lorsque leur appareil est hors ligne.

Remarque :

• Les PWA ne peuvent être activées que sur des sites en HTTPS. Pour en savoir plus, consultez « SSL (HTTPS) ».
• Les PWA sont prises en charge par Chrome sur Android. Si la PWA est activée, le navigateur propose automatiquement au visiteur d'ajouter le site à son écran d'accueil.
• Vous pouvez aussi activer la PWA sur les appareils iOS à partir de la version 11.3. Comme le message automatique d'ajout à l'écran n'y est pas encore disponible, les visiteurs devront ajouter la PWA manuellement. Pour savoir comment procéder, consultez l'assistance Apple.

Activer la fonctionnalité PWA

Pour activer la fonctionnalité PWA :

1. Dans le panneau latéral, cliquez sur Plus, puis sur Paramètres.
2. Cliquez sur Progressive Web App.
3. Cliquez sur l'option Activer l'application Web progressive.
4. (Facultatif) Cliquez sur l'option Serve pages markup from cache first. Ce réglage modifie la stratégie de mise en cache du service worker (pour les sites en runtime) : au lieu d'interroger d'abord le réseau, il récupère la page depuis le cache en priorité (tant que le site n'est pas republié). Le mode « cache d'abord » (option activée) convient bien lorsque vous savez que le site et ses ressources changeront peu, car les informations en cache se chargent rapidement et restent plus facilement accessibles hors ligne. Le mode « réseau d'abord » (option désactivée) est préférable lorsque les données doivent être aussi récentes que possible.
5. (Facultatif) Cliquez sur l'option Autoriser les navigateurs mobiles à inviter les utilisateurs à installer le site comme application. Une fois activé, vous pouvez configurer les paramètres suivants :
   • Nom. Nom affiché sur l'écran de démarrage et dans le message « Ajouter à l'écran d'accueil ». Il peut comporter jusqu'à 60 caractères.
   • Nom court. Nom utilisé lorsqu'il n'y a pas assez de place pour afficher le nom complet, par exemple sur l'écran d'accueil mobile. Il peut comporter jusqu'à 60 caractères, mais nous vous conseillons de le garder aussi court que possible.
   • Icône. Icône qui apparaît sur l'écran d'accueil mobile et sur l'écran de démarrage pendant le chargement de l'application. Elle doit faire au moins 192 pixels de large et être au format .png.
   • Couleur d'arrière-plan de l'écran de démarrage. Couleur affichée pendant le chargement du site.

Lorsqu'un visiteur ouvre un site doté d'une PWA depuis son appareil mobile, un bouton Add to Home screen s'affiche sous le site. Une fois le site ajouté à l'écran d'accueil, l'icône apparaît sur l'appareil pour un accès rapide, comme pour une application.

Le visiteur peut alors revenir sur le site via cette icône, même si l'appareil est hors ligne.