уведомление chrome не отображается и выдает ошибку

Question

У меня проблема с уведомлением API в Chrome. Не удалось отобразить уведомление и вернуть ошибку в консоль. У меня не было этой проблемы с Firefox.

index.js

document.addEventListener('DOMContentLoaded', function () {  

    Notification.requestPermission(function (status) {
        console.log('notification permission status: ', status);
        displayNotification();
    });

    function displayNotification() {
        if (Notification.permission === 'granted') {
            navigator.serviceWorker.getRegistration()
                .then(function (reg) {
                    var options = {
                        body: 'Buzz! Buzz!',
                        icon: '/static/img/logo_menu.png',
                        vibrate: [200, 100, 200, 100, 200, 100, 200],
                        tag: 'vibration-sample'
                    };
                    reg.showNotification('Hello world !', options);
                })
        }
    }

}, false);

Сообщение об ошибке

notification permission status:  granted index.js:25
Uncaught (in promise) TypeError: Cannot read property 'showNotification' of undefined at index.js:25

Кто-то знает, почему я испытываю эту проблему только на Chrome?

Редактировать:

Я не упомянул, но у меня есть тег сценария:

<script>
        // Check that service workers are registered
        if ('serviceWorker' in navigator) {
            // Use the window load event to keep the page load performant
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('sw.js');
            });
        }
    </script>

этот корень в sw.js файл:

importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js');

if (workbox) {
  console.log(`Yay! Workbox is loaded ?`);
} else {
  console.log(`Boo! Workbox didn't load ?`);
}

Я решаю проблему в дополнение к index.js setTimeout(). Таким образом, я жду, когда этот работник службы начнет читать мой файл.