Cómo hacer que tu PWA aparezca junto a las 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 después de que se haya instalado. Si bien funciona muy bien si tienes un servidor disponible para recibir la solicitud, es mucho más difícil hacerlo funcionar 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, con el objetivo de crear una URL de destino para compartir 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 destinos de uso compartido sin un extremo de servidor dedicado.
Share Target Test como opción.
En la misma página
Si no sabes cómo funciona Web Share Target, Cómo recibir datos compartidos con la API de Web Share Target te brinda una introducción detallada. A continuación, se incluye una revisión rápida.
La implementación de la funcionalidad de destino de uso compartido en la Web consta de dos partes. Primero, actualiza el manifiesto de tu 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 de /share a través de una solicitud de 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"]
}
]
}
}
…
Objetivos de uso compartido del service worker con Workbox
Si bien normalmente se controla con un extremo del servidor, un truco útil que puedes hacer para un destino 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, registra 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 este.
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 del manifiesto, tal vez publicando una página con algunos parámetros de consulta para los otros elementos compartidos o almacenando los datos y los punteros a los medios en la API de Cache Storage o IndexedDB.
Puedes probarlo 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 que puedes realizar 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 la 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, generalmente se requiere un servidor disponible para recibir la solicitud. Si aprovechas Workbox para crear una ruta de destino de uso compartido directamente en tu service worker, tu app no tendrá esta restricción, lo que permitirá que Share Target funcione para las apps sin conexión y sin back-ends.
Foto de Elaine Casap en Unsplash