How to make your PWA display alongside native apps in system-level sharing UIs
The API de destino de Web Share le permite mostrar su Progressive web app en el recurso compartido nativo de un Username bed sheet después de que se haya instalado. Si bien funciona muy bien si tiene un server disponible para recibir la solicitud, es mucho más difícil ponerse a trabajar si no lo tiene.
In this article we will use
Workbox, un conjunto de bibliotecas de JavaScript para agregar soporte sin conexión a aplicaciones web, para crear una Destination url compartida que se encuentre completamente dentro de su trabajador de servicio. Esto permite que los sitios estáticos y las aplicaciones de una sola página sirvan como destinos para compartir sin un punto final de dedicated server.
System level shared destination selector with an installed PWA named
Compartir Target Test as an option.
In the same page
If you are unfamiliar with how Web Share Target works, Receive Shared Data with the Web Share Target API gives you a detailed introduction. Here's a quick review.
Hay dos partes para implementar la funcionalidad de destino del recurso compartido web. Primero, actualice el manifiesto de su aplicación web para indicar que desea que su aplicación be un destino compartido cuando se instale. El siguiente ejemplo dirige las acciones al /Compartir Url through POST request. It is coded as a multi-part form, and the title is called
yam, text called description, and JPEG images are called photos.
…
"share_target": {
"action": "/share",
"method": "POST",
"enctype": "multipart / form-data",
"params": {
"title": "name",
"text": "description",
"files": [
{
"name": "photos",
"accept": ["image/jpeg", ".jpg"]
}
]
}
}
…Service worker shares goals with Workbox
Aunque normalmente lo maneja un punto final del servidor, un buen truco que puede hacer para un target compartido es registrar una ruta directamente en su trabajador de servicio para manejar la solicitud. Esto permitirá que su aplicación sea un objetivo para compartir sin un backend.
You do this in Workbox logging a route driven by your service worker. Start by importing
registerRoute from 'workbox-routing'. Please note that you are registered to
/Compartir route, the same one that appears in the manifest for the sample web application. In response, call shareTargetHandler ().
import { registerRoute } desde 'workbox-routing';registerRoute(
'/share',
shareTargetHandler,
'POST'
);
the shareTargetHandler () La función es asincrónica y toma el event, espera los datos del formulario y luego recupera los archivos multimedia de eso.
async function shareTargetHandler ({event}) {
const formData = await event.request.formData();
const mediaFiles = formData.getAll('media');for (const mediaFile of mediaFiles) {
});
};
Luego puede hacer lo que quiera con estos archivos. Puede almacenarlos en cache. Puede enviarlos a algún lugar con una solicitud de recuperación. Incluso puede usar las otras opciones de manifiesto, tal vez sirviendo una página con algunos parámetros de consulta para los otros elementos compartidos o almacenando los datos y punteros a los medios en el Caching API
or IndexedDB.
You can try it in the sample app Fugu's Diary and view your service worker implementation in your source code.
One common thing you can do is keep shared resources until better network connections are available. Workbox also supports periodic synchronization in the background.
conclusion
La API Share Target es una forma sencilla de integrar profundamente su aplicación web progresiva en los dispositivos del usuario, poniéndolos a la par con las aplicaciones nativas para la tarea crítica de compartir contents entre aplicaciones. Pero hacerlo normalmente requiere un servidor disponible para recibir la solicitud. Al aprovechar Workbox para crear una ruta de destino compartido directamente en su trabajador de servicio, su aplicación está libre de esta restricción, lo que permite que Share Target funcione para aplicaciones sin conexión y sin backends.
Photo by Elaine casap in Unsplash
