Way to proxy/override ServiceWorkerRegistration function

Question

I'm trying to proxy the showNotification method of a ServiceWorkerRegistration object. Here's how I'm doing it right now:

function swNotificationCallback(title, opt) {
    console.log("title", title);
    console.log("options", opt);
    return true
}

function createSWHandler(original) {
    return (title, opt) => {
        if (swNotificationCallback(title, opt)) {return original(title, opt)}
    }
}

navigator.serviceWorker.getRegistrations().then(val => val.forEach(sw => {
    if (!sw._showNotification) {
        // backup the old just in case
        sw._showNotification = sw.showNotification;
        sw.showNotification = createSWHandler(sw.showNotification);
    }
}));

Calling sw.showNotification correctly logs everything, but no notification is shown and this error is thrown: Uncaught (in promise) TypeError: 'showNotification' called on an object that does not implement interface ServiceWorkerRegistration.

Any way to remedy this? I think it might be possible to use a Proxy but I'm not sure how one would go about reassigning the registered service worker.

Answer 1

You need to invoke the method on the instance, not as a plain function without context. Use call:

function createSWHandler(original) {
    return function(title, opt) {
//         ^^^^^^^^
        if (swNotificationCallback(title, opt)) {
           return original.call(this, title, opt)
//                        ^^^^^^^^^^^
        }
    }
}

Alternatively you could

createSWHandler(sw.showNotification.bind(sw))