Cómo integrar Agregar a la pantalla de inicio en su PWA

Agregar a la pantalla de inicio (A2HS para abreviar) es fundamental para la experiencia de Progressive Web Apps, ya que permite una experiencia de aplicación nativa completa, que incluye el inicio de aplicaciones desde la pantalla de inicio del usuario.

 Lectura recomendada: PWA vs Native: ¿Cuál te conviene más?

Siendo una característica tan vital para su PWA, seguramente no puede no tenerlo integrado, razón por la cual hoy en el tutorial de SimiCart PWA, repasaremos las razones por las que A2HS es necesario, cómo se usa y cómo hacer un PWA. Listo para A2HS, tanto en dispositivos móviles como en computadoras de escritorio.

Navegadores compatibles

A2HS está muy cerca de ser una característica universal entre navegadores. Actualmente, es compatible con Mobile Chrome/Android Webview (desde la versión 31 en adelante), Opera para Android (desde la versión 32 en adelante) y Firefox para Android (desde la versión 58 en adelante). Para obtener una vista más detallada, visite el sitio web de CanIUse.

PWA Agregar a la pantalla de inicio en acción

Cuando se encuentra con un sitio que está habilitado para agregar a la pantalla de inicio de PWA (habilitado para A2HS), se puede ver un banner que notifica que el sitio se puede agregar a su pantalla de inicio en la parte inferior de la interfaz de usuario:

Esta es la promoción de instalación predeterminada proporcionada por el navegador , que ocurre cuando se cumplen ciertos criterios de instalación. La notificación en sí se mostrará la primera vez que un usuario visite su sitio web y luego nuevamente después de aproximadamente 90 días.

Cómo hacer que su aplicación web esté habilitada para A2HS en dispositivos móviles

Criterios instalables

Para que su aplicación web sea instalable, debe:

• no estar ya instalado
• cumple con una heurística de participación del usuario (el usuario debe interactuar con la página durante al menos 30 segundos)
• ser servido desde una conexión segura (HTTPS)
• tener un trabajador de servicio registrado
• tener un archivo de manifiesto correctamente configurado
• Y lo más importante, el navegador en uso debe ser compatible con el evento beforeinstallprompt . Para obtener una lista completa de los navegadores que admiten el evento beforeinstallprompt , consulte CanIUse.

Empezando

Para fines de demostración, en este artículo usaremos el proyecto create-react-app como base para crear una PWA instalable. create-react-app es un comando simple de React para crear una aplicación de una sola página.

Nota : create-react-app requiere al menos un nodo >= 10.16 y npm >= 5.6

Abra el símbolo del sistema de Node.js y ejecute los siguientes comandos:

 npx crear-reaccionar-aplicación pwa-a2hs
cd pwa-a2hs
inicio de hilo 

Crear un archivo de manifiesto

Su manifiesto web, que generalmente se encuentra en lo profundo de la carpeta raíz de una aplicación web, es un archivo que contiene toda la información necesaria de su sitio web, como el título de su aplicación, las rutas a diferentes iconos, el color de fondo, etc., en formato JSON. Un archivo de manifiesto web es crucial para una aplicación web funcional, ya que permite una presentación adecuada de su aplicación web en varias etapas de la experiencia del usuario.

Recomendamos usar un generador de manifiestos para generar automáticamente el archivo, junto con íconos de tamaño optimizado para su aplicación.

Usando el generador de manifiesto, puede tener un archivo manifest.zip con el contenido así:

Y su manifest.webmanifest debería verse así:

 {
    "tema_color": "#f69435",
    "background_color": "#f69435",
    "pantalla": "independiente",
    "alcance": "/",
    "url_inicio": ".",
    "nombre": "PWA-A2HS",
    "nombre_corto": "PWA",
    "description": "PWA de demostración para la función A2HS",
    "iconos": [
        {
            "origen": "/icono-192x192.png",
            "tamaños": "192x192",
            "tipo": "imagen/png"
        },
        {
            "origen": "/icono-256x256.png",
            "tamaños": "256x256",
            "tipo": "imagen/png"
        },
        {
            "origen": "/icono-384x384.png",
            "tamaños": "384x384",
            "tipo": "imagen/png"
        },
        {
            "origen": "/icono-512x512.png",
            "tamaños": "512x512",
            "tipo": "imagen/png"
        }
    ]
}

