Обмен содержимым из приложения и с его помощью¶

Что мы рассмотрим сегодня

Что означает обмен контентом между приложениями? О каком виде контента идет речь?
Узнайте, как обмениваться содержимым непосредственно из PWA.
Подготовьте PWA к приему общего контента.

Определение¶

Привет! В сегодняшнем посте из серии 30 Days of PWA мы расскажем о совместном использовании! Вы знаете, что "делиться — значит заботиться". Эту поговорку мы, наверное, часто слышим... и не без оснований. Мы — социальные существа, и общение с теми, кто нам дорог, является естественным. Будь то важная новость или забавный мем, способность распространять информацию играет важную роль в нашей жизни и влияет на то, как мы узнаем, взаимодействуем и даже принимаем решения.

Неудивительно, что при огромном количестве информации в Интернете возможность обмена контентом становится все более актуальной и часто становится основой хорошего пользовательского опыта. Поэтому современные браузеры позволяют легко делиться содержимым, обычно предлагая для этого опции в контекстном меню или настройках. На следующем снимке экрана в качестве примера показано контекстное меню браузера Microsoft Edge с выделенной опцией Share.

При совместном использовании информации через веб-браузер обычно появляется диалоговое окно совместного доступа, характерное для используемой операционной системы. В диалоговом окне предлагаются варианты того, с кем и где можно поделиться, которые могут отличаться в зависимости от типа содержимого. В приведенном выше примере, когда мы предоставляем общий доступ к веб-странице (или URL), любое приложение, работающее с текстом или ссылками, может выступать в качестве адресата, получающего общий доступ к содержимому. Возможно, вы захотите поделиться этой страницей с другом через систему мгновенного обмена сообщениями или отправить ссылку по электронной почте коллеге — это лишь два из множества вариантов, которые мы используем ежедневно. Вот как выглядит функция совместного доступа в Android:

А вот как это выглядит на macOS:

Как показано на изображениях выше, действие совместного доступа вызывает диалоговое окно общего доступа операционной системы. Это позволяет пользователю передавать информацию между приложениями, не завися от того, откуда осуществляется обмен. А вот здесь уже становится действительно интересно.

Теперь, когда я изложил концепцию обмена между приложениями, давайте подключим к этому процессу PWA. Мы можем использовать Web Share API и Web Share Target API для вызова этого диалога обмена и передачи определенного содержимого, позволяя вашему веб-приложению вести себя как любому другому установленному приложению.

Наш демонстрационный PWA¶

Для демонстрации работы Web Share API я буду использовать PWA PWinter, доступный здесь. Этот PWA позволяет пользователю создавать собственные тематические логотипы PWA. Затем эти логотипы можно сохранить в виде SVG-файлов для совместного использования.

Общий доступ из вашего приложения¶

Для начала давайте рассмотрим, как организовать общий доступ из вашего веб-приложения. Мы хотим иметь возможность передавать данные из PWA в другое приложение, которое может обрабатывать тип передаваемых данных. Как и в случае со многими другими веб-приложениями, "для этого есть API". Для данного конкретного сценария на помощь приходит Web Share API, и мы можем использовать метод navigator.share(), который принимает в качестве параметра данные, которыми мы хотим поделиться. Эти данные могут состоять из url, текста, заголовка и даже массива файлов, если система это поддерживает. В результате будет возвращен промис, который подтвердит, что данные переданы. Как и в случае с другими мощными API, для использования Web Share API необходимо работать под HTTPS.

Совместный доступ к ссылке¶

Приложение PWinter может делиться своим URL-адресом, что позволяет легко передать адрес приложения другому пользователю. Для этого в правом нижнем углу отображается значок, при нажатии на который вызывается Web Share API. Следующий код позволяет передать заголовок, текст и url через диалог обмена операционной системы.

// Shares a link with the Web Share API
async function sharePWinter() {
    const shareData = {
        title: 'PWinter',
        text: 'Design your own PWA Logo.',
        url: 'https://diek.us/pwinter',
    };
    try {
        await navigator.share(shareData);
        console.log('PWinter shared!');
    } catch (e) {
        console.error(e);
    }
}

Обмен файлами¶

