Начало работы с API уведомлений

В этой лаборатории кода вы будете использовать основные функции Notifications API , чтобы:

  • Запросить разрешение на отправку уведомлений
  • Отправлять уведомления
  • Поэкспериментируйте с вариантами уведомлений

Поддержка браузера

  • 20
  • 14
  • 22
  • 7

Источник

Сделайте ремикс примера приложения и просмотрите его на новой вкладке.

Уведомления автоматически блокируются из встроенного приложения Glitch, поэтому вы не сможете просмотреть приложение на этой странице. Вместо этого вот что делать:

  1. Нажмите Remix to Edit , чтобы сделать проект доступным для редактирования.
  2. Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим полноэкранный .

Глюк должен открыться в новой вкладке Chrome:

Снимок экрана, показывающий обновленное живое приложение на новой вкладке.

Работая над этой лабораторией кода, вносите изменения в код встроенного Glitch на этой странице. Обновите новую вкладку с вашим действующим приложением, чтобы увидеть изменения.

Ознакомьтесь со стартовым приложением и его кодом.

Начните с проверки живого приложения на новой вкладке Chrome:

  1. Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools. Откройте вкладку Консоль .

    В консоли вы должны увидеть следующее сообщение:

    Notification permission is default

    Если вы не знаете, что это значит, не волнуйтесь; скоро все станет известно!

  2. Нажмите кнопки в живом приложении: «Запросить разрешение на отправку уведомлений» и «Отправить уведомление» .

    Консоль печатает сообщения «TODO» из нескольких заглушек функций: requestPermission и sendNotification . Это функции, которые вы реализуете в этой лаборатории кода.

Теперь давайте посмотрим на пример кода приложения во встроенном Glitch на этой странице. Откройте public/index.js и взгляните на некоторые важные части существующего кода:

  • Функция showPermission использует API уведомлений, чтобы получить текущее состояние разрешений сайта и записать его на консоль:

    // Print current permission state to console;
// update onscreen message.
function showPermission() {
  let permission = Notification.permission;
  console.log('Notification permission is ' + permission);
  let p = document.getElementById('permission');
  p.textContent = 'Notification permission is ' + permission;
}

    Перед запросом разрешения состояние разрешения — default . В состоянии разрешений default сайт должен запросить и получить разрешение, прежде чем он сможет отправлять уведомления.

  • Функция requestPermission представляет собой заглушку:

    // Use the Notification API to request permission to send notifications.
function requestPermission() {
  console.log('TODO: Implement requestPermission()');
}

    Эту функцию вы реализуете на следующем шаге.

  • Функция sendNotification представляет собой заглушку:

    // Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  console.log('TODO: Implement sendNotification()');
}

    Вы реализуете эту функцию после реализации requestPermission .

  • Прослушиватель событий window.onload вызывает функцию showPermission при загрузке страницы, отображая текущее состояние разрешений в консоли и на странице:

    window.onload = () => { showPermission(); };

Запросить разрешение на отправку уведомлений

На этом этапе вы добавите функцию запроса разрешения пользователя на отправку уведомлений.

Вы будете использовать метод Notification.requestPermission() для запуска всплывающего окна, которое просит пользователя разрешить или заблокировать уведомления с вашего сайта.

  1. Замените заглушку функции requestPermission в public/index.js следующим кодом:

    // Use the Notification API to request permission to send notifications.
function requestPermission() {
  Notification.requestPermission()
    .then((permission) => {
      console.log('Promise resolved: ' + permission);
      showPermission();
    })
    .catch((error) => {
      console.log('Promise was rejected');
      console.log(error);
    });
}

  2. Перезагрузите вкладку Chrome, на которой вы просматриваете свое действующее приложение.

  3. В интерфейсе живого приложения нажмите «Запросить разрешение на отправку уведомлений» . Появится всплывающее окно.

Пользователь может сделать один из трех ответов на всплывающее окно разрешения.

Ответ пользователя Состояние разрешения на уведомление
Пользователь выбирает Разрешить granted
Пользователь выбирает Блокировать denied
Пользователь закрывает всплывающее окно, не сделав выбора default

Если пользователь нажимает Разрешить:

  • Notification.permission имеет значение granted .

  • Сайт сможет отображать уведомления.

  • Последующие вызовы Notification.requestPermission будут granted без всплывающего окна.

Если пользователь нажимает «Заблокировать»:

  • Notification.permission установлено значение denied .

  • Сайт не сможет отображать уведомления пользователю.

  • Последующие вызовы Notification.requestPermission будут denied без всплывающего окна.

