Question

我已经在create-react-app项目的公共文件夹中创建了名为 firebase-messaging-sw.js 的自定义服务工作者文件。我配置了Firebase并获得了令牌。

firebase-messaging-sw.js

importScripts('https://www.gstatic.com/firebasejs/7.5.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.5.0/firebase-messaging.js');

firebase.initializeApp({
    apiKey: "f",
    authDomain: "i",
    databaseURL: "r",
    projectId: "e",
    storageBucket: "b",
    messagingSenderId: "a",
    appId: "s",
    measurementId: "e"
});
const messaging = firebase.messaging()

messaging.setBackgroundMessageHandler((payload) => {
    console.log('in background handler:', payload)
    const promiseChain = clients
        .matchAll({
            type: "window",
            includeUncontrolled: true
        })
        .then(windowClients => {
            for (let i = 0; i < windowClients.length; i++) {
                const windowClient = windowClients[i];
                windowClient.postMessage(payload);
            }
        })
        .then(() => {
            return registration.showNotification("my notification title");
        });
    return promiseChain;
})

我使用邮递员向 https://fcm.googleapis.com/fcm/send 发出请求。

当标签页未对准焦点时，我在桌面系统上收到通知，并且无法在android和ios设备上收到通知。

注意： 我已经使用从浏览器（适用于ios的Safari）和（适用于android的chrome）的“添加到主屏幕”来使用我的PWA。

移动设备是否需要其他任何实现？

使用Firebase（FCM）的PWA ReactJS推送通知

0 个答案: