reactjs - 使用 firebase-messaging-sw.js 在 BackgroundMessageHandler ReactApp 中同步数据

Question

我认为这个问题已经被问过并且已经完成了一些建议：
Store data in Background Message
Unable to store web notifications received in service worker in indexDB

不幸的是，我仍然找不到一个具体的例子来说明如何做到这一点（或者如果确实如此可能的）。
AFAIK 本地存储或 cookie 不可用，firebase-messaging-sw.js唯一可用的方法是使用indexDB.

目标：可以选择处理接收到的数据messaging.setBackgroundMessageHandler并将其存储在本地存储中。

方法：indexDB当web应用程序在后台存储数据，当web应用程序变得可见时，将数据替换到本地存储。

我们的应用程序基于React, Redux。
我的网络开发知识非常有限，请随时纠正我。

Firebaase 文档
提前致谢

标签： reactjsfirebasefirebase-cloud-messaging

Answer 1

使用 indexDB 的代码示例firebase-messaging-sw.js

messaging.setBackgroundMessageHandler(payload => {
        try {
            function logerr(err) {
                console.log('Database erroor: ',err);
            }
            function connectDB(f) {
                const request = exports.indexedDB.open('lone', 1);
                request.onerror = logerr;
                request.onsuccess = function() {
                    f(request.result);
                };
                request.onupgradeneeded = function(e) {
                    e.currentTarget.result.createObjectStore('Table1', { keyPath: 'ssn' });
                    connectDB(f);
                };
            }
                connectDB(db => {
                    const transition = db.transaction(['Table1'], 'readwrite');
                    const objectStore = transition.objectStore('data');
                    const customerData = {
                        ssn: '444-44-4444',                                                
                        payload: payload.data.payload,
                    };
                    const objectStoreRequest = objectStore.add(customerData);

                    objectStoreRequest.onerror = logerr;
                    objectStoreRequest.onsuccess = function() {
                        return objectStoreRequest.result;
                    };
                });

                const notificationTitle = 'Title';
                const notificationOptions = {
                    body: message,
                    icon: 'favicon.png',
                };

                return self.registration.showNotification(notificationTitle, notificationOptions);

        } catch (e) {
            console.log('error', e);
        }
    });
})(this);