PWACompat: el manifiesto de apps web para todos los navegadores

Diseñaste una app web, escribiste su código y su trabajador de servicio, y, por último, agregaste el manifiesto de la app web para describir cómo debería comportarse cuando se “instala” en el dispositivo de un usuario. Esto incluye elementos como íconos de alta resolución para usar, por ejemplo, en el selector de apps o el selector de apps de un teléfono celular, o cómo debe iniciarse tu app web cuando se abre desde la pantalla principal del usuario.

Y, si bien muchos navegadores respetarán el manifiesto de la app web, no todos cargarán ni respetarán todos los valores que especifiques. Ingresa PWACompat, que toma el manifiesto de apps web y, luego, inserta automáticamente las etiquetas meta o link relevantes para íconos de diferentes tamaños, el ícono de página, el modo de inicio, los colores, etcétera.

Esto significa que ya no tienes que agregar innumerables etiquetas estándar y no estándares (como <link rel="icon" ... /> o <meta name="orientation" ... />) a tus páginas. Y para la casa de iOS aplicaciones de pantalla, PWACompat incluso creará pantallas de presentación de forma dinámica para que no tengas que genera una para cada tamaño de pantalla.

Cómo usar PWACompat

Para usar PWACompat, asegúrate de vincular tu aplicación web Manifiesto en todas tus páginas:

<link rel="manifest" href="manifest.webmanifest" />

Luego, incluye esta secuencia de comandos o agrégala a un paquete cargado de forma asíncrona:

<link rel="manifest" href="manifest.webmanifest" />
<!-- include PWACompat _after_ your manifest -->
<script async src="https://unpkg.com/pwacompat" crossorigin="anonymous"></script>

PWACompat recuperará tu archivo de manifiesto y realizará el trabajo necesario para el navegador de tu usuario, independientemente de si está en un dispositivo móvil o de escritorio.

Aún recomendamos agregar al menos un ícono de acceso directo de alta calidad para el indexado de búsqueda:

<link rel="icon" type="image/png" href="icon-128.png" sizes="128x128" />

Para obtener más información, consulta las prácticas recomendadas.

<script type="module">
  // detect iOS Safari
  if (('standalone' in navigator) && (!navigator.standalone)) {
    import('https://unpkg.com/pwacompat');
  }
</script>

En detalle

En los navegadores compatibles, ¿qué hace realmente PWACompat? PWACompat cargará el manifiesto de tu app web y:

• Crea etiquetas de ícono meta para todos los íconos del manifiesto (p. ej., para un favicon, navegadores más antiguos)
• Crea metaetiquetas de resguardo para varios navegadores (p. ej., iOS, bifurcaciones de WebKit/Chromium, etcétera) que describan cómo se debe abrir una app web.
• Establece el color del tema según el manifiesto

En Safari, PWACompat también hace lo siguiente:

• Configura apple-mobile-web-app-capable (se abre sin Chrome en el navegador) para modos de visualización standalone, fullscreen o minimal-ui
• Crea imágenes apple-touch-icon y agrega el fondo del manifiesto a los íconos transparentes. De lo contrario, iOS renderiza la transparencia como negro.
• Crea imágenes de presentación dinámicas que coinciden estrechamente con las imágenes de presentación generadas para navegadores basados en Chromium.

Si quieres contribuir más o ayudar con la compatibilidad con navegadores adicionales, PWACompat está en GitHub.

Probar

PWACompat está disponible en Airhorner, v8.dev y Emojityper. El encabezado HTML de tus sitios puede ser simple: solo especifica el manifiesto y deja que PWACompat se encargue del resto.

📢🤣🎉