Compartir contenido con otras aplicaciones

El uso compartido de contenido entre aplicaciones se hizo popular en dispositivos móviles donde manipular archivos o copiar contenido es menos intuitivo que en sistemas operativos de escritorio. Por ejemplo, en el móvil, es habitual compartir una imagen con un amigo mediante el envío de un mensaje de texto. Pero el uso compartido de contenido no está reservado para dispositivos móviles; también es posible compartir entre aplicaciones en Windows.

Hay dos direcciones para compartir contenido y ambas direcciones se pueden controlar mediante Aplicaciones web progresivas (PWA):

Dirección	Descripción
Uso compartido de contenido	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.
Recepción de contenido compartido	Para recibir contenido, un PWA actúa como destino de contenido. El PWA se registra con el sistema operativo como destino de uso compartido de contenido.

Los PPA que se registran como destinos de recursos compartidos se integran de forma nativa en el sistema operativo y son más atractivos para los usuarios.

Uso compartido de contenido

Las PPA pueden usar web share API para desencadenar la visualización del cuadro de diálogo de recurso compartido del sistema operativo.

Nota:

El uso compartido web solo funciona en sitios servidos a través de HTTPS (que es el caso de los PWA) y solo se puede invocar en respuesta a una acción del usuario.

Para compartir contenido como vínculos, texto o archivos, use la navigator.share función , como se muestra a continuación. La navigator.share función acepta un objeto que debe tener al menos una de las siguientes propiedades:

• title: un título corto para el contenido compartido.
• text: una descripción más larga del contenido compartido.
• url: la dirección de un recurso que se va a compartir.
• files: matriz de archivos que se van a compartir.

function shareSomeContent(title, text, url) {
  if (!navigator.share) {
    return;
  }

  navigator.share({title, text, url}).then(() => {
    console.log('The content was shared successfully');
  }).catch(error => {
    console.error('Error sharing the content', error);
  });
}

En el código anterior, primero comprobamos si el explorador admite el uso compartido web, comprobando si navigator.share está definido. La navigator.share función devuelve un objeto Promise que se resuelve cuando el uso compartido se realiza correctamente y se rechaza cuando se produce un error.

Dado que aquí se usa una promesa, el código anterior se puede volver a escribir como una async función, como se indica a continuación:

async function shareSomeContent(title, text, url) {
  if (!navigator.share) {
    return;
  }

  try {
    await navigator.share({title, text, url});
    console.log('The content was shared successfully');
  } catch (e) {
    console.error('Error sharing the content', e);
  }
}

En Windows, el código anterior desencadenará el cuadro de diálogo de recurso compartido, lo que permite al usuario elegir una aplicación para recibir el contenido compartido. El cuadro de diálogo de recurso compartido se muestra a continuación:

Una vez que el usuario ha seleccionado una aplicación para recibir el contenido compartido, depende de esta aplicación controlarla de la manera que elija. Por ejemplo, una aplicación de correo electrónico podría usar como title asunto del correo electrónico y usar como text cuerpo del correo electrónico.

Compartir archivos

La navigator.share función también acepta una files matriz para compartir archivos con otras aplicaciones.

Es importante comprobar si el explorador admite el uso compartido de archivos antes de compartirlos. Para comprobar si se admite el uso compartido de archivos, use la navigator.canShare función :

function shareSomeFiles(files) {
  if (navigator.canShare && navigator.canShare({files})) {
    console.log('Sharing files is supported');
  } else {
    console.error('Sharing files is not supported');
  }
}

El files miembro del objeto sharing debe ser una matriz de File objetos. Obtenga más información sobre la interfaz de archivo.

Una manera de construir File objetos es:

1. En primer lugar, use la fetch API para solicitar un recurso.
2. A continuación, use la respuesta devuelta para crear un nuevo File.

Este enfoque se muestra a continuación.

async function getImageFileFromURL(imageURL, title) {
  const response = await fetch(imageURL);
  const blob = await response.blob();
  return new File([blob], title, {type: blob.type});
}

En el código anterior:

1. La getImageFileFromURL función captura una imagen mediante una dirección URL.
2. La response.blob() función convierte la imagen en un objeto binario grande (BLOB).
3. El código crea un File objeto mediante BLOB.

Demostración del uso compartido de contenido

PWAmp es una PWA de demostración que usa la navigator.share función para compartir texto y vínculos.

Para probar la característica Uso compartido:

1. Vaya a PWAmp.

2. En el lado derecho de la barra de direcciones, haga clic en la aplicación disponible. Botón Instalar () para instalar PWAmp como PWA.

3. En el PWA de PWAmp instalado, importe un archivo de audio local (arrastrándolo a la ventana de la aplicación). Por ejemplo, si ha clonado el repositorio MicrosoftEdge/Demos , tiene una copia local de .mp3 archivos en el directorio (pwamp/songs del repositorio > de Demos), como C:\Users\username\GitHub\Demos\pwamp\songs.

4. Junto a la canción recién importada, haga clic en el botón Acciones de canción (...) y, a continuación, seleccione Compartir. Se muestra el cuadro de diálogo Recurso compartido de Windows:

   

5. Elija una aplicación en la que compartir el contenido.

Puede encontrar el código fuente de PWAmp en GitHub. La aplicación PWAmp usa web share API en el archivo de origen app.js .

Recepción de contenido compartido