Ahora copie el contenido de sus archivos de manifiesto generados en la carpeta /public/ , elimine el archivo manifest.json predeterminado en esta carpeta y continúe con el siguiente paso.

Vincular el HTML al manifiesto

Cuando haya terminado de configurar su archivo de manifiesto, guárdelo en el directorio raíz de su sitio web para que pueda llamarse más tarde con una ruta relativa, es decir, /manifest.webmanifest . Para terminar de configurar su archivo de manifiesto, haga referencia a él en su encabezado HTML ( \pwa-a2hs\public\index.html ), así:

 <cabeza>
    <juego de caracteres meta="utf-8" />
    <enlace rel="icono" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="tema-color" content="#000000"></>
    <meta
      nombre="descripción"
      content="Sitio web creado usando create-react-app"
    />
    <enlace rel="icono-táctil-apple" href="%PUBLIC_URL%/logo192.png" />
    <enlace rel="manifest" href="%PUBLIC_URL%/manifest.webmanifest" />
       <título>PWA A2HS</título>
  </cabeza>

Configurar el flujo de instalación

Un manifiesto de aplicación web no es todo lo que se requiere para que su aplicación web se pueda instalar. Hay una configuración adicional que deberá realizar para que su aplicación web sea instalable y, por lo tanto, esté un paso más cerca de una PWA.

Crear un trabajador de servicio

El trabajador del servicio intercepta sus solicitudes de red y habilita varias funciones similares a las aplicaciones por las que PWA es famoso. Cree un archivo service-worker.js en pwa-a2hs\public y rellénelo con el siguiente contenido:

 self.addEventListener('buscar', función(evento) {
  evento.responderCon(
      caches.match(evento.solicitud).then(función(respuesta) {
          devolver respuesta || buscar (evento.solicitud);
      })
  );
});

Aquí necesitaremos escuchar el evento de fetch , ya que es crucial para su experiencia de agregar a la pantalla de inicio, sin él, su aplicación React no podrá cumplir con los requisitos de instalación.

Registre sus trabajadores de servicio

Y para que nuestro service-worker.js funcione, tendremos que registrarlo insertando este código al final del <body> de nuestro index.html :

 //index.html
<script>
    if ('serviceWorker' en el navegador) {
      // Registrar un service worker alojado en la raíz del
      // sitio usando el ámbito predeterminado.
      navigator.serviceWorker.register('/service-worker.js').then(función(registro) {
        console.log('El registro del trabajador del servicio se realizó correctamente:', registro);
      }, /*atrapar*/ función(error) {
        console.log('Error en el registro del trabajador del servicio:', error);
      });
    } más {
      console.log('Los trabajadores de servicio no son compatibles.');
    }
  </script>

¡Hora de probarlo!

Su PWA ahora debería ser instalable. Actualice su interfaz y debería ver un botón de instalación en su barra de tareas (escritorio) o un pequeño banner de notificación (móvil).

Al hacer clic en Instalar , aparecerá un acceso directo de PWA en su escritorio/pantalla de inicio:

Hay más en la experiencia A2HS

Lo anterior es solo una adición básica a la experiencia de la pantalla de inicio utilizando la promoción de instalación proporcionada por el navegador. Para llevarlo un paso más allá, también puede guardar el evento beforeinstallprompt para activar manualmente el flujo de instalación con varios patrones para promover la instalación de PWA.

Con un botón de instalación personalizado, puede evitar interrumpir el viaje del usuario dirigiéndose a los usuarios específicos que se beneficiarán de la instalación de una aplicación. Y al considerar dónde y dónde colocar la interfaz de usuario de la promoción, es probable que su PWA funcione mejor que sus competidores y, como resultado, obtenga tasas de conversión de aplicaciones mucho mejores.