Creación de una pantalla de presentación de PWA personalizada

Como se indicó anteriormente en nuestro tutorial de manifiesto de PWA, puede crear una pantalla de inicio única para su PWA con solo unas pocas líneas de código dentro de su manifest.json . El proceso no es demasiado complicado como cabría esperar, y en realidad puede tener todo listo en muy poco tiempo. Entremos en ello, ¿de acuerdo?

El caso de las pantallas de bienvenida en las PWA

Cuando no está configurado, los usuarios que abren su PWA son recibidos de forma predeterminada con una pantalla blanca en blanco. Esto debería estar bien por sí solo, ya que en los dispositivos modernos, el tiempo para abrir aplicaciones es casi instantáneo. Sin embargo, en dispositivos más lentos, esto puede ser un problema, ya que arruina la percepción inicial que el usuario tiene de su aplicación. Junto con el hecho de que los dispositivos de menor especificación con 1 GB de RAM siguen siendo los más comunes, es imprescindible una pantalla de inicio única que sea representativa de su marca.

Cómo crear tu propia pantalla de bienvenida

En Android, el proceso es tan rápido como poner tres líneas de código. Para iOS, sin embargo, es una historia diferente, ya que tendría que crear diferentes tamaños de imagen de bienvenida para diferentes tamaños de pantalla.

Para Android

hacerlo manualmente

En su archivo manifest.json , asegúrese de que estas tres propiedades: name , background_color e icons estén configuradas correctamente:

• name : El nombre de su PWA
• background_color : el color de fondo de la pantalla de inicio. Solo se reconocen valores de color CSS válidos.
• icons : Un icono .png con un tamaño mínimo de 192×192 px.

Por ejemplo, este es el aspecto que debería tener un manifest.json correctamente configurado. Tenga en cuenta que la propiedad de los icons tiene cuatro tamaños diferentes: estos iconos de diferentes tamaños se proporcionan para proporcionar la mejor compatibilidad para diferentes dispositivos.

 {
    "tema_color": "#f69435",
    "background_color": "#ffffff",
    "pantalla": "pantalla completa",
    "alcance": "/",
    "start_url": "/",
    "app_name": "SimiCart",
    "nombre_corto": "SimiCart",
    "description": "Soluciones de comercio electrónico de próxima generación para Magento",
    "iconos": [
        {
            "origen": "/icono-192x192.png",
            "tamaños": "192x",
            "tipo": "imagen/png"
        },
        {
            "origen": "/icono-256x256.png",
            "tamaños": "256x",
            "tipo": "imagen/png"
        },
        {
            "origen": "/icono-384x384.png",
            "tamaños": "384x",
            "tipo": "imagen/png"
        },
        {
            "origen": "/icono-512x512.png",
            "tamaños": "512x",
            "tipo": "imagen/png"
        }
    ]
}

Después de terminar de configurar las propiedades (y su archivo manifest.json ), los navegadores que admiten PWA (generalmente Chrome) generarán automáticamente diferentes tamaños de íconos para su pantalla de inicio y los mostrarán en consecuencia.

Bastante sin esfuerzo, ¿no? Si nos pregunta, creemos que así es como debería sentirse la experiencia de desarrollo.

 Lectura recomendada: Manifiesto de PWA: creación del manifiesto de su aplicación web de forma sencilla

Uso de un generador de manifiestos

Puede automatizar este proceso sin esfuerzo utilizando nuestro Generador de manifiestos . Simplemente ingresa la información requerida y nuestro generador generará para ti un .zip que contendrá toda la información que necesitas.

para iOS

Seguramente Apple no quiere facilitar este proceso a los desarrolladores. En el momento de escribir esto, el estado de la compatibilidad con Web App Manifest aún figura como Parcialmente compatible , sin cambios dos años después de su primera aparición. Esto significa que las PWA no reciben soporte para icons , minimal-ui , fullscreen , theme-color y orientation .

Afortunadamente, todavía hay una forma de evitar esto que es usar la metaetiqueta <apple-touch-startup-image> . No es una solución ideal, pero funciona.

 <!-- Pantalla de bienvenida para iPhone X (1125px x 2436px) -->
