Integra las AWP en las IUs de uso compartido integradas con Workbox

Cómo hacer que tu AWP aparezca junto a apps específicas de la plataforma en las IU de uso compartido a nivel del sistema

La API de Web Share Target te permite mostrar tu app web progresiva en la hoja de uso compartido a nivel del sistema del usuario después de que se instale. Si bien funciona muy bien si tienes un servidor disponible para recibir la solicitud, es mucho más difícil que funcione si no lo tienes.

En este artículo, usaremos Workbox, un conjunto de bibliotecas de JavaScript para agregar compatibilidad sin conexión a las apps web, para crear una URL de destino de uso compartido que se encuentra completamente dentro de tu service worker. Esto permite que los sitios estáticos y las apps de una sola página se publiquen como destinos compartidos sin un extremo de servidor dedicado.

Teléfono Android con el panel lateral "Compartir con" abierto.
El selector de destino de uso compartido a nivel del sistema con una AWP instalada llamada Share Target Test como opción.

En la misma página

Si no conoces el funcionamiento de Web Share Target, Recibe datos compartidos con la API de Web Share Target te brinda una introducción detallada. Aquí tienes un repaso rápido.

La implementación de la función de segmentación de participaciones web consta de dos partes. Primero, actualiza el manifiesto de la app web para indicar que deseas que tu app sea un objetivo de uso compartido cuando se instale. En el siguiente ejemplo, se dirigen los elementos compartidos a la URL /share a través de una solicitud POST. Se codifica como un formulario de varias partes, en el que el título se llama name, el texto se llama description y las imágenes JPEG se llaman photos.


"share_target": {
  "action": "/share",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "title": "name",
    "text": "description",
    "files": [
      {
        "name": "photos",
        "accept": ["image/jpeg", ".jpg"]
      }
    ]
  }
}

El service worker comparte objetivos con Workbox

Si bien, por lo general, un extremo de servidor se encarga de esto, un truco útil que puedes hacer para un objetivo de uso compartido es registrar una ruta directamente en tu trabajador de servicio para controlar la solicitud. Esto permitirá que tu app sea un destino de uso compartido sin un backend.

Para ello, en Workbox, debes registrar una ruta que controle tu service worker. Comienza por importar registerRoute desde 'workbox-routing'. Observa que está registrado para la ruta /share, la misma que se indica en el manifiesto de la app web de ejemplo. En respuesta, llama a shareTargetHandler().

import { registerRoute } from 'workbox-routing';

registerRoute(
  '/share',
  shareTargetHandler,
  'POST'
);

La función shareTargetHandler() es asíncrona y toma el evento, espera los datos del formulario y, luego, recupera los archivos multimedia de ese evento.

async function shareTargetHandler ({event}) {
  const formData = await event.request.formData();
  const mediaFiles = formData.getAll('media');

  for (const mediaFile of mediaFiles) {
    // Do something with mediaFile
    // Maybe cache it or post it back to a server
  });

  // Do something with the rest of formData as you need
  // Maybe save it to IndexedDB
};

Luego, puedes hacer lo que quieras con estos archivos. Puedes almacenarlas en caché. Puedes enviarlos a algún lugar con una solicitud de recuperación. Incluso puedes usar las otras opciones de manifiesto, por ejemplo, publicar una página con algunos parámetros de consulta para los otros elementos compartidos o almacenar los datos y los punteros al contenido multimedia en la API de Cache Storage o IndexedDB.

Puedes probarlo en la app de ejemplo Fugu Journal y ver su implementación de trabajador de servicio en su código fuente.

Una acción común que puedes realizar es mantener los recursos compartidos hasta que haya mejores conexiones de red disponibles. Workbox también admite la sincronización periódica en segundo plano.

Conclusión

La API de Share Target es una forma sencilla de integrar profundamente tu app web progresiva en los dispositivos de los usuarios, lo que las pone a la par de las aplicaciones específicas de la plataforma para la tarea fundamental de compartir contenido entre apps. Sin embargo, para hacerlo, por lo general, se requiere un servidor disponible para recibir la solicitud. Si aprovechas Workbox para crear una ruta de destino de uso compartido directamente en tu trabajador de servicio, tu app no tendrá esta restricción, lo que permitirá que el destino de uso compartido funcione para las apps sin conexión y sin backend.

Foto de Elaine Casap en Unsplash