"Save" button in notification settings modal not working on desktop Safari

[mgrzeca]

In the notification view, there's a settings button that opens a modal. The "Save" button inside the modal doesn’t work in the desktop version of Safari (though it works fine on iOS). I’ve tested this on both my instance and the official vernissage.photos instance, and the issue is the same on both.

The button gives visual feedback when clicked, but nothing happens, and the notification settings are not saved.

[mgrzeca]

I’ve checked the browser's JavaScript console, and there are no errors or messages displayed when the "Save" button is clicked.

[mczachurski]

I cannot reproduce that issue. Check please if you have "Service worker" enabled in Safari:

Verify also if in the Safari console you switched to see all console messages:

Theoretically, you should not see the "Settings" button when the "Service worker" is disabled, but I don't have any other ideas.

[mgrzeca]

Yes, I have service workers enabled, and the JavaScript console in Safari 18.0 is set to display all messages by default. I’ve also tried disabling Safari’s built-in content blockers and tested with AdGuard turned off, but the issue persists.

Let me know if there’s anything else I should check!

[mczachurski]

I will add more messages during the process of saving notifications in the new version of the application, which might help us identify the issue. I’ll let you know once it’s done.

[mczachurski]

Can you verify what error message do you have now?

And can you verify also what do you have in the Notifications tab in the Safari:

[mgrzeca]

[mgrzeca]

but for some reason, it works on iOS, and notifications are also working correctly for me on iPhone

[mgrzeca]

I’m getting exactly the same message on the official instance.

[mczachurski]

The code which is responsible for notification subscription looks like that:

const subscription = await this.swPushService.requestSubscription({
    serverPublicKey: this.settingsService.publicSettings.webPushVapidPublicKey
});

const jsonObject = subscription.toJSON();
this.endpoint = jsonObject.endpoint;
this.p256dh = jsonObject.keys?.p256dh;
this.auth = jsonObject.keys?.auth;

if (!this.endpoint || !this.p256dh || !this.auth) {
    this.messageService.showError('Error during generating encryption keys for Web push.');
    return;
}

Basically we have three steps here:

1. requestSubscription - after that operation you should have question from browser about notification approval,
2. subscription.toJSON() - then we have to ask for browser generated public keys,
3. !this.endpoint || !this.p256dh || !this.auth - check if everything has been retrieved from browser,

Seems like the first step is failing somehow (not returning correct PushSubscription object). But for now I don’t know why.