Notification events not working with service workers

[luke-john]

Currently on browsers with service workers push.js is not able to handle any events on the notification.

push.js/push.js

Line 189 in 93014bc

if (w.navigator) {

[Nickersoft]

Could you please elaborate?

[luke-john]

Sure,

So when using a browser such as android chrome which does not have support for the Notification API, push.js uses a serviceworker instead.

Currently the logic push.js uses for serviceworker push notifications is to simply register the serviceworker and then call showNotification on it.

This means pretty much all the logic following this is unused

push.js/push.js

Lines 245 to 284 in 93014bc

	id = addNotification(notification);
	/* Wrapper used to get/close notification later on */
	wrapper = {
	get: function () {
	return notification;
	},
	close: function () {
	closeNotification(id);
	}
	};
	/* Autoclose timeout */
	if (options.timeout) {
	setTimeout(function () {
	wrapper.close();
	}, options.timeout);
	}
	/* Notification callbacks */
	if (isFunction(options.onShow))
	notification.addEventListener('show', options.onShow);
	if (isFunction(options.onError))
	notification.addEventListener('error', options.onError);
	if (isFunction(options.onClick))
	notification.addEventListener('click', options.onClick);
	onClose = function () {
	/* A bit redundant, but covers the cases when close() isn't explicitly called */
	removeNotification(id);
	if (isFunction(options.onClose)) {
	options.onClose.call(this);
	}
	}
	notification.addEventListener('close', onClose);
	notification.addEventListener('cancel', onClose);

// notification will be undefined

As a result the following push.js options do not work on android chrome

onClick: Callback to execute when the notification is clicked.
onError: Callback to execute when if the notification throws an error.

I've had a quick look at the service worker documentation and it doesn't look like it's trivial to wire up that logic to the serviceworker notification.

[Nickersoft]

Oh shucks, you're right. The notification variable is never being assigned. I'll start working on a fix as soon as I can. Shouldn't be too hard.

[Nickersoft]

Thanks for the explanation

[Nickersoft]

I apologize that I've been sort of MIA for these past few months, but I am currently working on merging in a change that will fix this issue.

[nickmask]

@Nickersoft Any update on when mobile notifications will start working again?

[Nickersoft]

@nickmask Mobile notifications never stopped working (unless there is some issue I am not aware of). This issue had to do with notification events not firing and throwing console errors on mobile. While this issue has been fixed in bc8932d, it has not been published to NPM yet, as there were some additional changes I was hoping to make before the next release.

[dmitry-korolev]

While this issue has been fixed in bc8932d

Was it? Did you check it? As far as i see, it wasn't (or even it can't be) fixed - there is no such event as "notificationclink" outside of service worker.

The ServiceWorkerGlobalScope.onnotificationclick property is an event handler called whenever the notificationclick event is dispatched on the ServiceWorkerGlobalScope object, that is when a user clicks on a displayed notification spawned by ServiceWorkerRegistration.showNotification().

Notifications created on the main thread or in workers which aren't service workers using the Notification() constructor will instead receive a click event on the Notification object itself.

Reference: https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/onnotificationclick

My current solution is to add notificationclick event listener inside the service worker and then pass it to the parent window via postMessage. You can find an example here - https://github.com/dmitry-korolev/push-js

[Oupsla]

Hello @Nickersoft ,

Same problem here, the notification is shown on mobile but methods (onClick, onShow, ...) don't trigger. Any news about this ?

Thanks !

[Glennmen]

@Nickersoft What is the status of this issue? How to get onClick to work on Android Chrome browser?

[Nickersoft]

Hi guys. I'm currently looking into an issue where the link option doesn't seem to be operational on the Push homepage. onClick is in the same block of code so it's most likely a related issue. It's weird though... could have sworn link was working. Also, @Oupsla, onClick is the only event that can be triggered on mobile notifications (I thought it said that in the documentation... I might have accidentally removed it). This is just due to how the notifications framework operates. The Notifications API (which mobile notifications don't use) is the only API that supports onShow, onError, etc. Sorry for the snag in the release of v1.0. I'll see if I can get it resolved within a few days.

[anthonyG78]

Hello @Nickersoft ,
Any news about the onClick issue on Android Chrome browser?
I recently test Push.js 1.0.5, works fine on desktop but unfortunately, it only display the notification without click action on mobile (Chrome 61).
Thanks

Edit: with link: '/#' option, browser show up and load a new page of the website.

[afridi26]

HI @Nickersoft please let us know why the onclick is not working on Android chrome?

It is not fixed???