Борис Ермаченко - Экономим время пользователя с помощью буфера обмена

Ближайшая конференция - HolyJS 2024 Autumn, 7 ноября (online), 14-15 ноября (Санкт-Петербург + трансляция).
Подробности и билеты: jrg.su/K18Cxd
- -
Не так давно в банке решали задачу: предложить пользователю сделать перевод по номеру, если у него в буфере обмена был скопирован номер телефона. Реализовать оказалось сложнее, чем сказать - на пути стоят ограничения в виде разнообразной поддержки браузеров и особенностей платформ.
Помимо описанной задачи есть и другие кейсы, когда мы можем за счет работы с буфером «ускорить» пользователя, так как ему нужно совершать меньше кликов.
В докладе говорим о возможностях и ограничениях работы с буфером обмена на стороне клиента (Clipboard API) и как его можно использовать.
#javascript #frontend

[@NEWESTERS]

На самом деле в Safari возможна запись в буфер обмена из асинхронного источника. Для этого вместо await перед writeText надо передать промис в конструктор ClipboardItem. В таком случае writeText будет вызываться синхронно в обработчике события, но браузер дождётся резолва промиса прежде, чем записывать в буфер.

[@ermachenkoboris]

Похоже первый ответ не показывает из-за ссылки на пример кода. Да, спасибо за дополнение, вот так можно сделать для асинхронной записи в сафари:
```
// внутри обработчика события
const type = 'text/plain';
const blob = new Blob([value], { type });
const cbi = new ClipboardItem({
[type]: new Promise((resolve) => {
setTimeout(() => { resolve(new Blob(['value'], {type})); }, 2000);
})
});
await navigator.clipboard.write([cbi]);
```

[@Zzzzzzzzzzzzzn]

Если разрешить сайту делать .match() к содержимому буфера обмена, это все равно что разрешить ему делать .read() - можно тупо перебором определять каждый символ, понадобится что-то около 6-8 попыток на символ, т.е. даже довольно длинную строку можно будет выцепить сравнительно небольшим числом матчей.

[@ermachenkoboris]

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

[@Zzzzzzzzzzzzzn]

@@ermachenkoboris наверное лучше даже, если был бы механизм однократной регистрации ограниченного числа матчей (до 10 там или около того), по которым сайт сможет получать события о том, что что-то там сматчилось. Возможно через механизм манифестов, как для PWA.