Cómo hacer que tu AWP se muestre junto a apps específicas de la plataforma en las IUs 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 instalarla. Si bien funciona muy bien si tienes un servidor disponible para recibir la solicitud, es mucho más difícil poner en práctica si no lo tienes.
En este artículo, usaremos Workbox, un conjunto de bibliotecas de JavaScript para agregar soporte sin conexión a las apps web para crear una URL de destino de uso compartido que se encuentre completamente dentro de tu service worker. Esto permite que los sitios estáticos y las apps de una sola página funcionen como objetivos de uso compartido sin un extremo de servidor dedicado.
Share Target Test como opción.
En la misma página
Si no conoces el funcionamiento del objetivo de Web Share, consulta Cómo recibir datos compartidos con la API de Web Share Target para obtener una introducción detallada. Aquí tienes un breve repaso.
La implementación de la funcionalidad de objetivos de uso compartido en la Web consta de dos partes. Primero, actualiza el manifiesto de la app web para indicar que quieres que tu app sea un destino de uso compartido cuando se instale. En el siguiente ejemplo, se dirigen los recursos compartidos a la URL /share a través de una solicitud POST. Está codificada como un formulario de varias partes, con el título name, el texto description y las imágenes JPEG como photos.
…
"share_target": {
"action": "/share",
"method": "POST",
"enctype": "multipart/form-data",
"params": {
"title": "name",
"text": "description",
"files": [
{
"name": "photos",
"accept": ["image/jpeg", ".jpg"]
}
]
}
}
…
Destinos de uso compartido de service worker con Workbox
Aunque normalmente lo maneja un extremo de servidor, un buen truco que puedes hacer para un objetivo de uso compartido es registrar una ruta directamente en tu service worker para que controle la solicitud. Esto permitirá que tu app sea un objetivo de uso compartido sin un backend.
Para hacerlo, debes registrar una ruta que controle tu service worker en Workbox. Primero, importa registerRoute desde 'workbox-routing'. Ten en cuenta que está registrada para la ruta /share, la misma que aparece en el manifiesto de ejemplo de la app web. 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.
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 almacenarlos en caché. Puedes enviarlos a algún lugar con una solicitud de recuperación. Incluso puedes usar las otras opciones del manifiesto, como entregar 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 probarla en la app de ejemplo Fugu Journal y ver su implementación de service worker en su código fuente.
Una acción común es retener 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 los pone a la par de las aplicaciones específicas de la plataforma para la tarea fundamental de compartir contenido entre apps. Sin embargo, esto suele requerir un servidor disponible para recibir la solicitud. Si usas Workbox para crear una ruta de destino de uso compartido directamente en el service worker, la app no tendrá esta restricción, lo que permitirá que el objetivo de uso compartido funcione con apps sin conexión y sin backends.
Foto de Elaine Casap en Unsplash