Первоначально опубликовано в моем личном блоге — PeteScript
Важнейшей частью функциональности любого веб-приложения является предоставление пользователю возможности поделиться ею — будь то блог, публикация в социальных сетях или новостная статья.
Использование социальных сетей жизненно важно как для распространения информации, так и для успеха в бизнесе.
Недавно перестроив свой личный блог, я подумал, что было бы здорово поделиться тем, как легко создать небольшой компонент, который использует API браузера, чтобы обеспечить функциональность общего доступа с родным интерфейсом, независимо от того, работает ли пользователь на iOS или Android. .
🛠 Что будем строить
Простой компонент общего доступа для Интернета, но с родным интерфейсом. Он открывает множество дополнительных каналов, которыми пользователь уже делится и с которыми взаимодействует, например. Твиттер, Ватсап. Это невероятно мощно и естественно для пользователя, поскольку об этом позаботится их собственная ОС! Довольно мило, правда?
Мой блог основан на шаблоне Gatsby Starter Blog, поэтому он построен с использованием React — поэтому примеры, которые вы видите ниже, будут в некоторой степени специфичны для React, но сама функциональность веб-поделиться — это просто ванильный JavaScript, поэтому, если вы не совсем знакомы с React — не волнуйтесь!
Давайте погрузимся в некоторые короткие фрагменты кода.
📲 Определить тип клиента
Поскольку API Web Share в основном реализуется только мобильными браузерами, мы хотим отображать компонент только в том случае, если клиентом является мобильное устройство или планшет.
Для этого я создал быстрый пользовательский хук, который проверяет User Agent клиента и возвращает логическое значение, которое мы можем использовать:
const useMobileDevice = () => {
const [isMobileOrTablet, setIsMobileOrTablet] = useState(false);
useEffect(() => {
setIsMobileOrTablet(isMobileOrTabletDevice());
});
return [isMobileOrTablet];
};Я нашел общую реализацию RegEx в верхнем ответе StackOverflow, которую для простоты я выделил в отдельную функцию (isTabletOrMobileDevice()).
💅 Стиль это
Распространенным шаблоном пользовательского интерфейса для основного призыва к действию в блогах является наличие плавающего значка в представлении, где пользователь может легко получить к нему доступ. Поскольку мы ориентируемся конкретно на мобильные устройства, мы должны позволить компоненту находиться в правом нижнем углу экрана — это зона высокой активности мобильного устройства, доступ к которой можно легко получить большим пальцем пользователя.
Мы хотим создать это как отдельный компонент, который может содержать эту функциональность и легко импортировать на страницы:
import React from 'react';const MobileShare = () => { const handleOnClick = () => { // TODO: Placeholder to implement web share API };return ( <div className='share-icon' onClick={handleOnClick}> <ShareIcon /> </div> ); };export default MobileShare;
В приведенном выше фрагменте наш ShareIcon — это просто SVG типичного значка общего доступа.
Чтобы применить к нему плавающий эффект, нам нужно применить позиционирование fixed к этому элементу в нашем CSS:
.share-icon {
position: fixed;
bottom: 25px;
right: 25px;
cursor: pointer;
height: 40px;
width: 40px;
border-radius: 50%;
padding: 5px;
background-color: rgb(43, 135, 255);
-webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75);
}Первая часть CSS связана с позиционированием компонента, вторая часть — это просто некоторый пользовательский стиль, который я хотел для своего блога.
💡 Подключение общего API
Последняя часть головоломки — интегрировать наш обработчик onClick с API веб-ресурса. Поскольку он находится в интерфейсе navigator, мы хотим вызвать для него функцию share и передать некоторые пользовательские параметры, относящиеся к конкретному сообщению в блоге.
Мы можем вызвать эту функциональность, реализуя следующее как нашу функцию handleOnClick, определенную выше:
const handleOnClick = () => {
if (navigator.share) {
navigator
.share({
title: `${postTitle} | ${siteTitle}`,
text: `Check out ${postTitle} on ${siteTitle}`,
url: document.location.href,
})
.then(() => {
console.log('Successfully shared');
})
.catch(error => {
console.error('Something went wrong sharing the blog', error);
});
}
};Как видите, мы хотим убедиться, что функция navigator.share доступна на клиенте, который в данный момент использует сайт. Причина такого защитного подхода связана с реализацией API в браузере, о которой я упоминал выше.
Если она доступна, мы вызываем функцию и передаем объект с некоторыми значениями — они представляют свойства, которые клиент может отображать в качестве предварительного просмотра при вызове функции.
Согласно документации MDN, есть три свойства, которые можно передать как часть объекта конфигурации:
Объект, содержащий данные для совместного использования. Необходимо указать хотя бы одно из следующих полей.
Необходимо указать хотя бы одно из этих полей: title, text или URL. Вы можете видеть в приведенном выше фрагменте, что я пропускаю все три, поскольку это обеспечивает самый богатый опыт при обмене. Различные ОС и устройства будут использовать эти свойства немного по-разному, поэтому для моего варианта использования блога я подумал, что лучше предоставить как можно больше подробностей!
Сама функция share() является асинхронной функцией, поэтому мы можем подключиться к разрешенному обратному вызову, зная, что он завершен — на случай, если вы захотите выполнить какие-либо дополнительные функции, например, представить небольшое уведомление, подтверждающее пользователю, что статья была опубликована. . Для меня я просто выхожу из системы, что он успешно поделился - возможно, я реализую небольшой тост в будущем 😃
API также предоставляет возможность обмениваться файлами, что довольно просто и хорошо задокументировано в документах MDN выше.
🤔 Курики и раздражители
Из-за характера API и браузеров, реализующих его по-разному, на разных устройствах и браузерах будут различия. Например, в iOS я заметил, что свойство text имеет приоритет для маленького значка, который отображается в собственном виджете общего доступа, а не для значка моего блога.
Ничего страшного, но я заметил небольшое раздражение при его создании!
💫 Резюме
Супер простой, новый браузерный API для взаимодействия, который открывает возможности обмена для мобильного Интернета, но с родным интерфейсом.
Было невероятно легко подключиться, и с помощью нескольких строк кода мы запустили его!
Я определенно рекомендую подключить что-то подобное к вашему личному веб-сайту, так как это может придать ему ощущение повышения уровня и упростить пользователям обмен вашими статьями!
Если вы используете мобильное устройство, вы должны увидеть значок «Поделиться» в правом нижнем углу, пока читаете это, так почему бы вам не попробовать и не посмотреть, как это работает? 😉
Вы можете проверить быструю интеграцию, которую я собрал для своего блога на GitHub.
