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

Cómo hacer que tu AWP se muestre 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 una hoja de uso compartido a nivel del sistema del usuario una vez que se haya instalado. Aunque funciona muy bien si tienes un servidor disponible para recibir la solicitud, es más difícil trabajar si no lo haces.

En este artículo, utilizaremos Workbox, un conjunto de JavaScript bibliotecas para agregar soporte sin conexión a las aplicaciones web y crear una URL de destino de uso compartido que reside completamente dentro de tu service worker. Esto permite que los sitios estáticos y las apps de una sola página sirven como objetivos de uso compartido sin un extremo de servidor dedicado.

Teléfono Android con el botón "Compartir mediante" panel lateral abierto.
Selector de objetivos 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 del objetivo de Compartir en la Web, consulta Cómo recibir datos compartidos con Web Share Target API le brinda una introducción detallada. Aquí tienes un breve repaso.

Hay dos partes para implementar la funcionalidad del objetivo de uso compartido en la Web. Primero, actualiza el manifiesto de la app web para indicar que quieres que se comparta tu app el destino cuando se instala. El siguiente ejemplo dirige los elementos compartidos a la URL /share a través de una solicitud POST. Se codifica como un formulario de varias partes, y se llama al título. 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"]
      }
    ]
  }
}

Objetivos de uso compartido de los service workers con Workbox

Aunque normalmente lo maneja un extremo del servidor, puedes hacer un buen truco para compartir destino es registrar una ruta directamente en tu service worker para administrar para cada solicitud. Esto permitirá que tu app sea un objetivo de uso compartido sin un backend.

Para hacerlo en Workbox, registrando una ruta manejada por tu service worker. Comenzar por importar registerRoute de 'workbox-routing'. Observa que se registró en el /share, la misma que aparece en el manifiesto de la app web de ejemplo. En llama a shareTargetHandler().

import { registerRoute } from 'workbox-routing';

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

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

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é. Tú puedes enviarlos a algún lugar con una solicitud de recuperación. Incluso puedes usar el otro opciones del manifiesto, tal vez mostrar una página con algunos parámetros de consulta para la otra elementos compartidos o almacenar datos y punteros al contenido multimedia en el almacenamiento en caché API o IndexedDB.

Puedes probarlo en la app de ejemplo Fugu Journal y observa su service worker implementación en su fuente código.

Una cosa común que podrías hacer es retener los recursos compartidos hasta que la red conexiones de red de Google. El cuadro de trabajo también admite la revisión periódica sincronizada.

Conclusión

La API de Share Target es una forma sencilla de integrar completamente tu Web progresiva en los dispositivos del usuario, lo que los pone a la par de las aplicaciones específicas de la plataforma para el para compartir contenido entre apps. Pero, por lo general, se necesita un servidor disponible para recibir la solicitud. Usando Workbox para crear un recurso compartido ruta de destino directamente en el service worker, restricción, lo que permite que el objetivo compartido funcione con apps sin conexión y sin conexión backends.

Foto de Elaine Casap en Unsplash