Web Share API также позволяет обмениваться файлами. Эта возможность работает с изображениями, PDF-файлами, аудио, текстовыми документами и видео. Полный список поддерживаемых типов файлов находится здесь, однако всегда следует проверять, работает ли действие обмена с тем типом файла, которым вы хотите поделиться.

Для этого можно использовать метод navigator.canShare(), который возвращает true, если совместный доступ будет успешным. Метод возвращает false, если данные не могут быть проверены. Это может произойти из-за плохого форматирования URL, отсутствия параметров данных, по соображениям безопасности или даже из-за того, что реализация не поддерживает данный тип файла. После того как вы убедились, что обмен будет успешным, вы можете указать файлы для обмена в массиве, который передается в качестве опции методу share. Следующий код из демонстрационного PWA PWinter предоставляет общий доступ к логотипу, созданному пользователем в формате SVG.

// Shares a file with the Web Share API
async function shareLogo() {
    let fileToShare = createFileForSharing(
        preparePWALogoforSVG(),
    );
    let filesArray = [];
    filesArray[0] = fileToShare;
    if (
        navigator.canShare &&
        navigator.canShare({ files: filesArray })
    ) {
        try {
            await navigator.share({
                files: filesArray,
                title: 'My PWA Logo',
                text: 'Custom PWA logo from The PWinter.',
            });
            console.log('Share was successful.');
        } catch (error) {
            console.log('Sharing failed', error);
        }
    } else {
        console.log(`System doesn't support sharing.`);
    }
}

Совместное использование к своему приложению¶

И последнее, но, безусловно, не менее важное: вы можете передавать информацию из других приложений в свой PWA. Используя Web Share Target API, вы можете зарегистрировать свой PWA как принимающий ресурс, что позволит ему интегрироваться с диалогом обмена в ОС. На предыдущем изображении видно, что созданный пользователем SVG-файл может быть передан ряду приложений, перечисленных в нижней части диалогового окна общего доступа ОС; в частности, SimpleEdit и The PWinter — это PWA, которые могут работать с файлами изображений.

Зарегистрировать PWA в качестве объекта совместного доступа можно, добавив член share_target в файл web Manifest приложения. Для приема простых данных, таких как ссылка или текст, код будет выглядеть следующим образом:

"share_target": {
      "action": "index.html?shared-color",
      "method": "GET",
      "enctype": "application/x-www-form-urlencoded",
      "params": {
        "title": "title",
        "text": "text",
        "url": "url"
      }
    }

Важно отметить, что свойство action определяет, какая часть PWA будет обрабатывать поступающие данные. Для демонстрационного PWA это дополнение к файлу манифеста указывает, что ссылка будет получена и обработана по адресу index.html?shared-color. В этом файле имеется код, который знает, что при вызове этого url он попытается разобрать входящую ссылку, чтобы обнаружить любой шестнадцатеричный код цвета; это позволит установить буквы логотипа PWA в этот конкретный цвет.

Если целевой PWA изменяется в зависимости от получаемой информации, то необходимо установить значение ключа method в POST, а поле enctype в multipart/form-data. Если вы также ожидаете, что PWA будет получать файлы, то обязательно установите свойство files в массив с этими файлами. Когда пользователь обращается к PWA, браузер откроет приложение по url действия и обработает данные соответствующим образом.

Резюме¶

Я рассказал о двух составляющих совместного доступа к PWA. Совместный доступ из приложения осуществляется с помощью Web Share API. С его помощью можно делиться различной информацией. Вы можете поделиться с приложением, зарегистрировав его в качестве объекта совместного доступа с помощью Web Share Target API. Это делается через запись в файле манифеста. Эти две расширенные возможности помогают PWA органично интегрироваться с платформой и создать плавный, единый опыт обмена. В настоящее время Web Share API поддерживается на платформах Windows, macOS, Linux, Android и iOS. Некоторые движки не поддерживаются, поэтому будьте готовы проверить и соответствующим образом адаптировать свое приложение. Целевой API Web Share полагается на Manifest и установку PWA, что означает, что он поддерживается в браузерах на базе Chromium.

Теперь вы готовы к совместному использованию и продолжаете завтрашний пост в серии, где вы узнаете о режимах отображения!

Ресурсы¶

Web Share API в MDN Web Docs
Поделиться содержимым с другими приложениями в Microsoft Edge docs.