ylliX - Online Advertising Network
Vertex AI - Antrophic and Mistral models: Why does it require Imegen access?

How can I subscribe to notifications using my local Ntfy server instead of Google or Mozilla Push services?


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!



Source link

Leave a Reply

Your email address will not be published. Required fields are marked *