Service-Worker addEventListener, как использовать параметр события?

Сейчас я пытаюсь заставить Push-уведомления работать с Node.js.

Для этого я следовал некоторым учебным пособиям и документам, которые я мог найти в сети, и у меня наконец-то есть что-то работающее с использованием того, что называется Service Workers.

На данный момент я совсем не знаком с push-уведомлениями на Node.js и Service Workers.

Вот мой соответствующий код:

.....
console.log("Registering ServiceWorker.");
const register = await navigator.serviceWorker.register('/worker.js', {
    scope: "/"
});
console.log('ServiceWorker registered.');

console.log("Registering Push.");
const subscription = await register.pushManager.subscribe({
    userVisibleOnly: true,
    applicationServerKey: urlBase64ToUint8Array(publicVapIdKey)
});
console.log('Push registered.');

console.log("Sending Push.");
await fetch('/subscribe', {
    method: 'POST',
    body: JSON.stringify(subscription),
    headers: {
        'content-type': 'application/json'
    }

});
console.log('Push sent.');
.....

и работник службы:

console.log('Service Worker Loaded.');

self.addEventListener('push', e => {
    const data = e.data.json;
    console.log('Push Received');
    self.registration.showNotification(data.title, {
        body: 'It is time to go for lunch.',
        icon: 'MyLogo.png'
    })
});

А также это внутри моего файла index.js:

// Subscribe Route.
app.post('/subscribe',(req,res) => {
    const subscription = req.body; // Get Push Subscription Object.
    res.status(201).json({}); // Sen 201. Resource created.
    // Create PayLoad.
    const payload = JSON.stringify({title:'This is a payload-title'});
    // Pass Object to sendNotification.
    webPush.sendNotification(subscription,payload).catch(err => console.error(err));
});

Вопрос, который я хочу задать, касается использования второго параметра addEventListener. Это параметр события. Мне кажется, что этот параметр должен быть очень важен для передачи информации в Service Worker, но в моем примере он совершенно бесполезен и я не знаю, как его использовать.

Когда я запускаю этот пример в FireFox или Chrome, я вижу такое уведомление:

введите здесь описание изображения

На скриншоте видно «undefined». Это то, что исходит из data.title (из параметра e). Как мне изменить код, чтобы увидеть что-то еще, кроме «неопределенного»? Я хочу иметь возможность внести изменения вне этого блока, конечно:

self.addEventListener('push', e => {...})

Я уже пытался установить какое-то поле «заголовок», где, как я думал, может быть решение, но ничего не сработало. Я явно что-то не так делаю.

Другими словами, в более общем смысле; то, что я хочу знать, это «Как использовать параметр события addEventListener». Даже очень простой пример (как изменить мой код для этого) был бы очень признателен.


person Michel    schedule 23.05.2018    source источник


Ответы (1)


Согласно спецификациям Push API, e.data является экземпляром PushMessageData. Подробнее об интерфейсе см. здесь. Ваш код должен быть:

self.addEventListener('push', function(e) {
    let data = {};

    if (e.data) {
        // IMPORTANT:
        // The following line does not use "e.data.json",
        // but "e.data.json()" !!!!!
        data = e.data.json();
    }

    self.registration.showNotification(data.title, {
        body: 'It is time to go for lunch.',
        icon: 'MyLogo.png'
    })
});
person kkkkkkk    schedule 23.05.2018
comment
Итак, если (например) я хочу, чтобы My Title отображался вместо undefined. Как мне изменить код? Изменить поле под названием любое, я полагаю? - person Michel; 23.05.2018
comment
Приведенный выше код будет работать, если push-сообщение с сервера содержит свойство title. - person kkkkkkk; 23.05.2018
comment
Теперь не работает, выводит только undefined. И все, что я пробовал, может отображать только undefined. Так что это на самом деле не работает. Моя проблема (я полагаю) в том, что я не знаю, как правильно установить свойство title. - person Michel; 23.05.2018
comment
Тогда это ваша служба Push API, вам нужно включить title в push-сообщение. - person kkkkkkk; 23.05.2018
comment
Вопрос именно в том, что вы описываете: как вы это делаете? - person Michel; 23.05.2018
comment
Опубликуйте свой код сервера Push API, без него я не знаю, что вам не хватает - person kkkkkkk; 23.05.2018
comment
Разве это уже не в моем посте, в первом блоке кода (console.log(Sending Push.);....)? Если мне нужно отправить больше кода, пожалуйста, дайте мне знать, что. - person Michel; 23.05.2018
comment
Это ваш код работника службы, а не код сервера, который отправляет уведомление клиенту (работнику службы). Или вы используете службу Push API? - person kkkkkkk; 23.05.2018
comment
В основном я следовал руководству здесь youtube.com/watch?v=HlYFW2zaYQM. Я не уверен, что вы имеете в виду в отношении отсутствующего кода. У меня также есть файлы index.js и package.json, которые я не опубликовал. Но я полагаю, что это было бы не очень полезно. - person Michel; 23.05.2018
comment
Я только что добавил в пост фрагмент кода из моего файла index.js. Надеюсь, это будет полезно. - person Michel; 23.05.2018
comment
Код сервера выглядит нормально. Вы уверены, что используете e.data.json() для получения данных? - person kkkkkkk; 23.05.2018
comment
Хорошо! Вы нашли проблему. Действительно (как вы можете видеть в опубликованном коде) я использовал e.data.json вместо e.data.json(). И когда я меняю его, это работает, и я вижу заголовок, который я установил. Большое спасибо. Если бы это был ответ, а не комментарий, я бы принял его! - person Michel; 24.05.2018
comment
Поскольку эта деталь уже содержалась в ответе, который вы дали выше (я просто не заметил). Я пошел отредактировать ваш ответ с комментарием, чтобы люди не пропустили его, и я принял ответ. - person Michel; 24.05.2018