Ajouter votre PWA sur un écran d'accueil
L’un des avantages de la Progressive Web App est la possibilité d’ajouter un raccourci depuis l’écran d’accueil.
Voici la procédure pour installer ce raccourci vers la PWA depuis l’écran d’accueil d’un appareil mobile.
Pour en savoir plus sur la PWA, nous vous recommandons cet article de notre blog : Qu’est-ce qu’une Progressive Web App ?
Ajouter un raccourci à son écran d’accueil
Cliquez sur l’URL et ouvrez votre PWA depuis un appareil mobile.
Rendez-vous dans le menu du navigateur et choisissez Ajouter à l’écran d’accueil
Choisissez un nom pour ce raccourci.
L’icône apparaît sur l’écran d’accueil et la PWA est désormais disponible hors connexion.
En cliquant sur l’icône, celle-ci s’ouvre en plein écran.
Compatibilité des navigateurs
L’ajout de la PWA à l’écran d’accueil dépend de l’appareil et du navigateur :
| Appareil | Comment ajouter la PWA |
|---|---|
| Android | Chrome et Samsung Internet l’installent comme une app. Firefox, Edge et Opera ajoutent un raccourci qui l’ouvre dans le navigateur. |
| iPhone et iPad | Partager > Sur l’écran d’accueil : dans Safari, et aussi dans Chrome, Edge et Firefox à partir d’iOS 16.4. |
| Mac | Safari 17 et ultérieure (macOS Sonoma) : Fichier > Ajouter au Dock. Chrome et Edge peuvent aussi l’installer. |
| Windows et Linux | Chrome et Edge peuvent l’installer. Firefox ne permet pas d’installer une PWA. |
Pour fonctionner hors connexion, la PWA repose sur les service workers. Tous les navigateurs capables de faire fonctionner une web app PandaSuite les prennent en charge :
| Navigateur | Version compatible |
|---|---|
| Chrome (ordinateur et Android) | 87 et ultérieure |
| Edge | 88 et ultérieure |
| Firefox (ordinateur et Android) | 78 et ultérieure |
| Safari (macOS, iOS et iPadOS) | 14 et ultérieure |
| Navigateur intégré à une autre app, sur Android (WebView) | Android System WebView 87 et ultérieure |
| Navigateur intégré à une autre app, sur iPhone ou iPad | Généralement non pris en charge |
| Internet Explorer | Non pris en charge |
Ce sont les versions minimales de la web app elle-même : consultez Compatibilité de la version HTML5. Sur iPhone et iPad, une web app ouverte depuis un lien dans une autre app (messagerie, réseau social…) s’affiche souvent dans le navigateur intégré à cette app, qui ne fait pas fonctionner les service workers : ouvrez-la plutôt dans le navigateur de l’appareil.