Если пользователь закрывает всплывающее окно:

  • Notification.permission остается default .

  • Сайт не сможет отображать уведомления пользователю.

  • Последующие вызовы Notification.requestPermission создадут больше всплывающих окон.

    Однако, если пользователь продолжает закрывать всплывающие окна, браузер может заблокировать сайт, установив для Notification.permission значение denied . Ни всплывающие окна с запросом разрешения, ни уведомления не могут быть отображены пользователю.

    На момент написания статьи поведение браузера в ответ на всплывающие окна с разрешениями на отклонение уведомлений все еще может быть изменено. Лучший способ справиться с этим — всегда запрашивать разрешение на уведомление в ответ на какое-либо взаимодействие, инициированное пользователем, чтобы они этого ожидали и знали, что происходит.

Отправить уведомление

На этом этапе вы отправите пользователю уведомление.

Вы будете использовать конструктор Notification , чтобы создать новое уведомление и попытаться отобразить его. Если состояние разрешения granted , ваше уведомление будет отображено.

  1. Замените заглушку функции sendNotification в index.js следующим кодом:

    // Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  let title = 'Test';
  let options = {
    body: 'Test body',
    // Other options can go here
  };
  console.log('Creating new notification');
  let notification = new Notification(title, options);
}

    Конструктор Notification принимает два параметра: title и options . options — это объект со свойствами, представляющими визуальные настройки и данные, которые вы можете включить в уведомление. Дополнительную информацию см . в документации MDN по параметрам уведомлений .

  2. Обновите вкладку Chrome, на которой вы просматриваете свое действующее приложение, и нажмите кнопку «Отправить уведомление» . Должно появиться уведомление с текстом Test body .

Что произойдет, если вы отправите уведомления без разрешения?

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

  • В public/index.js в конце функции sendNotification определите обработчик события onerror нового уведомления:
// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
  let title = 'Test';
  let options = {
    body: 'Test body',
    // Other options can go here
  };
  console.log('Creating new notification');
  let notification = new Notification(title, options);
  notification.onerror = (event) => {
    console.log('Could not send notification');
    console.log(event);
  };
}

Чтобы обнаружить ошибку разрешения на уведомление:

  1. Нажмите значок замка рядом с строкой URL-адреса Chrome и сбросьте настройки разрешения уведомлений сайта на значения по умолчанию.

  2. Нажмите «Запросить разрешение на отправку уведомлений» и на этот раз во всплывающем окне выберите «Блокировать» .

  3. Нажмите «Отправить уведомление» и посмотрите, что произойдет. Текст ошибки ( Could not send notification ) и объект события записываются в консоль.

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

Поэкспериментируйте с вариантами уведомлений

Теперь вы рассмотрели основы того, как запрашивать разрешение и отправлять уведомления. Вы также видели, какое влияние ответы пользователей оказывают на возможность вашего приложения отображать уведомления.

Теперь вы можете поэкспериментировать со множеством визуальных параметров и параметров данных, доступных при создании уведомления. Полный набор доступных опций приведен ниже. (Дополнительную информацию об этих опциях см. в документации по уведомлениям на MDN .)

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

let options = {
  dir: 'auto',              // Text direction
  lang: 'en-US',            // A language tag
  badge: '/orange-cat.png', // Display when insufficient room
  body: 'Hello World',      // Body text
  tag: 'mytag',             // Tag for categorization
  icon: '/line-cat.png',    // To display in the notification
  image: '/orange-cat.png', // To display in the notification
  data: {                   // Arbitrary data; any data type
    cheese: 'I like cheese',
    pizza: 'Excellent cheese delivery mechanism',
    arbitrary: {
      faveNumber: 42,
      myBool: true
    }},
  vibrate: [200, 100, 200], // Vibration pattern for hardware
  renotify: false,          // Notify if replaced? Default false
  requireInteraction: false,// Active until click? Default false
  /*
    actions:   // Array of NotificationActions
               // Only usable with a service worker
    [{
      action: 'shop',
      title: 'Shop!',
      icon: '/bags.png'
    },],
  */
}

См. еще несколько идей в «Генераторе уведомлений Питера Беверлоо» !

Если вы застряли, вот готовый код для этой лаборатории: glitch.com/edit/#!/codelab-notifications-get-started-completed .

Взгляните на следующую кодовую работу из этой серии — «Обработка уведомлений с помощью сервис-воркера» , чтобы изучить ее дальше!