Обновление DOM с использованием данных, которые я получаю от события PUSH в Service Worker

Я новичок в домене Service Worker. Сейчас я могу показывать уведомления, но мне нужно обновить DOM, используя данные, которые я получаю из push-события. Я попытался использовать postMessage API. Но я не понимаю, как использовать. Я попытался использовать ответ на [Chrome ServiceWorker postMessage, но не могу его использовать. Может ли кто-нибудь помочь мне с примером, чтобы я мог понять и завершить это!? В Main js.. Я использую initializeUI(). Я вызываю sendMessage и подписку для пользователя::

if ('serviceWorker' in navigator && 'PushManager' in window) {
    navigator.serviceWorker.register('../js/sw.js', {scope: 'xyz'})
            .then(function (swReg) {
                console.log('Service Worker is registered', swReg);
                swRegistration = swReg;
        initializeUI();
            })
            .catch(function (error) {
                console.error('Service Worker Error', error);
            });
} else {
    console.warn('Push messaging is not supported');
    pushButton.textContent = 'Push Not Supported';
} 

function sendMessage(message) {
    return new Promise(function (resolve, reject) {
        var messageChannel = new MessageChannel();
        messageChannel.port1.onmessage = function (event) {
            if (event.data.error) {
                reject(event.data.error);
                console.log('rejected message');
            } else {enter code here
                resolve(event.data);
                console.log('received message :: ' + event.data);
            }
        };
        navigator.serviceWorker.controller.postMessage(message, [messageChannel.port2]);
    });
}

и в sw.js

self.addEventListener('message', function(event) {
    console.log('inside message listener');
  event.ports[0].postMessage({'test': 'This is my response.'});
});
self.addEventListener('push', function (event) {
    console.log('[Service Worker] Push Received.');
    console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
    const title = 'New Project';
    const options = {
        body: `"${event.data.text()}"`,
        icon: 'images/icon.png',
        badge: 'images/badge.png'
    };
    console.log("data :: " + event.data.text());
event.waitUntil(self.registration.showNotification(title, options));
});

Спасибо


person Vinayak Pattar    schedule 05.02.2020    source источник
comment
Можете ли вы добавить код того, что вы сделали до сих пор. Что касается обновления DOM, вы можете обновить его с помощью JS или любого используемого вами фреймворка. Если ваш метод срабатывает.   -  person Azeem Aslam    schedule 05.02.2020
comment
@AzeemAslam, извините за позднее обновление, я обновил код, не могли бы вы проверить?   -  person Vinayak Pattar    schedule 05.02.2020