How to implement background notification in web?

I have implemented Laravel Reverb in both public and private channels and working fine, however, I could not implement background service worker to receive notification on the PC from browser while user is away from the webpage, does any have any reference how to implement reverb connection in service-worker.js and do I also need a manifest.js? how to put all together in work?

I have tried to configure service-worker.js as below:

importScripts("pusher.min.js");
importScripts("echo.min.js");


const echo = new Echo({
    broadcaster: "reverb",
    key: "******************",
    wsHost: window.location.hostname,
    wsPort: 80,
    wssPort: 443,
    forceTLS: "http",
    enabledTransports: ["ws", "wss"],
});

self.addEventListener("notificationclick", () => {
    console.log("Browser Notification Clicked!");
});

initializing in index file:

if ('serviceWorker' in navigator) {
   navigator.serviceWorker.register("/service-worker.js");
}

Notification.requestPermission().then((permission) => {
        if (permission === "granted") {            
            navigator.serviceWorker.ready
                .then((worker) => {                    
                    worker.showNotification("Hello world!");                
                })
                .catch(function (err) {
                    console.log("service-worker failed !.", err);
                });
        } else {
            console.log("Unable to get permission to notify.");
        }

but getting this error:

TypeError: ServiceWorker script at http://127.0.0.1:8000/service-worker.js for scope http://127.0.0.1:8000/ threw an exception during script evaluation.

if I empty the service-worker.js file, then I get Hello world notification from the browser.