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

时间:2019-01-23 09:44:15

标签: reactjs firebase firebase-cloud-messaging

我认为已经提出了这个问题,并提出了一些建议:
Store data in Background Message
Unable to store web notifications received in service worker in indexDB

不幸的是,我仍然找不到具体的示例(或确实可行)。
AFAIK firebase-messaging-sw.js中没有本地存储或cookie,唯一可用的方法是使用indexDB

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

方法:当Web应用程序在后台可见时,将数据存储在indexDB中,当Web应用程序可见时,将数据替换到本地存储中。

我们的应用基于ReactRedux
我对Web开发的知识非常有限,请随时纠正我。

Firebaase Documentation
预先感谢

1 个答案:

答案 0 :(得分:0)

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

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);