Notifications not working - no subscribers recorded

After clicking the confirm button, did the browser then ask for confirmation?

When testing on Microsoft edge, I noticed that they blocked the request for access.

In other words, I clicked confirm button but it didn't show the browsers confirmation with block and allow on.

After some time modal dialog appears to be shown again?

This is a setting on the push configuration page. You can specify how many days to wait before repeating the prompt again.

Just to follow up on this, on my local I am seeing the following subscribers being recorded. One looks like it has been created twice.

Ok, Turns out when I checked my notifications in my browser, they were disable for the production site. This might explain why no sunscribers were showing.

Ok I have checked out https://github.com/web-push-libs/web-push-php and the https://github.com/Minishlink/web-push-php-example/blob/master/README.md demo.

Here are my observations:

1. On Mac, for notifications, under system preferences you can view and manage how all notifications look and behave. This includes both browser and app notifications. There is no option to delete notifications here.
2. In safari (mac) under settings > Websites > notifications, there is an option to enable/disable notifications here. There is also the option to delete here. Deleting a notification here will result it also being removed from system preferences > notifications.
3. Running the demo here seems to work in a fairly rudimentry level. Running for the first time you have the option to enable notifications. Once enabled they seem to work reasonably well. I am not convinced that the notifications respect the browser preferences here. e.g. I was pretty sure that I was able to send a notification after disabling the notifications from the browser. Also, the demo will always prompt you to enable the notifications after clearing the browser cache or restarting. Doing so does not seem to affect the setting that is stored in Safari.

Looking at https://mdn.github.io/dom-examples/to-do-notifications/ which is an example of a push notifications uses indexedDB to store application state.

It's possible to determine if Notification (service worker) has been been registered by using Notification.permission.

e.g.

  let isPushEnabled;
  if (Notification.permission === 'default') {
    isPushEnabled = false;
  }
  if (Notification.permission === 'granted') {
    isPushEnabled = true;
  }

However I still have problem.

In this test here I can see that state is persistent (even after cache clear). Not sure how this is done but I think it makes sense to only provide authorisation to your site once.

https://www.bennish.net/web-notifications.html

This test also shows there is an issue with showing notifications for google chrome on mac. ( Chrome is up to date
Version 126.0.6478.127 (Official Build) (x86_64))

Documentation about notifications specification can be found here. This explains the main difference between persistent and non persistent notifications.

https://notifications.spec.whatwg.org/#lifetime-and-ui-integrations

It looks like the specification has been updated fairly recently.

Looking at this again on local I have 3 different browsers FIrefox, Chrome and Safari. From what I can tell notifications are set per browser. I therefore I estimate I should have 3 different subscriptions.

Looking at my subscriber ion my local I appear to have 9 different subscribers. See attached.

Perhaps these are added upon retry? It seems wrong that there are duplicate entries here. For what purpose?

Of these, 3 seem to be identical (3 duplicates) so that leaves 6 different subscriptions.

Now in the browser, if a notification is enabled, it is also possible to delete a notification. What happens then?

1. Does Drupal have a mechanism for checking the existence of the notification. I guess this may depend on the browser being used! e.g. if a notification and service worker is de registered from the browser, how can we know about the next time we reconnect to the site?
2. I am also wondering as the push service is registered with a third party e.g. https://web.push.apple.com/QPt266HkulgIBtOffeSAssjYKASDIpJ3yVmkDmiUC5Sm-ULpBW605_y2K2ps_nFGwqtbW30KqhNFolRqKS3K_Z0siWFqZCurXjQUpUmTpgaD-Ed_BmXcB7PO2VZXHS9MX1nazo7cjVLrjXLlxOZvndEvM8JrSYbHJscmlLoJWCQ do we also need to deregister this or is this done when the notification is deleted in the browser. How is this handled? If the notification is in fact deleted, perhaps we can use that to make sure that any push notifications are first checked for their existence before sending

The main issue I am having here is that the notifications do not appear to be triggered upon new node creation/publish for said content type and I am not receiving anything.

I have downloaded and tested https://packagist.org/packages/minishlink/web-push#v9.0.0-rc2 and https://github.com/Minishlink/web-push-php-example and these do trigger notifications.

I have selected the option to activate published content notifications (notifications will be pushed for content of following checked content types is published)

My guess is either the notification is not being triggered on node save, or if it is, the actual push notification is breaking. I have seen nothing in the logs to suggest why this might be so will try stepping though to see if I can find out why this is.

Just reading up on apple push notifications

Apparently when your app is registered with Apple Push Notification console, it is possible to keep track of Notifications state.

https://developer.apple.com/documentation/usernotifications/viewing-the-...

This could be useful for removing tokens that no longer exist.

Here are a list of response codes insluding 410

The device token is no longer active for the topic.

https://developer.apple.com/documentation/usernotifications/handling-not...

In this demo

https://www.kenherbert.dev/browser-notification-tester/

We can see that with the use of the button if behaves slightly differently. However when I tested it it seemed to keep the state of the notification using the following code:

/**
 * Handle user click on the show notification button
 */
document.getElementById('notify').onclick = function() {
    if(Notification.permission === 'granted') {
        document.getElementById('notification-status').innerHTML = 'pending';

        notify();
    } else if(Notification.permission !== 'denied') {
        document.getElementById('permission-status').innerHTML = 'requesting permission';

        Notification.requestPermission().then(function(permission) {
            updatePermissionStatus();

            if(permission === 'granted') {
                notify();
            } else if(permission === 'denied') {
                document.getElementById('notification-status').innerHTML = 'no';
            }
        });
    }
};

