Push-уведомления всегда были в приоритете у веб-разработчиков. С помощью сервис-воркеров и их поддержки в современных браузерах мы смогли добиться отправки push-уведомлений в веб-браузеры, что делает веб-сайты более мощными по сравнению с мобильными приложениями.
Для отправки Push-уведомления нам понадобится браузер, удобный для сервис-воркеров, https для безопасности (страницы github — хороший вариант для тестирования), хотя мы можем использовать нашу локальную настройку для целей разработки. Если у вас есть общее представление о том, что такое сервис-воркеры и что они могут сделать, мы можем двигаться вперед, если вы еще не знаете, не беспокойтесь! Я бы посоветовал вам прочитать статью Мэтта Гонта о знакомстве с сервис-воркерами.
Начало работы:
У меня есть образец репозитория Push-уведомлений на моем github, чтобы вы могли начать работу.
Во-первых, мы проверим, совместим ли браузер с Service Worker. Для этого просто проверим, есть ли в навигаторе сервис-воркер:
if (‘serviceWorker’ in navigator) {
console.log(‘Service Worker is supported’);
}
else {
console.log(‘Service Worker is not supported’);
}
После успешной проверки мы можем установить сервис-воркер:
this.addEventListener(‘install’, function(event) {
self.skipWaiting();
console.log(‘SW Installed’, event);
});
self.addEventListener(‘activate’, function(event) {
console.log(‘SW Activated’, event);
});
Мы использовали skipWaiting, чтобы новый сервис-воркер мог легко переопределить существующий, если он уже есть, а затем активировать его, но отображая консольное сообщение.
Мы будем использовать консоль разработчика Google для аутентификации, а после активации мы создадим новый проект в консоли разработчика Google и сохраним копию номера проекта и перейдем к панели инструментов, нажмите Используйте Google API и найдите Google Cloud Messaging. Там мы можем Создать учетные данные для Ключ API и выбрать Ключ браузеразатем введите для него имя и создайте его. Запишите сгенерированный ключ API и держите его под рукой.
После того, как консоль разработчика Google будет готова, мы создадим файл манифеста приложения, в котором будет указана информация о вашем приложении, такая как его имя, gcm_sender_id, значки, ориентация… Мы можем связать манифест в индексном файле
<link rel="manifest" href="manifest.json">
В наш файл манифеста мы добавим имя и gcm_sender_id. Нашим gcm_sender_id будет номер проекта, созданный при создании нового проекта в Google Developers Console.
{
"name": "Sample Push Notifications App",
"gcm_sender_id": "1059485227799"
}
Следующим шагом будет попросить пользователя разрешить вам показывать уведомления, и для этого мы обновим код сервисного работника, который мы использовали для проверки присутствия сервисного работника.
if ('serviceWorker' in navigator) {
console.log('Service Worker is supported');
navigator.serviceWorker.register('sw.js').then(function(reg) {
console.log(reg);
reg.pushManager.subscribe({
userVisibleOnly: true
}).then(function(sub) {
console.log('endpoint:', sub.endpoint);
});
}).catch(function(error) {
console.log(error);
});
}
Аргумент userVisibleOnly: true указывает браузеру, что уведомление всегда будет отображаться при получении push-сообщения. Обязательно показать уведомление. Теперь вы сможете увидеть уведомление в браузере с предложением разрешить или заблокировать уведомление.
В вашей консоли вы должны увидеть конечную точку, которая выглядит как
endpoint: https://android.googleapis.com/gcm/send/fVUz58zOPmc:APA91bHSTz5z8QxD_Ym-YLWNQN-tk08H0qceuTBJ88tnBXIzcVBbomq9BPvpxyusHxMIBK6d3lUhz708Dd2gEW-erDZ-Bh8b03eCdWKMGboNoDmNyc4D8oWHwxHMC00s8zkwp8nSpSF1
Мы добавим прослушиватель событий для push-уведомления, чтобы отображать уведомление всякий раз, когда push-уведомление создается.
self.addEventListener('push', function(event) {
console.log('You received a push message', event);
var title = 'Wohoo! You got your Push';
event.waitUntil(
self.registration.showNotification(title, {
body: 'click me to take you to my site',
icon: 'images/icon.png',
})
);
});
Обратите внимание, что push, который мы отправляем, будет консольным сообщением и событием push, обещание waituntil() ожидает, пока обещание showNotification() не будет разрешено.
Теперь мы перейдем к обработке события клика, т. е. когда пользователь нажмет на push-уведомление, что произойдет? Мы создали заголовок, текст и значок для push-уведомления на предыдущем шаге, и в этом случае, когда пользователь нажимает на уведомление, он будет перенаправлен на мой веб-сайт.
self.addEventListener('notificationclick', function(event) {
event.notification.close();
var url = 'http://www.alvimurtaza.com';
event.waitUntil(
clients.matchAll({
type: 'window'
})
.then(function(windowClients) {
if (clients.openWindow) {
return clients.openWindow(url);
}
})
);
});
Теперь у нас есть все настройки для запуска push-уведомления с помощью терминала.
curl --header "Authorization: key=<Your Project API key>" --header Content-Type:"application/json" https://android.googleapis.com/gcm/send -d "{\"registration_ids\":[\"<your endpoint>\"]}"
В поле ‹Ваш ключ API проекта› напишите свой ключ API, который был сгенерирован из Google Cloud Messagingи в‹ваша конечная точка› напишите конечную точку, которая находится в консоли после https://android.googleapis.com/gcm/send/
В моем случае это
curl --header "Authorization: key=<Your Project API key>" --header Content-Type:"application/json" https://android.googleapis.com/gcm/send -d "{\"registration_ids\":[\"fVUz58zOPmc:APA91bHSTz5z8QxD_Ym-YLWNQN-tk08H0qceuTBJ88tnBXIzcVBbomq9BPvpxyusHxMIBK6d3lUhz708Dd2gEW-erDZ-Bh8b03eCdWKMGboNoDmNyc4D8oWHwxHMC00s8zkwp8nSpSF1\"]}"
ОТЛИЧНАЯ РАБОТА! наше приложение push-уведомлений настроено, и мы получили ваш первый толчок.
