Compartir a través de

Integración de Aplicaciones web progresivas con Windows Share

En este artículo se explica cómo integrar una aplicación web progresiva (PWA) con la característica Windows Share . Esta característica permite a los usuarios compartir contenido de una aplicación de Windows a otra. PWA se registra como destino de recurso compartido para recibir y controlar archivos compartidos dentro de la aplicación.

¿Qué es Compartir destino?

Share Target es una característica que se introdujo en Windows 8 y permite que una aplicación reciba datos de otra aplicación. Share Target funciona como un Portapapeles, pero con contenido dinámico.

Compartir contenido de la PWA

Para compartir contenido, una PWA genera contenido (como texto, vínculos o archivos) y entrega el contenido compartido al sistema operativo. El sistema operativo permite al usuario decidir qué aplicación quiere usar para recibir ese contenido. Las PWA pueden usar la API de Web Share para desencadenar la visualización de la hoja de recursos compartidos en Windows. La API de Web Share se admite en Microsoft Edge y en otros exploradores basados en Chromium.

Consulte Uso compartido de contenido en la documentación de Microsoft Edge para obtener un ejemplo completo de cómo compartir contenido desde una PWA.

Recibe archivos compartidos en tu PWA

Para recibir contenido, una PWA actúa como destino de contenido. La PWA debe registrarse con el sistema operativo como destino de uso compartido de contenido.

El share_target miembro debe contener la información necesaria para que el sistema pase el contenido compartido a la aplicación. Tenga en cuenta la siguiente configuración de manifiesto de ejemplo share_target :

"share_target": {
  "action": "./share_target_path/?custom_param=foo",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "mapped_files",
        "accept": ["image/jpeg"]
      }
    ]
  }
},

Cuando el usuario selecciona la aplicación como destino del contenido compartido, se inicia la PWA. Se realiza una GET solicitud HTTP a la dirección URL especificada por la action propiedad . Los datos compartidos se pasan como los parámetros de consulta title, text y url. Se realiza la siguiente solicitud: /handle-shared-content/?title=shared title&text=shared text&url=shared url.

En el ejemplo siguiente se muestra cómo registrar el trabajo de servicio con ámbito:

navigator.serviceWorker.register('scoped-service-worker.js',
                { scope: "./share_target_path/" })

El trabajador de servicio gestiona los datos compartidos según sea necesario, y luego cumple la solicitud o puede redirigir la solicitud fuera de la ruta personalizada. En el ejemplo siguiente se muestra cómo redirigir la solicitud de vuelta fuera de la ruta de acceso personalizada:

self.addEventListener('fetch', (event) => {
    event.respondWith((async () => {
        // Read the shared data here, then
        // Redirect back out of the share_target_path to the actual site
        return Response.redirect(event.request.url.replace("share_target_path/", ""));
    })());
    return;
});

Consulte el ejemplo recepción de contenido compartido en la documentación de Microsoft Edge para obtener más información.

Consideraciones sobre el rendimiento

Si el controlador de captura se agrega únicamente para la compatibilidad con recursos compartidos, pueden surgir posibles problemas de latencia a medida que el trabajo del servicio interrumpe las solicitudes. Para solucionar este problema, considere establecer share_target como una pseudo-ruta y registrar un service worker específicamente limitado a esa ruta. Este enfoque permite el uso de un controlador de fetch para el objetivo de compartición sin registrar el mismo controlador de fetch para otras llamadas.

Aplicación PWA de ejemplo

La aplicación de ejemplo Impresora de logotipo de PWA en GitHub muestra cómo integrar una PWA con la hoja para compartir de Windows. La aplicación permite a los usuarios imprimir el logotipo de PWA en una impresora. La aplicación usa la hoja de recursos compartidos de Windows para compartir el logotipo con otras aplicaciones.

Consulte también

  • Last updated on