Совместное использование содержимого с другими приложениями

Совместное использование содержимого между приложениями стало популярным на мобильных устройствах, где управление файлами или копирование содержимого менее интуитивно понятно, чем в настольных операционных системах. Например, на мобильных устройствах обычно можно поделиться изображением с другом, отправив текстовое сообщение. Но общий доступ к содержимому не зарезервирован для мобильных устройств; также можно совместно использовать приложения в Windows.

Существует два направления совместного использования содержимого, и оба направления могут обрабатываться прогрессивными веб-приложениями (PWA):

PWA, которые регистрируются в качестве целевых объектов общего доступа, изначально интегрированы в ОС и более привлекательны для пользователей.

Общий доступ к содержимому

PWA могут использовать API веб-ресурса для запуска отображения диалогового окна общей папки операционной системы.

Чтобы поделиться содержимым, например ссылками, текстом или файлами, используйте функцию navigator.share , как показано ниже. Функция navigator.share принимает объект, который должен иметь по крайней мере одно из следующих свойств:

• title: короткий заголовок общего содержимого.
• text: более подробное описание общего содержимого.
• url: адрес ресурса для совместного использования.
• files: массив файлов для общего доступа.

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

В приведенном выше коде сначала мы проверяем, поддерживает ли браузер общий доступ через Интернет, проверив, определен ли navigator.share он. Функция navigator.share возвращает объект Promise , который разрешается при успешном использовании общего доступа, и отклоняет при возникновении ошибки.

Так как здесь используется обещание, приведенный выше код можно переписать как функцию async следующим образом:

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

В Windows приведенный выше код активирует диалоговое окно общего доступа, позволяя пользователю выбрать приложение для получения общего содержимого. Диалоговое окно общего доступа отображается ниже:

После того как пользователь выбрал приложение для получения общего содержимого, это приложение будет обрабатывать его любым способом. Например, почтовое приложение может использовать в title качестве темы электронной почты, а в text качестве текста сообщения электронной почты — .

Общий доступ к файлам

Функция navigator.share также принимает массив для files обмена файлами с другими приложениями.

Перед предоставлением общего доступа к файлам важно проверить, поддерживается ли общий доступ к файлам в браузере. Чтобы проверить, поддерживается ли общий доступ к файлам, используйте функцию navigator.canShare :

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

Элемент files объекта общего доступа должен быть массивом File объектов. Дополнительные сведения об интерфейсе file.

Одним из способов создания File объектов является:

1. Сначала используйте fetch API для запроса ресурса.
2. Затем используйте возвращенный ответ, чтобы создать новый File.

Этот подход показан ниже.

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

В приведенном выше коде:

1. Функция getImageFileFromURL извлекает изображение с помощью URL-адреса.
2. Функция response.blob() преобразует изображение в двоичный большой объект (BLOB).
3. Код создает File объект с помощью большого двоичного объекта.

Демонстрация общего доступа к содержимому

PWAmp — это демонстрационная версия PWA, которая использует функцию navigator.share для обмена текстом и ссылками.

Чтобы протестировать функцию общего доступа, выполните следующие действия.

1. Перейдите в раздел PWAmp.

2. В правой части адресной строки щелкните доступное приложение. Кнопка Установить (, чтобы установить PWAmp в качестве PWA.

3. В установленной PWA PWAmp импортируйте локальный звуковой файл (перетащив его в окно приложения). Например, если вы клонировали репозиторий MicrosoftEdge/Demos , у вас есть локальная копия .mp3 файлов в (каталог pwamp/songs репозитория > Demos), например C:\Users\username\GitHub\Demos\pwamp\songs.

4. Рядом с импортированной песней нажмите кнопку Действия с песней (...) и выберите Поделиться. Откроется диалоговое окно "Общий доступ Windows":

   

5. Выберите приложение, в котором будет предоставляться общий доступ к содержимому.

Исходный код PWAmp можно найти на сайте GitHub. Приложение PWAmp использует API веб-ресурса в исходном файлеapp.js .

Получение общего содержимого

С помощью API целевого веб-ресурса PWA можно зарегистрироваться для отображения в качестве приложения в диалоговом окне системного общего ресурса. Затем PWA может использовать API целевого веб-ресурса для обработки общего содержимого, поступающего из других приложений.

Регистрация в качестве целевого объекта

Чтобы получить общее содержимое, первое, что нужно сделать, — зарегистрировать PWA в качестве целевого объекта общего доступа. Чтобы зарегистрироваться, используйте член манифеста share_target . После установки приложения операционная система использует share_target элемент для включения приложения в диалоговое окно общей папки системы. Операционная система знает, что делать, когда пользователь выбирает приложение, чтобы предоставить общий доступ к содержимому.

Участник share_target должен содержать необходимые сведения, необходимые системе для передачи общего содержимого в приложение. Рассмотрим следующий код манифеста:

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

Когда приложение выбирается пользователем в качестве целевого объекта для общего содержимого, запускается PWA. Выполняется GET HTTP-запрос на URL-адрес, указанный свойством action . Общие данные передаются в titleкачестве параметров запроса , textи url . Выполняется следующий запрос: /handle-shared-content/?title=shared title&text=shared text&url=shared url.

Если у вас есть код, использующий другие имена параметров запроса, можно сопоставить параметры запроса по умолчанию title, textи url с другими именами. В следующем примере titleпараметры запроса , textи url сопоставляются с subject, bodyи address:

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

Обработка общих данных GET

Для обработки данных, совместно используемых по запросу GET в коде URL PWA, используйте конструктор для извлечения параметров запроса:

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

Обработка общих данных POST

Если общие данные предназначены для изменения приложения каким-либо образом, например путем обновления некоторого содержимого, хранящегося в приложении, необходимо использовать POST метод и определить тип кодирования с enctypeпомощью :

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

POST HTTP-запрос содержит общие данные, закодированные как multipart/form-data. Вы можете получить доступ к этим данным на HTTP-сервере с помощью кода на стороне сервера, но это не будет работать, когда пользователь находится в автономном режиме. Чтобы улучшить взаимодействие, используйте рабочую роль службы и получите доступ к данным из рабочей роли службы с помощью fetch прослушивателя событий, как показано ниже.

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);
        })());
    }
});

В приведенном выше коде:

1. Рабочая роль службы перехватывает POST запрос.

2. Использует данные каким-то образом (например, для локального хранения содержимого).

3. Перенаправляет пользователя на страницу успешного выполнения. Таким образом, приложение может работать, даже если сеть не работает. Приложение может хранить содержимое только локально или отправлять содержимое на сервер позже при восстановлении подключения (например, с помощью фоновой синхронизации).

Обработка общих файлов

Приложения также могут обрабатывать общие файлы. Для обработки файлов в PWA необходимо использовать POST метод и multipart/form-data тип кодирования. Кроме того, необходимо объявить типы файлов, которые может обрабатывать приложение.

{
    "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"]
                }
            ]
        }
    }
}

Приведенный выше код манифеста сообщает системе, что приложение может принимать текстовые файлы с различными типами MIME. Расширения имен файлов, такие как .txt, также могут передаваться в accept массив.

Чтобы получить доступ к общему файлу, используйте запрос formData , как раньше, и используйте FileReader для чтения содержимого следующим образом:

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);
        })());
    }
});

См. также

• Интеграция с пользовательским интерфейсом общего доступа ОС с API веб-ресурса
• Получение общих данных с помощью API целевого веб-ресурса