PWACompat: el manifiesto de apps web para todos los navegadores

Diseñaste una app web, escribiste su código y su service worker, y, por último, agregaste el manifiesto de apps web para describir cómo debería comportarse una vez que se instala en el dispositivo de un usuario. Esto incluye elementos como íconos de alta resolución para usarlos, p.ej., el selector de aplicaciones o el selector de apps de un teléfono móvil, o la forma en que debe iniciarse la app web cuando se abre desde la pantalla principal del usuario.

Si bien muchos navegadores respetarán el manifiesto de apps web, no todos cargarán ni respetarán cada valor que especifiques. Ingresa PWACompat, una biblioteca que toma el manifiesto de la app web e inserta automáticamente etiquetas meta o link relevantes para íconos de diferentes tamaños, el ícono de página, el modo de inicio, los colores, etc.

PWACompat toma el manifiesto de una aplicación web y agrega etiquetas meta, vínculos, etc. estándares y no estándares.
PWACompat toma el manifiesto de la aplicación web y agrega etiquetas de metadatos, vínculos, etc. estándares y no estándares.

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

Pantalla de presentación de iOS para Emojityper, generada por PWACompat

Cómo usar PWACompat

Para usar PWACompat, asegúrate de incluir el vínculo al manifiesto de apps web en todas las páginas:

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

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

<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 hará el trabajo necesario para el navegador del usuario, independientemente de si utiliza un dispositivo móvil o una computadora de escritorio.

De todas formas, recomendamos agregar al menos un ícono de acceso directo de alta calidad para la indexación de búsquedas:

<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 el caso de los navegadores compatibles, ¿qué hace realmente PWACompat? PWACompat cargará el manifiesto de la app web y hará lo siguiente:

  • Crear etiquetas de metaetiquetas para todos los íconos del manifiesto (por ejemplo, para un ícono de página o navegadores más antiguos)
  • Crea metaetiquetas de resguardo para varios navegadores (p. ej., iOS, bifurcaciones WebKit/Chromium, etc.) que describan cómo debe abrirse una aplicación web.
  • Establece el color del tema según el manifiesto.

En Safari, PWACompat también:

  • Configura apple-mobile-web-app-capable (se abre sin un navegador Chrome) para los 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 los navegadores basados en Chromium.

Si deseas contribuir más o ayudar con la compatibilidad adicional con el navegador, PWACompat está en GitHub.

Probar

PWACompat está disponible en Airhorner, v8.dev y Emojityper. El código HTML del encabezado de tus sitios puede ser simple: solo debes especificar el manifiesto y dejar que PWACompat se encargue del resto.

📢🤣🎉