Chrome不重新启动服务工作人员进行推送通知

发布于 2025-02-06 04:47:47 字数 6590 浏览 1 评论 0原文

我正在将FCM推送通知集成到我的角度应用中,并且服务工作者(SW)已成功注册在Chrome中,如下所示:

安装状态是激活的,如果我手动开始 SW,我确实会收到推送通知它发现它不需要优化,但在推送通知时切勿重新启动它。因此,我们的客户关闭我们的网站后无法获得通知。我正在使用:

  • Angular v13
  • chrome v102.0.5005.61

以下是我SW的片段用于收听'push'事件:

importScripts('./assets/js/async-waituntil.js'); 
importScripts('https://cdn.jsdelivr.net/gh/mozilla/localForage@master/dist/localforage.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.6/firebase-messaging.js');

(function () {
'use strict';
self.addEventListener('install', function (event) {
    self.skipWaiting();
});

self.addEventListener('activate', (event) => {
    event.waitUntil(clients.claim());
});

removeAllEventListener('push');

self.addEventListener('push', (msg) => {
    const itsGonnaBeLegendary = new Promise((resolve, reject) => {
        let data = null;
        if (msg && msg.data && msg.data.json()) {
            data = msg.data.json();
        }
        if (data === null) {
            resolve();
        }
        if (data.data && data.data['event'] && data.data['event'] === 'logout') {
            const firebaseConfig = {
                apiKey: '****',
                authDomain: '****',
                projectId: '****',
                storageBucket: '****',
                messagingSenderId: '****',
                appId: '****',
            };
            firebase.initializeApp(firebaseConfig);
            const messaging = firebase.messaging();
            return messaging.deleteToken();
        }
        if (!msg.data) {
            resolve();
            return;
        }
        self.clients
            .matchAll()
            .then((client) => {
                try {
                    if (client.length > 0) {
                        try {
                            client[client.length - 1].postMessage(data);
                        } catch (e) {
                            resolve();
                            return;
                        }
                    }
                    let url = '';
                    localforage
                        .getItem('user')
                        .then((userdata) => {
                            const user = JSON.parse(userdata);
                            if (data.data) {
                                const gcmData = data.data;
                                url = gcmData.url;
                                if (gcmData.type === 'note' && !gcmData.notify.split(',').includes(user.name)) {
                                    resolve();
                                    return;
                                }
                            }
                            self.clients
                                .matchAll({
                                    type: 'window',
                                    includeUncontrolled: true,
                                })
                                .then(function (windowClients) {
                                    try {
                                        let isVisible = false;
                                        if (
                                            windowClients.length > 0 &&
                                            windowClients.findIndex((x) => x.url.includes('hello')) > -1
                                        ) {
                                            isVisible = true;
                                        } else {
                                            isVisible = false;
                                        }
                                        if (!isVisible) {
                                            const desc = data.notification;
                                            let options = {
                                                data: { url },
                                            };
                                            self.registration
                                                .showNotification(desc['title'], options)
                                                .then(() => {
                                                    resolve();
                                                    return;
                                                })
                                                .catch((e) => {
                                                    resolve();
                                                    return;
                                                });
                                        }
                                    } catch (e) {
                                        resolve();
                                    }
                                })
                                .catch((e) => {
                                    resolve();
                                    return;
                                });
                        })
                        .catch((e) => {
                            resolve();
                            return;
                        });
                } catch (e) {
                    resolve();
                    return;
                }
            })
            .catch((e) => {
                resolve();
                return;
            });
    });
    msg.waitUntil(itsGonnaBeLegendary);
});
self.addEventListener('notificationclick', (event) => {
    event.notification.close();
    var promise = new Promise(function (resolve) {
        if (clients.openWindow && event.notification.data.url) {
            clients.matchAll().then(function (clientsArr) {
                const client = clientsArr.find(
                    (c) =>
                        c.url.includes('custom-url') ||
                        c.url.includes('custom-url-1')
                );
                if (client) {
                    resolve(client.focus());
                } else {
                    resolve(clients.openWindow(event.notification.data.url));
                }
            });
        }
    }).then((x) => {
        return x;
    });
    event.waitUntil(promise);
});
})();

官方文档说,当正确的事件发生正确的事件时,浏览器将自动重新启动SW,但无法正常工作。请帮忙。