Looking here it seems that it would be useful to have some tooling for troubleshooting push notifications. Not sure if we have anything here?

https://developer.apple.com/documentation/usernotifications/troubleshoot...

Ok, I have tried installing the rules module and I was unable to step through when setting up a rule for a newly published node for some reason.

I have also tried the broadcast to all using the admin form at /admin/config/system/advanced-pwa/config-broadcast

I was able to step through but this just seems to send through to message queue. Not sure how that is supposed to work? No notifications received.

Ok, I realise now after running cron, the notification seems to be triggered then (not when the node is actually published)

When running I can get as far as

$webPush->sendOneNotification(
            $sub,
            $notification_data,
            []
          );

Notifications seem to be being sent but for some reason they are not showing from notification centre.

notification_data is like so

"{"title":"New \u0027feed_item\u0027 content is published. Click to view.","message":"","icon":"https:\/\/streathamlifed8.ddev.site\/","url":"https:\/\/streathamlifed8.ddev.site\/news\/test2","content-details":{"nodeid":"100016559","nodetype":"feed_item"}}"

Icon looks wrong to me

the web push example is like so:

$webPush->sendOneNotification(
    $subscription,
    '{"message":"Hello! 👋"}',
);

Ok tried swapping the payload and that did not seem to make a difference?

Ok the issue I seem to be having is on the front end, mainly main.js

navigator.serviceWorker.ready.then(function (registration) {
          return registration.sync.register('synFirstSync');
        });

Basically registration.sync seems to be null.

You've certainly given me some reading. I'll come back to you soon.

I've always tested using a website that is online. That maybe why they aren't being sent for you. Well unless yours is already online, its worth a try.

Also, did you watch the videos for the three modules? They reliably works for me as demonstrated.

I have a bit of a problem in that the only Apple device I have access to is a iPhone. After setting the module up fresh, I used the iPhone and saw no modal.

I had successfully tested notifications on Firefox, Edge and Chrome on both Windows and Android. I've done the same today.

Comment #5
I'm seeing the same for my site. Interestingly, this didn't happen for anonymous. See my screenshot. 1-6 were created when I accepted push notifications as admin once using Chrome. Whilst 7-9 was three different browsers, inc Chrome, as anonymous. When testing, duplicate messages was not received.

Comment #17
Cron information is on the module page, README.md and video. This is because a site could hopefully have 1000's of subscribed browsers. By adding them to a queue to be processed on cron runs we won't blow up our machines.

Comment #18
Pls see attached patch that should address the issues relating to that particular code.

There is logging in this patch. The correct result in the console for un-supporting browsers is this:

Service worker registered with scope: https://yourdomain.com/ main.js:26:19
Background Sync is not supported. main.js:31:21
Sync registration failed or Service worker registration failed, error: Background Sync is not supported main.js:42:19

I don't believe push notifications is related to this. From what I can tell it is all about caching resources. Not all browsers support background sync. So this patch provides a fallback for those browsers. However device caching isn't being done at all on these browsers from what I can see.

(All logging will be removed when committed. The patch will be tidier)

So to be clear, I haven't got push notifications working on my partners iPhone because the modal didn't appear. Confusingly, you have? Judging by the mentioned Apple endpoints.

I shall continue working on this as a matter of urgency. Thursday will be the next day I can be on the case. No support for Apple devices isn't an option for me. The whole of next week I'm away working annoyingly lol. As soon as I'm back I'll be on the case.

I started maintaining this module after it's original development, so I'm still learning it if I'm brutally honest. There are areas of the module I haven't needed to understand yet. Like you, I wanted push notifications, that was my motivation with this module.

# comment 7

My understanding at present is that the module will allow the connection. As in trigger the browser prompt and save the endpoint when allowed. Passed that there is no bidirectional communication in relation to settings.

That said, there is a lot of code that suggests it was being worked on. There is JS code and a Drupal route.

# comment 12

Thank you for confirming the tech works and that it's a module issue. I think the rest I covered with my last comment

# comment 13

My understanding of topics is that each message can have one. It is specified when a message is sent. If there is a previous message still unopened for their browser, it will be replaced by the latest one?

So to be clear, I haven't got push notifications working on my partners iPhone because the modal didn't appear. Confusingly, you have? Judging by the mentioned Apple endpoints.

AFAIK, push notifications are not supported on iPhone. That said I think I read somewhere it may be possible to add to home screen to add push notifications. Not sure.

fyi I have added a support for displaying a modal window on web push notifications module

https://www.drupal.org/project/web_push_notification/issues/3462638 ✨ Add support for modal window Active

This requires use of a twig template and a custom block type template. IMO, Templates should really be written in twig in Drupal, not encapsulated in a js file.

I did research the market for a module to help with creating a modal window, of which there are quite a few, but none of them did quite what I wanted (d10 compatible and works with block system).

Hey guys, any luck with the push notifications on ios?

Im diving into this and even the modal wasnt showing on my iphone. So i needed to upgrade my ios (https://developer.apple.com/documentation/usernotifications/sending-web-...)

only ios 16.4 or + it works.

after that i was able to see the modal, but as @2dareis2do said, push still not appearing after create new contents or broadcast some push tests

This is really frustrating for me too. I hadn't tested iPhones. I've been inundated with paid work. I use this module on a personal project.

When things have calmed down again, I will 100% be investing more hours into this.

I'll quickly release if you make the fix.

Do things work on Mac's? Or is it only an iPhone issue? I ask because I don't have access to a Mac.