Привет ребят. Уведомления жизненно важно, если вы хотите водить трафик в свои веб-приложения. Уведомления могут быть показаны, даже если пользователь не активен на вашем сайте/WebApp. Независимо от того, создаете ли вы веб-сайт электронной коммерции и хотите показать предложения для своего пользователя или создавать в чате приложения и захотите показать уведомление о новых сообщениях. Многие лучшие веб-приложения, такие как Slack, Facebook, WhatsApp и намного больше, используют те же технологии для отображения уведомлений. Использование API уведомлений гораздо более проще, чем вы думаете.
Введение.
API уведомления позволяет разработчикам отображать уведомления с их веб-сайта или веб-приложения. API уведомлений совместим с существующими системами уведомлений в вашей ОС (Windows, Mac или Linux).
Как использовать уведомления API 💭 💭
Уведомления могут быть инициализированы с использованием класса Уведомление
который доступен во всем мире.
Просить разрешения ⬇️
// asking user to grant the permission on page load // to show notifications window.addEventListener('load', () => { Notification.requestPermission(); // permission cannot be asked again if the user chose // to grant or deny the permission. // once granted or denied, then user have to change the // permission manually. });
Проверка, если пользователь предоставил разрешение ⬇️
console.log(Notification.permission);
Результат вышеуказанной консоли может быть: по умолчанию
: Разрешение еще не задается, уведомления не будут показаны. предоставлено
: Пользователь предоставил разрешение на просмотр уведомлений. отрицал
: Пользователь отклонил разрешение.
Кроме того, вы также можете использовать API разрешений для проверки разрешения. Подробнее об этом здесь.
Показывая уведомления 🔔.
const newMsgNotification = new Notification('A new message', { body: 'You have got a new message, check it out!', icon: 'https://images.unsplash.com/photo-1611605698335-8b1569810432?ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8aWNvbnN8ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60', });
Приведенный выше код показывает уведомление в моем Ubuntu что-то вроде этого 👇.
И именно это так же, что вам нужно знать, чтобы начать, продолжать узнавать больше.
В приведенном выше примере вы видите Уведомление
Класс принимает 2 Аргументы
Отказ
Название
уведомления.Варианты
Объект, в котором вы можете установить настройки для уведомлений.
Взаимодействие с уведомлениями:
Пользователи также могут взаимодействовать с уведомлением (например, Нажмите
в уведомлении). EventListener
Может быть добавлен в экземпляр уведомления.
// navigate the user to you website when // user click on a notification newMsgNotification.addEventListener('click', (e) => { e.preventDefault(); window.open('http://yourwebappurl.com', '_blank'); });
В дополнение к Нажмите
Слушатель, уведомление может слушать еще 3 события: близко
: Уволен, когда уведомление закрыто. Ошибка
: Уволен, когда уведомление не может быть показано по какой-то причине. показывать
: Уволен, когда уведомление в отображении.
Это это для этой статьи, ребята, я надеюсь, что вы нашли это полезным. Если вы сделали, пожалуйста, оставьте подобное и поделитесь статьей.
Это основы API уведомлений, я хотел, чтобы этот пост был коротким и простым. Если вы хотите узнать больше об этом, пожалуйста, оставьте комментарий ниже.
Спасибо за то, что дали ему чтение. ❤️ Следуй за мной на Twitter
Оригинал: “https://dev.to/sidmirza4/notification-api-show-notifications-from-your-web-app-3hkf”