Diseño de aplicaciones web progresivas similares a las nativas para iOS

Una de las características principales de una aplicación web progresiva (PWA) es la apariencia de una aplicación. Aunque su aplicación se ejecuta técnicamente en el navegador web, debe esforzarse para que se vea y se sienta tan bien como una aplicación nativa. Eso incluye hacer que sea instalable en la pantalla de inicio, agregar un icono personalizado, deshabilitar la barra de direcciones, etc. A diferencia de Android, para el cual el Manifiesto de la aplicación web genera automáticamente muchas características nativas, iOS requiere algunos trucos HTML y CSS adicionales. Aquí hay siete sugerencias sobre cómo hacer que su PWA sea más nativa en iOS.

1. Hazlo independiente

Hay dos formas de hacer que su PWA se ejecute como una aplicación independiente (es decir, en una nueva ventana sin los controles de la interfaz de usuario del navegador web) en iOS. La primera forma es usar la metaetiqueta apta para aplicaciones móviles de Apple en el elemento principal de su código HTML con el siguiente código.

La segunda forma es configurar la propiedad de visualización del Manifiesto de la aplicación web para que sea independiente. Un ejemplo de Manifiesto de aplicación web podría ser el siguiente.

{
   "nombre": "Appscope",
   "display": "independiente",
   "iconos": [{
      "src": "icons / icon-192.png",
      "tamaños": "192x192"},
   {
      "src": "icons / icon-512.png",
      "tamaños": "512x512"}
   ]
}

2. Agregue un ícono personalizado

Desafortunadamente, iOS no usa los íconos especificados en el Manifiesto de la Aplicación Web. En cambio, para usar un icono personalizado para todas las páginas de su aplicación, debe proporcionar su icono en formato PNG y con el nombre apple-touch-icon.png en la carpeta de documentos raíz de su PWA.

Si desea agregar un icono específico para una sola página de su aplicación, use la siguiente línea en el elemento principal de su código HTML.

Los diferentes dispositivos iOS usan diferentes tamaños para los iconos de la pantalla de inicio. Para especificar un icono para un tamaño en particular, use el atributo de tamaños del elemento de enlace. Si no se especifica ningún icono para el tamaño de icono recomendado para el dispositivo, se utiliza el icono con el tamaño más pequeño más grande que el recomendado.

El siguiente ejemplo, que especifica los tamaños para los dispositivos iOS más comunes, es de la Guía de contenido web Safari de Apple.




Recuerde que iOS requiere iconos opacos. Cualquier parte transparente del icono será de color negro.

3. Agregar una pantalla de bienvenida personalizada

Pantalla de bienvenida para Appscope

El siguiente paso para hacer que su aplicación web progresiva sea más nativa es reemplazar la pantalla de inicio blanca y opaca con su propia imagen. Para agregar una pantalla de bienvenida personalizada, use el siguiente elemento de enlace.

Para que se muestre esta imagen, es importante que sus dimensiones sean las mismas que las del dispositivo en el que se ejecuta la aplicación. Por ejemplo, para trabajar en un iPhone X, launch.png tendría que ser del tamaño de 1125 por 2436 píxeles. El problema que surge aquí es que hay múltiples dispositivos iOS con diferentes resoluciones, y desafortunadamente no podemos simplemente repetir este código varias veces para imágenes de diferentes tamaños. En cambio, necesitamos usar el atributo de medios para especificar qué imagen de lanzamiento está destinada a qué dispositivo.

Agregue el siguiente código al elemento principal de su PWA para admitir pantallas de bienvenida personalizadas para los diferentes dispositivos iOS.










Si necesita ayuda para configurar pantallas de presentación para su PWA, consulte el Generador de pantalla de presentación en Appscope.

4. Cambiar la barra de estado

Barras de estado con configuraciones negro-translúcido, negro y predeterminado

También puede personalizar la barra de estado de iOS (el área a lo largo del borde superior de la pantalla que muestra la hora y el estado de la batería) de su PWA. Para hacer esto, debe usar la metaetiqueta apple-mobile-web-app-status-bar-style en el elemento principal de su código.

