I’m building a web app where I want to send push notifications using my local Ntfy server. I’m currently using the Push API and service workers to handle notifications. However, it seems like my push subscription is defaulting to the Google or Mozilla push services (depending on the browser), rather than my local Ntfy server.
Here’s a snipped of problematic code I am using to register the service worker and subscribe to push notifications:
'use client';
import { useEffect, useState } from 'react';
export default function ServiceWorkerRegister() {
const vapidPublicKey = 'xxxx';
const subscribeToNtfy = async () => {
if ('serviceWorker' in navigator && 'PushManager' in window) {
try {
const registration = await navigator.serviceWorker.register('/sw.js', { scope: "https://stackoverflow.com/" });
const permission = await Notification.requestPermission();
// Convert the VAPID public key to a Uint8Array
const applicationServerKey = urlBase64ToUint8Array(vapidPublicKey);
// Subscribe to Web Push using PushManager
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true, // PushManager will only send visible notifications
applicationServerKey, // Include the VAPID public key here
});
const response = await fetch('http://localhost:82/testingnotifi3', {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(subscription),
});
} catch (error) {
console.error('Error subscribing to notifications:', error);
}
}
};
useEffect(() => {
subscribeToNtfy();
}, []);
return (
<div>
<button onClick={subscribeToNtfy}>
Enable Notifications
</button>
</div>
);
}
However, this is subscribing via the default push service of the browser (Google’s for Chrome, Mozilla’s for Firefox). I want to route these subscriptions through my local Ntfy server running on localhost:82
.
My question is:
- How do I modify my code to use my local Ntfy server for push
notifications instead of the default Google or Mozilla push services? - Are there additional configurations I need to set up either on the
client-side or on my Ntfy server to handle this?
Thanks in advance!