Блог

Я практически ребенок Promise и serviceWorker все такое, и я понятия не имею, почему это происходит.

Я смотрел видео о веб-Push и уведомлениях. https://youtu.be/ggUY0Q4f5ok В 1:26 видео он представляет этот код и говорит: «Вы также можете попробовать это с консоли браузера. Попробуйте это на странице новой вкладки».

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

Я перешел на страницу новой вкладки и написал тот же код на консоли.
Но когда я позвонил displayNotification() , он бросил Uncaught (in promise) TypeError: Cannot read property 'showNotification' of undefined at <anonymous>:5:17 .

Поэтому я попробовал следующее:

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

Это дало undefined Window {window: Window, self: Window, document: document, name: "", location: Location, …} результат .
Я предполагаю Window , что объект-это результат getRegistration() , но тогда reg для чего?
Во всяком случае, тогда я попробовал следующее:

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

Но, это бросило Uncaught (in promise) TypeError: this.showNotification is not a function at <anonymous>:2:18

Была ли изменена грамматика, был ли в видео неправильный код, или я что-то пропустил?

Plus. Я действительно хочу развиваться Push API , но я не смог найти никаких простых учебников или быстрых стартов. Если возможно, порекомендуйте один из них, пожалуйста. Огромное спасибо.

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

Причина, по которой вы получаете: Uncaught (in promise) TypeError: Cannot read property 'showNotification' of undefined at <anonymous>:5:17

это потому, что вызов getRegistration() не дает вам действительного результата. В идеале функция getRegistration() должна возвращать объект регистрации, который будет иметь несколько методов и свойств, одним из которых является метод, называемый showNotification(). Очевидно, что в этом случае вызов getRegistration() возвращает что-то другое? Вероятно, нулевое или неопределенное значение или что-то в этом роде. Вы можете провести расследование, зарегистрировав результаты вызова следующим образом:

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

Проблема, похоже, связана с тем, что вы не зарегистрировали работу службы перед вызовом getRegistration(). По крайней мере, я ожидал бы, что вы сделаете что-то подобное, прежде чем проверять регистрацию:

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