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

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

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

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

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

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

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

   Notification permission is default
   

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

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

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

Теперь давайте посмотрим на код примера приложения. Откройте 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. В интерфейсе приложения нажмите «Запросить разрешение на отправку уведомлений» . Появится всплывающее окно.

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

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

• 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. Нажмите на значок замка рядом с адресной строкой 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'
    },],
  */
}

Еще больше идей можно найти в генераторе уведомлений Питера Беверлоо !

Для дальнейшего изучения взгляните на следующую лабораторную работу в этой серии: Обработка уведомлений с помощью Service Worker !