getRegistration().then gives just undefined

Question

I am virtually a baby with Promise and serviceWorker things, and I have no idea why this happens.

I had watched a video about Web Push and Notifications. https://youtu.be/ggUY0Q4f5ok At 1:26 of the video, it presents this code and says "You can also try this out from the browser console. Try it on the new tab page."

function displayNotification(){
    if(Notification.permission === 'granted') {
        navigator.serviceWorker.getRegistration()
        .then(function(reg){
            reg.showNotification('Hello world!');
        });
    }
}

I got to the new tab page and wrote the same code at the console. But when I called displayNotification(), it threw Uncaught (in promise) TypeError: Cannot read property 'showNotification' of undefined at <anonymous>:5:17.

So I tried the following:

navigator.serviceWorker.getRegistration()
.then(reg=>{console.log(reg, this)});

It gave undefined Window {window: Window, self: Window, document: document, name: "", location: Location, …}. I guess Window object is the result of getRegistration(), but then what is reg for?
Anyway, I tried the following then:

navigator.serviceWorker.getRegistration()
.then(reg=>{this.showNotification('Hello world!');});

But, it threw Uncaught (in promise) TypeError: this.showNotification is not a function at <anonymous>:2:18

Was the grammar changed, was there a wrong code in the video, or did I miss something?

Plus. I really want to develop Push API, but I could not find any easy tutorials or quick-starts. If possible, recommend one please. Thank you so much.

Answer 1

function displayNotification(){
    if(Notification.permission === 'granted') {
        navigator.serviceWorker.getRegistration()
        .then(function(reg){
            reg.showNotification('Hello world!');
        });
    }
}

The reason why you get: Uncaught (in promise) TypeError: Cannot read property 'showNotification' of undefined at <anonymous>:5:17

is because the call to getRegistration() is not giving you a valid result. Ideally, getRegistration() should return a registration Object which will have several methods and properties, one of which is a method called showNotification(). Obviously in this case the getRegistration() call is returning something else? Probably a null or undefined or something like that. You can investigate by logging the results of the call like so:

function displayNotification(){
    if(Notification.permission === 'granted') {
        navigator.serviceWorker.getRegistration()
        .then(function(reg){
            console.log(reg);
        });
    }
}

The issue looks to be due to you not registering a serviceWorking before you call getRegistration(). At the very least I would expect you to do something like this before checking for a registration:

navigator.serviceWorker.register('/service-worker.js');