Vous avez conçu une application Web, écrit son code et son service worker, et vous avez enfin ajouté le fichier manifeste d'application Web pour décrire son comportement lorsqu'elle est installée sur l'appareil d'un utilisateur. Cela inclut des éléments tels que les icônes haute résolution à utiliser, par exemple le lanceur d'applications ou le sélecteur d'applications, ou la façon dont votre application Web doit se lancer lorsqu'elle est ouverte depuis l'écran d'accueil de l'utilisateur.
De plus, bien que de nombreux navigateurs respectent le fichier manifeste d'application Web, tous les navigateurs ne chargent pas ou ne respectent pas toutes les valeurs que vous spécifiez. Saisissez PWACompat. Cette bibliothèque prend votre fichier manifeste d'application Web et insère automatiquement les balises meta ou link pertinentes pour les icônes de différentes tailles, le favicon, le mode de démarrage, les couleurs, etc.
Vous n'avez donc plus besoin d'ajouter d'innombrables balises standards et non standards (comme <link rel="icon" ... /> ou <meta name="orientation" ... />) à vos pages. Enfin, pour les applications d'écran d'accueil iOS, PWACompat crée même des écrans de démarrage de manière dynamique. Vous n'avez donc pas besoin d'en générer un pour chaque taille d'écran.
Utiliser PWACompat
Pour utiliser PWACompat, veillez à créer un lien vers votre fichier manifeste d'application Web sur toutes vos pages:
<link rel="manifest" href="manifest.webmanifest" />
Incluez ensuite ce script ou ajoutez-le à un bundle chargé asynchrone:
<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>
PWACompat récupère votre fichier manifeste et effectue les tâches requises pour le navigateur de l'utilisateur, qu'il utilise un appareil mobile ou un ordinateur.
Nous vous recommandons tout de même d'ajouter au moins une icône de raccourci de haute qualité pour l'indexation de la recherche:
<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />
Pour en savoir plus, consultez les bonnes pratiques.
<script type="module">
// detect iOS Safari
if (('standalone' in navigator) && (!navigator.standalone)) {
import('https://unpkg.com/pwacompat');
}
</script>
Articles de fond
Pour les navigateurs compatibles, à quoi sert PWACompat ? PWACompat charge le fichier manifeste de votre application Web et:
- Créez des balises d'icône Meta pour toutes les icônes du fichier manifeste (par exemple, pour un favicon ou d'anciens navigateurs).
- Création de balises Meta de remplacement pour différents navigateurs (ex. iOS, duplication WebKit/Chromium, etc.) décrivant comment une application Web doit s'ouvrir
- Définit la couleur du thème en fonction du fichier manifeste.
Pour Safari, PWACompat également:
- Définit
apple-mobile-web-app-capable(ouverture sans chrome de navigateur) pour les modes d'affichagestandalone,fullscreenouminimal-ui. - Crée des images
apple-touch-iconen ajoutant l'arrière-plan du fichier manifeste aux icônes transparentes : sinon iOS affiche la transparence en noir - Crée des images de démarrage dynamiques, qui correspondent étroitement à celles générées pour les navigateurs basés sur Chromium
Si vous souhaitez apporter votre contribution ou apporter votre aide concernant la prise en charge d'autres navigateurs, PWACompat est disponible sur GitHub.
Essayer
PWACompat est disponible sur Airhorner, v8.dev et Emojityper. Le code HTML de l'en-tête de votre site peut être simple: il vous suffit de spécifier le fichier manifeste et de laisser PWACompat s'occuper du reste.
📢🤣🎉