Mediante la API de destino del recurso compartido web , un PWA puede registrarse para mostrarse como una aplicación en el cuadro de diálogo del recurso compartido del sistema. A continuación, PWA puede usar la API de destino del recurso compartido web para controlar el contenido compartido procedente de otras aplicaciones.

Nota:

Solo los PPA instalados pueden registrarse como destinos de recurso compartido.

Registro como destino

Para recibir contenido compartido, lo primero que debe hacer es registrar su PWA como destino de recurso compartido. Para registrarse, use el miembro del share_target manifiesto. Tras la instalación de la aplicación, el sistema operativo usa el miembro para incluir la share_target aplicación en el cuadro de diálogo del recurso compartido del sistema. El sistema operativo sabe qué hacer cuando el usuario selecciona la aplicación para compartir el 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 el siguiente código de manifiesto:

{
    "share_target": {
        "action": "/handle-shared-content/",
        "method": "GET",
        "params": {
            "title": "title",
            "text": "text",
            "url": "url",
        }
    }
}

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 parámetros titlede consulta , texty url . Se realiza la siguiente solicitud: /handle-shared-content/?title=shared title&text=shared text&url=shared url.

Si tiene código existente que usa otros nombres de parámetros de consulta, puede asignar los parámetros de consulta , y url predeterminados titletexta los demás nombres. En el ejemplo siguiente, los titleparámetros de consulta , texty url se asignan a subject, bodyy address:

{
    "share_target": {
        "action": "/handle-shared-content/",
        "method": "GET",
        "params": {
            "title": "subject",
            "text": "body",
            "url": "address",
        }
    }
}

Control de datos compartidos GET

Para controlar los datos compartidos a través de la solicitud GET en el código PWA, use el URL constructor para extraer los parámetros de consulta:

window.addEventListener('DOMContentLoaded', () => {
    console url = new URL(window.location);

    const sharedTitle = url.searchParams.get('title');
    const sharedText = url.searchParams.get('text');
    const sharedUrl = url.searchParams.get('url');
});

Control de datos compartidos POST

Si los datos compartidos están diseñados para cambiar la aplicación de alguna manera, por ejemplo, actualizando parte del contenido almacenado en la aplicación, debe usar el POST método y definir un tipo de codificación con enctype:

{
    "share_target": {
        "action": "/post-shared-content",
        "method": "POST",
        "enctype": "multipart/form-data",
        "params": {
            "title": "title",
            "text": "text",
            "url": "url",
        }
    }
}

La POST solicitud HTTP contiene los datos compartidos, codificados como multipart/form-data. Puede acceder a estos datos en el servidor HTTP mediante código del lado servidor, pero esto no funcionará cuando el usuario esté sin conexión. Para proporcionar una mejor experiencia, use un trabajo de servicio y acceda a los datos del trabajador del servicio mediante un fetch agente de escucha de eventos, como se indica a continuación:

self.addEventListener('fetch', event => {
    const url = new URL(event.request.url);

    if (event.request.method === 'POST' && url.pathname === '/post-shared-content') {
        event.respondWith((async () => {
            const data = await event.request.formData();

            const title = data.get('title');
            const text = data.get('text');
            const url = data.get('url');

            // Do something with the shared data here.

            return Response.redirect('/content-shared-success', 303);
        })());
    }
});

En el código anterior:

1. El trabajador del servicio intercepta la POST solicitud.

2. Usa los datos de alguna manera (por ejemplo, para almacenar el contenido localmente).

3. Redirige al usuario a una página correcta. De este modo, la aplicación puede funcionar incluso si la red está inactiva. La aplicación puede optar por almacenar solo el contenido localmente o puede enviar el contenido al servidor más adelante, cuando se restaure la conectividad (por ejemplo, mediante la sincronización en segundo plano).

Controlar archivos compartidos

Las aplicaciones también pueden controlar archivos compartidos. Para controlar los archivos de la PWA, debe usar el POST método y el tipo de multipart/form-data codificación. Además, debes declarar los tipos de archivos que la aplicación puede controlar.

{
    "share_target": {
        "action": "/store-code-snippet",
        "method": "POST",
        "enctype": "multipart/form-data",
        "params": {
            "title": "title",
            "files": [
                {
                    "name": "textFile",
                    "accept": ["text/plain", "text/html", "text/css", 
                               "text/javascript"]
                }
            ]
        }
    }
}

El código de manifiesto anterior indica al sistema que la aplicación puede aceptar archivos de texto con varios tipos MIME. Las extensiones de nombre de archivo, como .txt, también se pueden pasar en la accept matriz.

Para acceder al archivo compartido, use la solicitud formData como antes y use para FileReader leer el contenido, como se indica a continuación:

self.addEventListener('fetch', event => {
    const url = new URL(event.request.url);

    if (event.request.method === 'POST' && url.pathname === '/store-code-snippet') {
        event.respondWith((async () => {
            const data = await event.request.formData();

            const filename = data.get('title');
            const file = data.get('textFile');

            const reader = new FileReader();
            reader.onload = function(e) {
                const textContent = e.target.result;

                // Do something with the textContent here.

            };
            reader.readAsText(file);

            return Response.redirect('/snippet-stored-success', 303);
        })());
    }
});

Vea también

• Integración con la interfaz de usuario de uso compartido del sistema operativo con Web Share API
• Recepción de datos compartidos con la API de destino del recurso compartido web