Рубрики
Без рубрики

API уведомлений: Показать уведомления из вашего веб-приложения 🔔

Привет ребят. Уведомления жизненно важно, если вы хотите водить трафик к вашей сети … Теги с JavaScript, WebDev, React, CodeNewie.

Привет ребят. Уведомления жизненно важно, если вы хотите водить трафик в свои веб-приложения. Уведомления могут быть показаны, даже если пользователь не активен на вашем сайте/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 Аргументы Отказ

  1. Название уведомления.
  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”