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

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

0 голосов
/ 05 февраля 2020

Я новичок в области Service Worker, сейчас я могу показать уведомление, но мое требование - обновить DOM, используя данные, полученные от события pu sh. Я пытался использовать 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));
});

Спасибо

...