Desafortunadamente, la cantidad de formas de personalizar la barra de estado es bastante limitada, pero Apple ofrece tres configuraciones distintas para el atributo de contenido.

  • los resultados predeterminados en una barra de estado blanca con texto y símbolos negros.
  • negro da como resultado una barra de estado negra y texto y símbolos negros, haciendo que parezca completamente negro. Si no utiliza la metaetiqueta de la barra de estado, así se verá la barra de estado.
  • resultados translúcidos en negro en texto y símbolos blancos, y la barra de estado tomará el mismo color de fondo que el elemento del cuerpo de su aplicación web.

5. Dale un nombre corto

El título de su PWA se mostrará debajo de su icono de inicio en la pantalla de inicio. Para evitar el truncamiento, este título no debe tener más de 12 caracteres, aunque en última instancia se reduce al ancho de los caracteres utilizados (por ejemplo, la letra w es más ancha que la letra i). Si el nombre original de su PWA no debajo del icono, puede asignar una versión corta del nombre.

Una forma de especificar un nombre corto para su PWA es usar la metaetiqueta apple-mobile-web-app-title con la siguiente línea en el elemento principal de su código.

Otra forma es usar la propiedad short_name en su Manifiesto de aplicación web. Un ejemplo de Manifiesto de aplicación web podría ser el siguiente.

{
   "nombre": "Little Alchemy 2",
   "nombre_corto": "Alquimia 2",
   "iconos": [{
      "src": "/public/icons/icon-192x192.png",
      "tamaños": "192x192"},
    {
      "src": "/public/icons/icon-512x512.png",
      "tamaños": "512x512"}
   ]
}

6. Desactiva la selección, resaltado y llamadas

Por defecto, el navegador web iOS agrega ciertos efectos interactivos para textos y enlaces que las aplicaciones nativas no tienen. Por lo tanto, para que su PWA parezca más nativa, y menos como un sitio web o documento, puede deshabilitar (o al menos deshabilitar parcialmente) estos efectos. Las siguientes subsecciones apuntan a los tres tipos más comunes de efectos.

6.1 Desactivar selección de texto

Selección de texto en New York Times

Al igual que la mayoría de las aplicaciones nativas de iOS no permiten la selección de texto, puede deshabilitar esta función en su PWA. Para hacer esto, establezca la propiedad CSS -webkit-user-select en none para los elementos que no desea seleccionar. Para desactivar completamente la selección de texto, asigne la propiedad a su elemento del cuerpo.

cuerpo {
   -webkit-user-select: ninguno;
}

6.2 Desactivar resaltado

Enlace destacado en el New York Times

Al tocar un enlace en el navegador web iOS, aparece un cuadro gris alrededor del elemento. Aunque no existe una forma simple de deshabilitar este efecto, puede cambiar el color de resaltado a transparente y, por lo tanto, hacerlo desaparecer de manera efectiva. Para hacer esto para su PWA, configure la propiedad -webkit-tap-highlight-color como transparente para los elementos deseados (o asígnela al elemento del cuerpo para deshabilitar el resaltado de enlaces para todos los elementos).

cuerpo {
   -webkit-tap-highlight-color: transparente;
}

6.3 Desactivar llamadas

Llamada de enlace en New York Times

Si toca y mantiene presionado un elemento en el navegador iOS, se abrirá un menú de llamada (como el anterior). Para deshabilitar este efecto en iOS, establezca la propiedad -webkit-touch-callout en ninguno para los elementos deseados. Nuevamente, para deshabilitar el efecto de todos los elementos, asigne la propiedad a su elemento del cuerpo.

cuerpo {
   -webkit-touch-callout: ninguno;
}

7. Habilitar efectos de toque

Toque el efecto (: activo) en Little Alchemy 2

En lugar de utilizar el resaltado gris predeterminado al tocar un enlace, puede agregar sus propios efectos al tocar. Al incluir el atributo ontouchstart en la etiqueta del cuerpo de su código y mantener su valor vacío, los enlaces y otros elementos mostrarán sus efectos: hover y: active al tocarlos. Use el siguiente código y juegue con diferentes estilos: hover y: active para encontrar los efectos que funcionen mejor para su PWA.


   
      ...
   
   
      ...
   

Appscope es el directorio líder para aplicaciones web progresivas y ofrece una colección de las mejores aplicaciones basadas en web que son compatibles con todos los dispositivos.