I am integrating FCM push notifications in my Angular application and the Service Worker (SW) is successfully registered in Chrome as can be seen below:
enter image description here

The installation status is ACTIVATED and I do receive push notifications if I manually Start the SW but the issue is Chrome stops the SW as soon as it finds it unneeded for optimization but never restarts it in the event of push notification. Due to this, our clients are not able to get the notification after they close our website. I am using:

  • Angular v13
  • Chrome v102.0.5005.61

Below is the snippet of my SW that we are using to listen for 'push' event:

importScripts('./assets/js/async-waituntil.js'); 
importScripts('https://cdn.jsdelivr.net/gh/mozilla/localForage@master/dist/localforage.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.6/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.6/firebase-messaging.js');

(function () {
'use strict';
self.addEventListener('install', function (event) {
    self.skipWaiting();
});

self.addEventListener('activate', (event) => {
    event.waitUntil(clients.claim());
});

removeAllEventListener('push');

self.addEventListener('push', (msg) => {
    const itsGonnaBeLegendary = new Promise((resolve, reject) => {
        let data = null;
        if (msg && msg.data && msg.data.json()) {
            data = msg.data.json();
        }
        if (data === null) {
            resolve();
        }
        if (data.data && data.data['event'] && data.data['event'] === 'logout') {
            const firebaseConfig = {
                apiKey: '****',
                authDomain: '****',
                projectId: '****',
                storageBucket: '****',
                messagingSenderId: '****',
                appId: '****',
            };
            firebase.initializeApp(firebaseConfig);
            const messaging = firebase.messaging();
            return messaging.deleteToken();
        }
        if (!msg.data) {
            resolve();
            return;
        }
        self.clients
            .matchAll()
            .then((client) => {
                try {
                    if (client.length > 0) {
                        try {
                            client[client.length - 1].postMessage(data);
                        } catch (e) {
                            resolve();
                            return;
                        }
                    }
                    let url = '';
                    localforage
                        .getItem('user')
                        .then((userdata) => {
                            const user = JSON.parse(userdata);
                            if (data.data) {
                                const gcmData = data.data;
                                url = gcmData.url;
                                if (gcmData.type === 'note' && !gcmData.notify.split(',').includes(user.name)) {
                                    resolve();
                                    return;
                                }
                            }
                            self.clients
                                .matchAll({
                                    type: 'window',
                                    includeUncontrolled: true,
                                })
                                .then(function (windowClients) {
                                    try {
                                        let isVisible = false;
                                        if (
                                            windowClients.length > 0 &&
                                            windowClients.findIndex((x) => x.url.includes('hello')) > -1
                                        ) {
                                            isVisible = true;
                                        } else {
                                            isVisible = false;
                                        }
                                        if (!isVisible) {
                                            const desc = data.notification;
                                            let options = {
                                                data: { url },
                                            };
                                            self.registration
                                                .showNotification(desc['title'], options)
                                                .then(() => {
                                                    resolve();
                                                    return;
                                                })
                                                .catch((e) => {
                                                    resolve();
                                                    return;
                                                });
                                        }
                                    } catch (e) {
                                        resolve();
                                    }
                                })
                                .catch((e) => {
                                    resolve();
                                    return;
                                });
                        })
                        .catch((e) => {
                            resolve();
                            return;
                        });
                } catch (e) {
                    resolve();
                    return;
                }
            })
            .catch((e) => {
                resolve();
                return;
            });
    });
    msg.waitUntil(itsGonnaBeLegendary);
});
self.addEventListener('notificationclick', (event) => {
    event.notification.close();
    var promise = new Promise(function (resolve) {
        if (clients.openWindow && event.notification.data.url) {
            clients.matchAll().then(function (clientsArr) {
                const client = clientsArr.find(
                    (c) =>
                        c.url.includes('custom-url') ||
                        c.url.includes('custom-url-1')
                );
                if (client) {
                    resolve(client.focus());
                } else {
                    resolve(clients.openWindow(event.notification.data.url));
                }
            });
        }
    }).then((x) => {
        return x;
    });
    event.waitUntil(promise);
});
})();

The official docs say that SW will be restarted automatically by the browser when the right event occurs for the SW but can't get this to work. Please help.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文