webpush.sendNotification - NotificationEvent.notification.data null - node.js

Question

Setup
Operating System: Linux
Node Version: 10.15.3
web-push Version: 3.3.4
[X] Chrome
[ ] Firefox
[ ] Opera for Android
[ ] Samsung Internet Browser
[ ] Other
Chrome: Version 74.0.3729.131 (Official Build) (64-bit)
Problem
I am trying to implement example step 5.2 from google pwa lab
If I push a notification from my node/main.js script I am getting the visual notification on my screen. If I click the notification I can observe from the console the following message:
Uncaught TypeError: Cannot read property 'primaryKey' of null
at sw.js:30
If I check the content of the NotificationEvent.notification.data object it is null.
Expected
If I click the notification sent from my node server I should be able to see the data from the NotificationEvent.notification object.
Features Used
[x] VAPID Support
[ ] GCM API Key
[x] Sending with Payload
Example / Reproduce Case
This is my node/main.js that is in charge of the web push notifications.
const webPush = require('web-push');
const pushSubscription = {
endpoint: 'https://fcm.googleapis.com/fcm/send/flcWNQgYeVw:APA91bHgAC5M-WeyN5RNdSprIDUalAxSMznny3-QwPf2T8whtWwmtZ6Q546Pry-JCZqjSh9bbEIS778lJD7Hq-t4KLS35X6-T7dJGCnc_ECzKvsdOAQ50wlzQ5Tcm1WNvgOOwXV',
expirationTime: null,
keys: {
p256dh: 'BL-Rz9Nejsd7ipsYQsQ9YB6tUc-qldkBg28y7G9LBFGdKe52sSeF0FStiKmdBp5BRFf3HazlOICBAVnY',
auth: 'hOPxUEqXsdfFjB-MmFxaTw'
}
};
// TODO 4.3a - include VAPID keys
const vapidPublicKey = 'MY VAPID PUBLIC KEY';
const vapidPrivateKey = 'MY VAPID PRIVATE KEY';
const payload = 'Here is a payload!';
const options = {
//gcmAPIKey: 'NOT IN USE',
TTL: 60,
vapidDetails: {
subject: 'mailto: myemail#gmail.com',
publicKey: vapidPublicKey,
privateKey: vapidPrivateKey
},
contentEncoding: 'aes128gcm'
};
webPush.sendNotification(
pushSubscription,
payload,
options
).catch( error => {
console.log(error);
}) ;
This is the code from my service worker that handles the notifications:
self.addEventListener('notificationclose', event => {
console.log(event);
const notification = event.notification;
const primaryKey = notification.data.primaryKey;
console.log('Closed notification: ' + primaryKey);
});
self.addEventListener('notificationclick', event => {
const notification = event.notification;
console.log(notification.data);
const primaryKey = notification.data.primaryKey;
const action = event.action;
if (action === 'close') {
notification.close();
} else {
event.waitUntil(
clients.matchAll().then(clis => {
const client = clis.find(c => {
return c.visibilityState === 'visible';
});
if (client !== undefined) {
client.navigate('samples/page' + primaryKey + '.html');
client.focus();
} else {
// there are no visible windows. Open one.
clients.openWindow('samples/page' + primaryKey + '.html');
notification.close();
}
})
);
}
self.registration.getNotifications().then(notifications => {
notifications.forEach(notification => {
notification.close();
});
});
});
self.addEventListener('push', event => {
let body;
if (event.data) {
body = event.data.text();
} else {
body = 'Default body';
}
const options = {
body: body,
icon: 'images/notification-flat.png',
vibrate: [100, 50, 100],
data: {
dateOfArrival: Date.now(),
primaryKey: 1
},
actions: [
{action: 'explore', title: 'Go to the site',
icon: 'images/checkmark.png'},
{action: 'close', title: 'Close the notification',
icon: 'images/xmark.png'},
]
};
event.waitUntil(
clients.matchAll().then(c => {
console.log(c);
if (c.length === 0) {
// Show notification
self.registration.showNotification('Push Notification', options);
} else {
// Send a message to the page to update the UI
console.log('Application is already open!');
}
})
);
});
Other
I have tried changing the contentEncoding from aesgmc to aes128gcm but I am still getting the same error.
If I run the web-push command I see the same error