Cette page a été traduite par l'API Cloud Translation.

PWACompat : le fichier manifeste d'application Web pour tous les navigateurs

Vous avez conçu une application Web, écrit son code et son service worker, et enfin ajouté le fichier manifeste d'application Web pour décrire son comportement lorsqu'il est "installé" sur l'appareil d'un utilisateur. Cela inclut, par exemple, les icônes haute résolution à utiliser pour le lanceur ou le sélecteur d'applications d'un téléphone mobile, ou la façon dont votre application Web doit démarrer lorsqu'elle est ouverte depuis l'écran d'accueil de l'utilisateur.

Bien que de nombreux navigateurs respectent le fichier manifeste d'application Web, tous ne chargent pas ni ne respectent pas toutes les valeurs que vous spécifiez. Saisissez PWACompat, bibliothèque qui 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.

PWACompat utilise un fichier manifeste d'application Web et ajoute des balises Meta, Link, etc. standards et non standards.

Ainsi, vous n'avez plus besoin d'ajouter d'innombrables tags standards et non standards (comme <link rel="icon" ... /> ou <meta name="orientation" ... />) à vos pages. Sur iOS Home PWACompat crée même des écrans de démarrage de manière dynamique afin que vous n'ayez pas à en générer une pour chaque taille d'écran différente.

</ph>

Écran de démarrage iOS pour Emojityper, généré par PWACompat

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é de manière 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 nécessaires pour le navigateur de votre utilisateur, qu'il s'agisse d'un appareil mobile ou d'un ordinateur.

Nous vous recommandons toutefois d'ajouter au moins une icône de raccourci de haute qualité pour l'indexation dans les résultats de 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 chargera le fichier manifeste de votre application Web et:

Créez des balises d'icônes méta pour toutes les icônes du fichier manifeste (par exemple, pour une favicon, les anciens navigateurs).
Créez des balises Meta de remplacement pour différents navigateurs (par exemple, iOS, les duplications 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 :

Définit apple-mobile-web-app-capable (ouverture sans Chrome du navigateur) pour modes d'affichage standalone, fullscreen ou minimal-ui
Crée des images apple-touch-icon en ajoutant l'arrière-plan du fichier manifeste aux icônes transparentes: Sinon, iOS affiche la transparence en noir.
Crée des images d'ouverture dynamiques, qui correspondent étroitement aux images d'ouverture générées pour les navigateurs basés sur Chromium.

Si vous souhaitez apporter votre contribution ou apporter une aide supplémentaire concernant les navigateurs, PWACompat est sur GitHub.

Essayer

PWACompat est disponible sur Airhorner, v8.dev et Emojityper. Vos sites HTML d'en-tête peut être simple: il vous suffit de spécifier le fichier manifeste et laisser PWACompat s'occuper du reste.

📢🤣🎉