Давайте познакомимся с «API, которые должен знать любой фронтендер».
Во всяком случае так их подают рерайтеры для всяких пабликов. Как не ленивый программист я решил их проверить и поделиться с вами результатами. Как вступление, могу еще сказать, что в браузерах скрыто очень много возможностей, о части которых мы и поговорим. Напоминаю, что API - это просто готовые команды, при помощи которых мы можем что-то сделать.
Ссылки на поддержку каждого давать не буду, просто вбивайте название вот тут: https://caniuse.com/
1. Эту апишку (я буду называть их так, уж простите, так повелось) я поставлю на первое место, так как она действительно важна и часто используется. Каждый из вас видел интерфейс, когда мы просто кликаем на элемент и в наш буфер обмена копируется какое-то содержимое. Или мы сами что-то копируем, а сайт/приложение достает эти данные и куда-то помещает. За это отвечает Clipboard API. Важная штука аж с 97% поддержки.
Она позволяет копировать, вставлять или вырезать, прямо как комбинации клавиш 🙂
Официально с ней можно познакомится вот тут: https://developer.mozilla.org/ru/docs/Web/API/Clipboard_API
Главное помнить, что она асинхронна.
2. Есть такая штука, как PWA. Эти «прогрессивные» веб-приложения позволяют вам частично работать с ними даже в оффлайн режиме. А для определения, находится ли в сети это устройство, можно использовать апишку под свойством navigator.onLine. Все просто: если онлайн - отдает true, нет - false. Тут поддержка вообще бешеных 98,4%
Официально тут: https://developer.mozilla.org/ru/docs/Web/API/NavigatorOnLine/onLine
3. Ваш браузер может неплохо так следить за вами, но вы и сами это знаете 🙂 Следующие три возможности это подтверждают.
navigator.connection позволяет вам получить информацию о системном подключении устройства: тип подключения, скорость и тд. Но все забывают упомянуть, что поддержка у него еще хреновее некуда, так как «экспериментальная» фича.
Информацию проще найти в интернете, так как на mdn её очень мало.
Лично у меня получилось вытащить очень мало данных и то бесполезных.
4. Геолокация. Это как раз та штука, которая выскакивает с вопросом, можно ли сайту отслеживать вашу позицию.
Используется как navigator.geolocation и поддерживается везде. Штука крутая, можно получить точные координаты пользователя. Их, в свою очередь, можно использовать для отображения чего-то на карте или просто узнать страну/регион пользователя. Как вы понимаете, отсюда идут запреты, языки веб-продуктов и тому подобное. Осторожно - асинхронно!
https://developer.mozilla.org/ru/docs/Web/API/Navigator/geolocation
5. Хотите узнать состояние заряда батареи пользователи? И это можно. Только не ведитесь на navigator.battery, так как оно устарело! Вместо этого используйте navigator.getBattery();
Тут стоит помнить, что это асинхронная операция. Вы делаете запрос на устройство с страстным желанием получить информацию, а оно может ответить не моментально.
Пример тут: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getBattery
Можно использовать для уведомления пользователя, если он забывает зарядить устройство на 2-3%х. Так он продолжит серфить в вашем продукте, особенно в веб-игрухах.
6. По названию Fullscreen API сразу можно понять что оно делает 🙂 Любой элемент (исключений не видел, но хз) можно развернуть во весь экран.
Описание и примеры тут: https://developer.mozilla.org/ru/docs/Web/API/Fullscreen_API
Но вещь действительно полезная. Карты, игры, канвас-поля, видосики и другие ваши идеи можно зафулскринить)
7. Если ваше устройство поддерживает вибрацию - то через браузер можно заставить его вибрировать. В теории.
За это отвечает window.navigator.vibrate(pattern); Использование очень простое, но у меня не получилось его воспроизвести ни на одном девайсе. Хотя по поддержке должно. Полезная штука для привлечения внимания, если бы работала 😁
Подробнее тут: https://developer.mozilla.org/ru/docs/Web/API/Navigator/vibrate
Во всяком случае так их подают рерайтеры для всяких пабликов. Как не ленивый программист я решил их проверить и поделиться с вами результатами. Как вступление, могу еще сказать, что в браузерах скрыто очень много возможностей, о части которых мы и поговорим. Напоминаю, что API - это просто готовые команды, при помощи которых мы можем что-то сделать.
Ссылки на поддержку каждого давать не буду, просто вбивайте название вот тут: https://caniuse.com/
1. Эту апишку (я буду называть их так, уж простите, так повелось) я поставлю на первое место, так как она действительно важна и часто используется. Каждый из вас видел интерфейс, когда мы просто кликаем на элемент и в наш буфер обмена копируется какое-то содержимое. Или мы сами что-то копируем, а сайт/приложение достает эти данные и куда-то помещает. За это отвечает Clipboard API. Важная штука аж с 97% поддержки.
Она позволяет копировать, вставлять или вырезать, прямо как комбинации клавиш 🙂
Официально с ней можно познакомится вот тут: https://developer.mozilla.org/ru/docs/Web/API/Clipboard_API
Главное помнить, что она асинхронна.
2. Есть такая штука, как PWA. Эти «прогрессивные» веб-приложения позволяют вам частично работать с ними даже в оффлайн режиме. А для определения, находится ли в сети это устройство, можно использовать апишку под свойством navigator.onLine. Все просто: если онлайн - отдает true, нет - false. Тут поддержка вообще бешеных 98,4%
Официально тут: https://developer.mozilla.org/ru/docs/Web/API/NavigatorOnLine/onLine
3. Ваш браузер может неплохо так следить за вами, но вы и сами это знаете 🙂 Следующие три возможности это подтверждают.
navigator.connection позволяет вам получить информацию о системном подключении устройства: тип подключения, скорость и тд. Но все забывают упомянуть, что поддержка у него еще хреновее некуда, так как «экспериментальная» фича.
Информацию проще найти в интернете, так как на mdn её очень мало.
Лично у меня получилось вытащить очень мало данных и то бесполезных.
4. Геолокация. Это как раз та штука, которая выскакивает с вопросом, можно ли сайту отслеживать вашу позицию.
Используется как navigator.geolocation и поддерживается везде. Штука крутая, можно получить точные координаты пользователя. Их, в свою очередь, можно использовать для отображения чего-то на карте или просто узнать страну/регион пользователя. Как вы понимаете, отсюда идут запреты, языки веб-продуктов и тому подобное. Осторожно - асинхронно!
https://developer.mozilla.org/ru/docs/Web/API/Navigator/geolocation
5. Хотите узнать состояние заряда батареи пользователи? И это можно. Только не ведитесь на navigator.battery, так как оно устарело! Вместо этого используйте navigator.getBattery();
Тут стоит помнить, что это асинхронная операция. Вы делаете запрос на устройство с страстным желанием получить информацию, а оно может ответить не моментально.
Пример тут: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getBattery
Можно использовать для уведомления пользователя, если он забывает зарядить устройство на 2-3%х. Так он продолжит серфить в вашем продукте, особенно в веб-игрухах.
6. По названию Fullscreen API сразу можно понять что оно делает 🙂 Любой элемент (исключений не видел, но хз) можно развернуть во весь экран.
Описание и примеры тут: https://developer.mozilla.org/ru/docs/Web/API/Fullscreen_API
Но вещь действительно полезная. Карты, игры, канвас-поля, видосики и другие ваши идеи можно зафулскринить)
7. Если ваше устройство поддерживает вибрацию - то через браузер можно заставить его вибрировать. В теории.
За это отвечает window.navigator.vibrate(pattern); Использование очень простое, но у меня не получилось его воспроизвести ни на одном девайсе. Хотя по поддержке должно. Полезная штука для привлечения внимания, если бы работала 😁
Подробнее тут: https://developer.mozilla.org/ru/docs/Web/API/Navigator/vibrate