<link rel="apple-touch-startup-image" media="(ancho del dispositivo: 375 px) y (altura del dispositivo: 812 px) y (proporción de píxeles del dispositivo-webkit: 3)" href="/apple -lanzamiento-1125x2436.png">

Mediante el uso de la metaetiqueta <apple-touch-startup-image> , puede especificar una imagen de resolución fija para la pantalla de inicio de su PWA (es decir startup-image ). Esta pantalla de inicio personalizada es compatible con un solo tamaño de pantalla, y necesitará muchos más tamaños de imagen diferentes para adaptarse a los diferentes tamaños de pantalla de los productos Apple en el mercado.

Lo que esto significa es que deberá crear dos pantallas de inicio para cada tamaño de pantalla, una para cada orientación (horizontal y vertical). Así debería verse nuestro código cuando hayamos cubierto algunos de los dispositivos de la lista:

 <!-- iPhone X (1125 px x 2436 px) -->
<link rel="apple-touch-startup-image" media="(ancho del dispositivo: 375 px) y (altura del dispositivo: 812 px) y (proporción de píxeles del dispositivo-webkit: 3)" href="/apple -lanzamiento-1125x2436.png">
<!-- iPhone 8, 7, 6s, 6 (750 px x 1334 px) -->
<link rel="apple-touch-startup-image" media="(ancho del dispositivo: 375 px) y (altura del dispositivo: 667 px) y (proporción de píxeles del dispositivo-webkit: 2)" href="/apple -lanzamiento-750x1334.png">
<!-- iPhone 8 Plus, 7 Plus, 6s Plus, 6 Plus (1242 px x 2208 px) -->
<link rel="apple-touch-startup-image" media="(ancho del dispositivo: 414px) y (altura del dispositivo: 736px) y (proporción de píxeles del dispositivo-webkit: 3)" href="/apple -lanzamiento-1242x2208.png">
<!-- iPhone 5 (640 px x 1136 px) -->
<link rel="apple-touch-startup-image" media="(ancho del dispositivo: 320 píxeles) y (altura del dispositivo: 568 píxeles) y (proporción de píxeles del dispositivo de webkit: 2)" href="/apple -lanzamiento-640x1136.png">
<!-- iPad Mini, Aire (1536px x 2048px) -->
<link rel="apple-touch-startup-image" media="(ancho del dispositivo: 768 px) y (altura del dispositivo: 1024 px) y (-webkit-device-pixel-ratio: 2)" href="/apple -lanzamiento-1536x2048.png">
<!-- iPad Pro 10.5" (1668px x 2224px) -->
<link rel="apple-touch-startup-image" media="(ancho del dispositivo: 834px) y (altura del dispositivo: 1112px) y (proporción de píxeles del dispositivo-webkit: 2)" href="/apple -lanzamiento-1668x2224.png">
<!-- iPad Pro 12.9" (2048px x 2732px) -->
<link rel="apple-touch-startup-image" media="(ancho del dispositivo: 1024 px) y (altura del dispositivo: 1366 px) y (proporción de píxeles del dispositivo-webkit: 2)" href="/apple -lanzamiento-2048x2732.png">

Vincule este código en su <head> de index.html y no olvide insertar la etiqueta <meta> a continuación para habilitar el comportamiento de PWA; de lo contrario, nuestra pantalla de inicio no funcionará en absoluto.

 <meta name="apple-mobile-web-app-capable" content="yes">

Con esto, deberías estar listo. Inicie su iOS PWA y podrá ver su pantalla de inicio.

Uso de un generador de pantalla de bienvenida de iOS

Por supuesto, hay mejores formas de automatizar este proceso, que es utilizando el generador de pantalla de bienvenida de iOS. Con su imagen como fuente, el generador generará para usted imágenes de diferentes tamaños junto con el código HTML necesario para insertarlo en su index.html .

Conclusión

Si bien no es exactamente una parte de la experiencia de incorporación, la pantalla de inicio aún juega un papel importante en la creación de una percepción positiva de su marca: es la fruta madura que potencialmente puede generar resultados que no esperaría.

Esperamos que este tutorial resuelva su problema exacto. Implementar y personalizar PWA puede ser un dolor de cabeza si usted y su equipo no tienen mucha experiencia con él. Una solución profesional de desarrollo de PWA como SimiCart puede ayudar a que sea mucho más fácil.