Дар дарения
Использование веб-приложений следующего поколения имеет ряд явных преимуществ, одно из которых - использование share-API навигатора. Благодаря постоянно расширяющемуся богатому набору возможностей выбранный вами навигатор теперь может вызывать Web Share API для совместного использования следующих элементов:
- простой текст
- ссылки, указав заголовок
- файлы напрямую
Если браузер пользователя поддерживает новый navigator.share, вы можете использовать эту функцию прямо сейчас!
Демо-время!
Использование функции совместного использования настолько просто, насколько это возможно, вот пример, который фактически используется на сайте:
<Button
className={classes.container}
aria-label={"Share this article"}
onClick={() => {
// '.share' can only by called when
// triggered by click-events to make
// sure it's the user's intention.
navigator.share?.({
title: info.title,
text: info.description,
url: `${getBaseRoute(routes.posts)}/${info.slug.current}`,
}).catch(console.error);
// Optionally virbrate slightly.
navigator.vibrate?.([30, 20, 10]);
}}>
<ShareIcon />
<Typography>{"Share"}</Typography>
</Button>
Как вы можете видеть, этот обратный вызов вызывает асинхронную функцию совместного использования (если возможно) и предоставляет некоторые данные, так что красивый URL + описательный заголовок и подзаголовок могут быть показаны в общем листе. Показанный код используется в несколько другом варианте в конце этой статьи. Если ваш браузер поддерживает совместное использование, соответствующая кнопка будет отображаться в строке «Действия».
Где использовать
На момент написания API в основном можно использовать в мобильных вариантах популярных браузеров (Chrome, Opera, Safari), но только в Safari + Edge для ПК. Поскольку эта функциональность не ограничивается конкретными требованиями к оборудованию, я ожидаю увеличения поддержки в ближайшие месяцы.
И да, это было краткое введение в Web Share API, дополнительную информацию можно найти в связанном файле web.dev, а также в статьях MDN в приложении.
- Tom
