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 común compartir una imagen con un amigo enviando un mensaje de texto. Pero el uso compartido de contenido no está reservado a dispositivos móviles; es posible compartir entre aplicaciones en Windows, también.

Hay dos direcciones para compartir contenido y las aplicaciones web progresivas (PWA) pueden controlar ambas direcciones:

Las PWA que se registran como destinos de recurso compartido se integran de forma nativa en el sistema operativo y son más atractivas para los usuarios.

Compartir contenido

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

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: una matriz de archivos que se compartirán.

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 comprobaremos si el explorador admite el uso compartido web, probando si navigator.share está definido. La función devuelve un objeto Promise que se resuelve cuando el uso compartido se realiza correctamente y rechaza navigator.share cuando se produce un error.

Dado que aquí se usa una promesa, el código anterior se puede reescribir como una async función, como se muestra 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 activará el cuadro de diálogo compartir, lo que permite al usuario elegir una aplicación para recibir el contenido compartido. El cuadro de diálogo compartir se muestra a continuación:

Una vez que el usuario ha elegido una aplicación para recibir el contenido compartido, esta aplicación debe controlarla de la forma que elija. Por ejemplo, una aplicación de correo electrónico puede usar el asunto como asunto de correo electrónico title y usar el como el cuerpo del correo text electrónico.

Compartir archivos

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

Es importante probar 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 forma de construir File objetos es:

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

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 el BLOB.

Demostración del uso compartido de contenido

DevTools Sugerencias es un PWA que usa la navigator.share función para compartir texto y vínculos.

Para probar la característica:

1. Vaya a DevTools Sugerencias.
2. Seleccione una sugerencia.
3. Haga clic en Compartir sugerencia.

Se muestra Windows cuadro de diálogo Compartir. El usuario elige una aplicación en la que compartir el contenido:

Puede encontrar el código fuente en GitHub. La aplicación usa la API de recurso compartido web en el share.js de origen.

Recepción de contenido compartido

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

Registrarse como destino

Para recibir contenido compartido, lo primero que debe hacer es registrar su PWA como un destino de recurso compartido. Para registrarse, use el share_target miembro del manifiesto. Tras la instalación de la aplicación, el sistema operativo usa el miembro para incluir la aplicación en el cuadro de diálogo share_target compartir sistema. El sistema operativo sabe qué hacer cuando el usuario elige 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 PWA la aplicación. Se GET realiza una solicitud HTTP a la dirección URL especificada por la action propiedad. Los datos compartidos se pasan como title parámetros , y de text url consulta. 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 predeterminados , y de consulta title text a los otros url nombres. En el ejemplo siguiente, los title parámetros , y query se asignan a , y text url subject body address :

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

Controlar 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');
});

Controlar datos compartidos post

Si los datos compartidos están pensados para cambiar la aplicación de alguna manera, como al actualizar parte del contenido almacenado en la aplicación, debes usar el método y definir un tipo de codificación con POST 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 tener acceso 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, puede obtener acceso a los datos del trabajador del servicio, mediante un agente de escucha de eventos, de la fetch siguiente manera:

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 esta forma, la aplicación puede funcionar incluso si la red está abajo. La aplicación puede elegir 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 PWA, debe usar el método POST 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 obtener acceso al archivo compartido, use la solicitud como antes y formData use una para leer el FileReader contenido, como se muestra 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);
        })());
    }
});

Consulte también

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