Comment faire afficher votre PWA aux côtés des applications natives dans les interfaces utilisateur de partage au niveau du système
La API de destino de Web Share le permite mostrar su Application Web progressive en el recurso compartido nativo de un Nom d'utilisateur drap de lit después de que se haya instalado. Si bien funciona muy bien si tiene un serveur disponible para recibir la solicitud, es mucho más difícil ponerse a trabajar si no lo tiene.
Dans cet article, nous utiliserons
Boîte de travail, un conjunto de bibliotecas de JavaScript para agregar soporte sin conexión a aplicaciones web, para crear una URL de destination 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 serveur dédié.
Sélecteur de destination partagé au niveau du système avec un PWA installé nommé
Compartir Cible Test Comme une option.
Dans la même page
Si vous ne connaissez pas le fonctionnement de Web Share Target, Recevoir des données partagées avec l'API Web Share Target vous donne une introduction détaillée. Voici un bref examen.
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 être un destino compartido cuando se instale. El siguiente ejemplo dirige las acciones al / Compartir URL à travers de PUBLIER demander. Il est codé sous forme de formulaire en plusieurs parties et le titre est appelé
patate douce, texte appelé la description, et les images JPEG sont appelées Photos.
…
"share_target": {
"action": "/share",
"method": "PUBLIER",
"enctype": "multipart / form-data",
"params": {
"title": "name",
"text": "description",
"files": [
{
"name": "photos",
"accept": ["image/jpeg", ".jpg"]
}
]
}
}
…Le technicien de service partage ses objectifs avec Workbox
Aunque normalmente lo maneja un punto final del servidor, un buen truco que puede hacer para un objectif 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.
Vous faites cela dans Boîte de travail consigner un itinéraire conduit par votre technicien de service. Commencez par importer
registerRoute de 'routage de boîte de travail'. Veuillez noter que vous êtes inscrit pour
/ Compartir route, la même que celle qui apparaît dans le manifeste de l'exemple d'application Web. En réponse, appelez shareTargetHandler ().
importer { registerRoute } desde 'routage de boîte de travail';registerRoute(
'/share',
shareTargetHandler,
'POST'
);
Les shareTargetHandler () La función es asincrónica y toma el un événement, espera los datos del formulario y luego recupera los archivos multimedia de eso.
asynchrone une fonction shareTargetHandler ({un événement}) {
const formData = attendre un événement.request.formData();
const mediaFiles = formData.getAll('media');pour (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 API de mise en cache
ou IndexedDB.
Vous pouvez l'essayer dans l'exemple d'application Journal de Fugu et affichez l'implémentation de votre service worker dans votre code source.
Une chose courante que vous pouvez faire est de conserver les ressources partagées jusqu'à ce que de meilleures connexions réseau soient disponibles. Workbox prend également en charge la synchronisation périodique en arrière-plan.
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 Contenu 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 par Elaine Casap au Unsplash
