Apps web progresivas: De la pestaña a la barra de tareas

1. Te damos la bienvenida

En este lab, tomarás una aplicación web existente y la harás instalable. Este es el cuarto de una serie de codelabs complementarios para el taller de apps web progresivas. El codelab anterior fue sobre IndexedDB. Hay cuatro codelabs más en esta serie.

Qué aprenderás

  • Cómo escribir un Service Worker de forma manual
  • Cómo agregar un Service Worker a una aplicación web existente
  • Usa el Service Worker y la API de Cache Storage para que los recursos estén disponibles sin conexión

Lo que debe saber

  • Conocimientos básicos de HTML y JavaScript

Lo que necesitarás

2. Prepárate

Para comenzar, clona o descarga el código de partida necesario para completar este codelab:

Si clonas el repositorio, asegúrate de estar en la rama pwa04--tab-to-taskbar. El archivo ZIP también contiene el código de esa rama.

Este código base requiere Node.js 14 o una versión posterior. Una vez que tengas el código disponible, ejecuta npm ci desde la línea de comandos en la carpeta del código para instalar todas las dependencias que necesitarás. Luego, ejecuta npm start para iniciar el servidor de desarrollo del codelab.

El archivo README.md del código fuente proporciona una explicación de todos los archivos distribuidos. Además, los siguientes son los archivos existentes clave con los que trabajarás a lo largo de este codelab:

Archivos de claves

  • index.html: HTML de la aplicación principal

3. Crea un manifiesto de la app web

Los archivos de manifiesto de la app web describen tu PWA para que, junto con un Service Worker en funcionamiento, un navegador sepa que tu app web se puede instalar y, lo que es más importante, cómo representarla en el dispositivo en el que se instalará. Sin embargo, primero se debe crear. Agrega un archivo llamado manifest.json a la carpeta public de tu app web y agrégale lo siguiente:

{
  "name": "PWA Edit",
  "short_name": "PWA Edit",
  "start_url": "/?source=pwa",
  "display": "standalone",
  "icons": [
    {
      "type": "image/png",
      "sizes": "192x192",
      "src": "/images/icons/logo-192.png"
    },
    {
      "type": "image/png",
      "sizes": "48x48",
      "src": "/images/icons/logo-48.png"
    },
    {
      "type": "image/png",
      "sizes": "72x72",
      "src": "/images/icons/logo-72.png"
    },
    {
      "type": "image/png",
      "sizes": "128x128",
      "src": "/images/icons/logo-128.png"
    },
    {
      "type": "image/png",
      "sizes": "384x384",
      "src": "/images/icons/logo-384.png"
    },
    {
      "type": "image/png",
      "sizes": "512x512",
      "src": "/images/icons/logo-512.png"
    },
    {
      "type": "image/png",
      "sizes": "96x96",
      "src": "/images/icons/logo-96.png"
    },
    {
      "type": "image/png",
      "sizes": "1024x1024",
      "src": "/images/icons/maskable-1024.png",
      "purpose": "maskable"
    }
  ],
  "theme_color": "#282c34",
  "background_color": "#282c34",
  "description": "A PWA markdown editor",
  "categories": ["productivity", "utilities"]
}

No olvides incluir un ícono de Apple Touch para dispositivos iOS. Agrega la siguiente línea de código justo después de la etiqueta <title> en <head> en index.html.

<link rel="apple-touch-icon" href="/images/icons/apple-touch.png" />

Explicación

Este manifiesto incluye campos obligatorios, recomendados y promocionales, por lo que hay mucha información. Primero, los campos obligatorios en los que se definen el nombre, la URL de inicio, el modo de visualización y los íconos de la PWA. Ten en cuenta que el último ícono es un ícono enmascarable, lo que permite mostrar varios íconos según la IU del dispositivo. A continuación, se encuentran los campos de color de tema y fondo recomendados. Por último, están los campos promocionales, una descripción y las categorías en las que se incluye esta APW. Cuando este manifiesto se adjunta a una AWP, estos campos controlan cómo se mostrará y administrará la app instalada de nuestra AWP.

4. Cómo adjuntar el manifiesto a la AWP

Una vez que se crea el archivo de manifiesto, se debe adjuntar para que se asocie con la PWA. Para ello, abre index.html y agrega lo siguiente justo debajo de la etiqueta <title> en <head>:

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

Explicación

Un vínculo de manifiesto les indicará a los navegadores que lo admiten que el manifiesto de la app web vinculada describe el sitio web actual. Cuando es válida y está disponible, con un service worker en funcionamiento y después de que la app web pasa cualquier criterio de instalación adicional específico del navegador, permite que tu app se instale directamente en el dispositivo del usuario.

5. Agregar accesos directos

Una excelente forma de hacer que tu AWP se sienta más integrada en un dispositivo es proporcionar atajos del menú contextual a funciones específicas de tu app. El botón de activación del modo oscuro en la AWP permite elegir el modo configurando un parámetro de consulta mode en night o day. Configura dos accesos directos en manifest.json que hagan lo siguiente:

  • Inicia la PWA en modo night o day.
  • Usa /images/logo.svg con un tamaño de 150x150 para un ícono.

6. ¡Felicitaciones!

Acabas de aprender a crear un archivo de manifiesto de la app web, adjuntarlo a una página web y agregar accesos directos a la app cuando se instala.

El siguiente codelab de la serie es Prompting & Measuring Install.