Использование desktop-уведомлений Chrome в коде: гайд

Быстрый ответ

Для того чтобы отобразить уведомление на рабочем столе Chrome, сперва получите разрешение пользователя, а затем уже отправляйте уведомление. Код ниже показывает, как это сделать:

if (Notification.permission === "granted") {
  // Пользователь дал разрешение на уведомления
  new Notification("Вы получили новое сообщение!");
} else if (Notification.permission !== "denied") {
  // Запрашиваем разрешение на отправку уведомлений
  Notification.requestPermission(permission => {
    if (permission === "granted") {
      new Notification("Вы получили новое сообщение!");
    }
  });
}
// Без разрешения пользователя ничего не выйдет, так что просите его тактично!

Этот код следует выполнять в ответ на действие пользователя, например, по клику, ведь Chrome заботится о спокойствии пользователей.

Проверка и запрос разрешения

Перед тем как выполнять действие, убедитесь в наличии разрешения от пользователя. Сохраните его выбор в локальном хранилище, чтобы не беспокоить его повторными запросами.

if (!localStorage.getItem('notification-permitted')) {
  Notification.requestPermission().then(permission => {
    localStorage.setItem('notification-permitted', permission);
  });
}
// Помните, что "нет" означает "нет". Уважайте решение пользователя.

Когда уведомления являются неотъемлемой частью вашего приложения, обеспечьте его привлекательно оформленным дизайном и убедительно объясните пользователям их необходимость.

Использование service workers

Service workers играют ключевую роль в отправке уведомлений на рабочий стол. Они работают в фоне и требуют разрешения пользователя.

Включите service workers в структуру уведомлений, убедившись в поддержке этой технологии в браузере пользователя, и зарегистрируйте service worker:

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}

Чтобы глубже изучить тему уведомлений через Service Worker, обратитесь к документации Google.

Управление уведомлениями – возможности и ограничения

Учитывайте совместимость уведомлений с различными браузерами. Для изучения этого вопроса можете использовать такие сервисы, как caniuse.com.

Создавайте привлекательные уведомления с помощью заголовков, текстов, иконок и обработчиков событий. Вам в этом поможет библиотека notify.js, поддерживающая старые версии браузеров.

new Notification('Важная новость', {
  body: 'Крайний срок подписки истекает!',
  icon: '/path/to/icon.png',
  onclick: function(event) {
    window.open('https://example.com');
  }
});

Визуализация

Уведомления для рабочего стола Chrome можно представить как объявления городского глашатая:

Цифровой городок:
- 🏘️ Дома (Пользователи)
- 🏢 Офисы (Веб-сайты)
- 📣 Глашатай (Уведомления)

Глашатай объявляет новость:

new Notification('📣 Всем внимание!', {
  body: 'Ждем вас на городской площади за новыми приключениями 🏢!',
  icon: '🏰'
});
// Использование эмодзи делает общение с пользователями легким и веселым!

Жители городка реагируют на объявление:

🏘️: *открывают окна* "Новые приключения, говорите? Интересно! 🏰"

И жизнь в городке оживает:

До: 🏘️🏘️🏘️ *Все занимались своими делами*
После: 🏘️📣🏘️ *Все готовы к новым открытиям*

API Уведомлений – исследуем возможности

Локализуйте запросы на разрешение, чтобы пользователи легко понимали их. Имейте в виду, что API уведомлений постоянно улучшается, как, например, в Chrome 62, который запретил запросы из кросс-доменных iframe.

if ('Notification' in window) {
  // Современный подход
} else if ('webkitNotifications' in window) {
  // Немного старой школы, но все еще работает!
}
// Вы должны быть готовы ко всему, как хамелеон на дискотеке!

Спецификация API Уведомлений поможет вам оставаться в курсе последних обновлений стандарта.

Обеспечиваем максимальное распространение – кросс-браузерная поддержка

Чтобы уведомления были доступны пользователям разных браузеров, поддерживайте ваше приложение в актуальном состоянии. Библиотека notify.js поможет и с поддержкой старых версий браузеров, включая Internet Explorer и Microsoft Edge.

// Универсальный подход к созданию уведомлений для разных браузеров
function createNotification(title, options) {
  if (window.Notification) {
    return new Notification(title, options);
  } else if (window.webkitNotifications) {
    return window.webkitNotifications.createNotification(
      options.icon,
      title,
      options.body
    );
  } else {
    // Здесь мы предоставим альтернативные решения
  }
}

Полезные материалы

1. Использование API Уведомлений – Веб API | MDN — Подробное руководство по работе с API уведомлений.
2. Мы информируем вас об изменениях в уведомлениях | Chrome Developers — Описание развития и изменений в API уведомлений Chrome.
3. Примеры уведомлений для рабочего стола в браузере Chrome – Stack Overflow — Примеры и обсуждение уведомлений для Chrome.
4. Стандарт API Уведомлений — Официальная документация по API уведомлений.
5. API Веб-уведомлений — Пошаговое руководство по созданию системных уведомлений в браузерах.
6. Can I use... Справочная информация о поддержке HTML5, CSS3 и др. — Инструмент для проверки поддержки API уведомлений в различных браузерах.