В этой лаборатории кода вы будете использовать основные функции Notifications API , чтобы:
- Запросить разрешение на отправку уведомлений
- Отправлять уведомления
- Поэкспериментируйте с вариантами уведомлений
Сделайте ремикс примера приложения и просмотрите его на новой вкладке.
Уведомления автоматически блокируются из встроенного приложения Glitch, поэтому вы не сможете просмотреть приложение на этой странице. Вместо этого вот что делать:
- Нажмите Remix to Edit , чтобы сделать проект доступным для редактирования.
- Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .
Глюк должен открыться в новой вкладке Chrome:
Работая над этой лабораторией кода, вносите изменения в код встроенного Glitch на этой странице. Обновите новую вкладку с вашим действующим приложением, чтобы увидеть изменения.
Ознакомьтесь со стартовым приложением и его кодом.
Начните с проверки живого приложения на новой вкладке Chrome:
Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools. Откройте вкладку Консоль .
В консоли вы должны увидеть следующее сообщение:
Notification permission is default
Если вы не знаете, что это значит, не волнуйтесь; скоро все станет известно!
Нажмите кнопки в живом приложении: «Запросить разрешение на отправку уведомлений» и « Отправить уведомление» .
Консоль печатает сообщения «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()
для запуска всплывающего окна, которое просит пользователя разрешить или заблокировать уведомления с вашего сайта.
Замените заглушку функции
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); }); }
Перезагрузите вкладку Chrome, на которой вы просматриваете свое действующее приложение.
В интерфейсе живого приложения нажмите «Запросить разрешение на отправку уведомлений» . Появится всплывающее окно.
Пользователь может сделать один из трех ответов на всплывающее окно разрешения.
Ответ пользователя | Состояние разрешения на уведомление |
---|---|
Пользователь выбирает Разрешить | 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
, ваше уведомление будет отображено.
Замените заглушку функции
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 по параметрам уведомлений .Обновите вкладку 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);
};
}
Чтобы обнаружить ошибку разрешения на уведомление:
Нажмите значок замка рядом с строкой URL-адреса Chrome и сбросьте настройки разрешения уведомлений сайта на значения по умолчанию.
Нажмите «Запросить разрешение на отправку уведомлений» и на этот раз во всплывающем окне выберите «Блокировать» .
Нажмите « Отправить уведомление» и посмотрите, что произойдет. Текст ошибки (
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.
Взгляните на следующую кодовую работу из этой серии — «Обработка уведомлений с помощью сервис-воркера» , чтобы изучить ее дальше!