Web Share для современных веб-приложений

Использование параметров общего доступа, аналогичных мобильным устройствам, в веб-приложениях

Вы когда-нибудь сталкивались с Web Share API? По крайней мере, многие из вас, возможно, слышали об этом термине. Web Share API уже давно существует. Однако первоначальная поддержка Web Share API была ограничена мобильными устройствами.

Недавно Web Share и Web Share API начали поддерживать Windows и Chrome OS, что сделало их интересными для веб-разработчиков.

Web Share API - быстрая демонстрация

Мы можем быстро протестировать API-интерфейсы Web Share, выполнив приведенные ниже шаги, чтобы обмениваться данными с другими приложениями с веб-страницы.

1. Прежде всего, убедитесь, что вы используете последнюю версию Google Chrome.
2. Откройте браузер, перейдите по ссылке это и нажмите кнопку Поделиться.
3. Вы можете открыть любое другое приложение, которое позволяет делиться. Кроме того, он также поддерживает совместное использование с соседними устройствами.
4. После публикации вы можете просмотреть общие данные в целевом приложении. Я использовал Mail в качестве приложения, и оно добавило текстовые данные в тело письма, как показано ниже. Данные были переданы из Web Share API.

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

Совет: создавайте приложения иначе

Инструменты OSS, такие как Bit, предлагают новую парадигму для создания современных приложений.

Вместо того чтобы разрабатывать монолитные проекты, вы сначала создаете независимые компоненты. Затем вы собираете свои компоненты вместе, чтобы создать столько приложений, сколько захотите. Это не только более быстрый способ сборки, но и более масштабируемый, он помогает стандартизировать разработку.

Практическое использование веб-ресурсов

Обмен ссылками и текстом

Вы можете использовать простой share() метод, чтобы поделиться нужными ссылками и текстом. Ниже приведен фрагмент кода, который поможет вам в работе с Web Share.

if (navigator.share) {
  navigator.share({
    title: 'google.com',
    text: 'Visit the google.com.',
    url: 'https://www.google.com/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
 }

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

Совместное использование файлов немного отличается от обмена URL-адресами. Например, вы должны позвонить navigator.canShare(). Затем вы можете добавить массив файлов при вызове navigator.share()

if (navigator.canShare && navigator.canShare({ files: fileArr })) {
  navigator.share({
    files: fileArr,
    title: 'My image collection',
    text: 'The vacation at north pole',
  })
  .then(() => console.log('Sharing was successful.'))
  .catch((error) => console.log('Sharing failed', error));
 } else {
  console.log(`Your system doesn't support sharing the given files.`);
 }

Совместное использование цели

Чтобы приложение стало целью общего доступа, оно должно соответствовать некоторым критериям, установленным Chrome. Вы можете обратиться к этой ссылке, чтобы проверить их.

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

1. Принятие основной информации

2. Прием файлов

3. Принятие изменений в заявке

Вы должны использовать целевой API веб-ресурса, чтобы зарегистрироваться в качестве цели. Цель может обмениваться файлами и контентом с другими приложениями.

"share_target": {
  "action": "/?share-target",
  "method": "POST",
  "enctype": "multipart/form-data",
  "params": {
    "files": [
      {
        "name": "file",
        "accept": ["image/*"],
      },
    ],
  },
 },

Однако легче передавать файлы между установленными приложениями. Вы можете делиться несколькими материалами, от URL до файлов.

async function share(title, text, url) {
  try {
    await navigator.share({title, text, url});
    return true;
  } catch (ex) {
    console.error('Share failed', ex);
    return false;
  }
 }

Web Share API - функции и ограничения

Функции

• Используя Web Share, ваше веб-приложение может использовать предоставляемые системой возможности совместного использования, как и приложение для конкретной платформы.
• Разработчики получают более широкий спектр возможностей совместного использования.
• Можно настроить цели и варианты общего доступа на их устройствах. Таким образом, вы можете увеличить скорость загрузки страницы.
• API-интерфейсы Web Share помогают обмениваться текстом, URL-адресами и файлами. Кроме того, Web Share также расширила свои услуги.
• Он доступен для Chrome OS, Chrome в Windows, Safari и Android в форках Chromium.

Ограничения

Однако какой бы хорошей ни была эта услуга, есть и ряд недостатков и ограничений.

• Во-первых, с помощью Web Share можно использовать только сайты, к которым осуществляется доступ через https.
• Другое дело, вы не можете вызвать его с помощью чего-то вроде onload operation. Для этого должно быть какое-то действие пользователя. Например, щелчок пользователя может вызвать его.
• Кроме того, он все еще находится в разработке для Chrome для Mac.

Резюме

Web Share API - это современная функция веб-платформы, которая упрощает обмен контентом в социальных сетях, через SMS и зарегистрированные целевые приложения.

Chrome - один из основных браузеров, поддерживающий API-интерфейс Web Share Target. Кроме того, Safari также поддерживает это.

Однако API-интерфейс Web Share должен запускаться действием пользователя, поскольку он разработан для уменьшения неудобств и злоупотреблений.

Спасибо за чтение. Не стесняйтесь оставлять комментарии ниже и делиться своим опытом.

Учить больше