如何激活反应路线并从服务工作者传递数据？

Question

我有一个 SPA PWA React 应用。
它在移动设备上以独立模式安装和运行 (Android+Chrome)。

假设该应用程序列出了人员，然后当您单击某个人时，它会使用 /person 路线显示详细信息。

现在，我从服务器发送推送通知，并在附加到应用程序的服务工作者中接收它们。通知是关于一个人的，我想在用户点击通知时打开那个人的详细信息。

问题是：

如何从服务人员激活我的应用程序上的 /person 路由
并传递数据（例如人员 ID 或人员对象）
无需重新加载应用程序

据我了解，从服务工作者 notificationclick 事件处理程序我可以：

专注于应用程序（但我如何传递数据并激活路由）
打开 url（但 /person 不是物理路线，无论哪种方式 - 我都想避免刷新页面）

Answer 1

您可以为向用户显示的通知监听 click 事件。在处理程序中，您可以使用推送事件为来自您的服务器的相应人员打开URL。

notification.onclick = function(event) {
  event.preventDefault(); 

  // suppose you have an url property in the data
  if (event.notification.data.url) {

      self.clients.openWindow(event.notification.data.url);
  }
}

检查这些链接：

Answer 2

回答我自己的问题：我已经使用 IndexedDB（不能使用 localStorage，因为它是同步的）在 SW 和 PWA 之间进行通信，尽管我对此不太满意。

我的服务工作者代码大概是这样的（我正在使用 idb 库）：

self.addEventListener('notificationclick', function(event) {
    const notif = event.notification;
    notif.close();
    if (notif.data) {
        let db;
        let p = idb.openDB('my-store', 1, {
            upgrade(db) {
                db.createObjectStore(OBJSTORENAME, {
                    keyPath: 'id'
                });
            }
        }).then(function(idb) {
            db = idb;
            return db.clear(OBJSTORENAME);
        }).then(function(rv) {            
            return db.put(OBJSTORENAME, notif.data);
        }).then(function(res) {
            clients.openWindow('/');
        }).catch(function(err) {
            console.log("Error spawning notif", err);
        });
        event.waitUntil(p);
    }
});

然后，在我的 React 应用程序的根目录中，即在我的 AppNavBar 组件中，我总是检查是否有要显示的内容：

componentWillMount() {
    let self = this;
    let db;
    idb.openDB('my-store', 1)
    .then(function (idb) {
        db = idb;            
        return db.getAll(OBJSTORENAME);
    }).then(function (items) {            
        if (items && items.length) {
            axios.get(`/some-additional-info-optional/${items[0].id}`).then(res => {
                if (res.data && res.data.success) {
                    self.props.history.push({
                        pathname: '/details',
                        state: {
                            selectedObject: res.data.data[0]
                        }
                    });
                }
            });
            db.clear(OBJSTORENAME)
            .then()
            .catch(err => {
                console.log("error clearing ", OBJSTORENAME);
            });
        }
    }).catch(function (err) {
        console.log("Error", err);
    });
}

一直在玩弄 clients.openWindow('/?id=123'); 和 clients.openWindow('/#123'); 但那表现得很奇怪，有时应用程序会停止，所以我恢复到 IndexedDB 方法。（clients.postMessage 也可能是要走的路，尽管我不确定如何将其插入反应框架）

HTH 其他人，我仍在寻找更好的解决方案。

Answer 3

我的项目中也有类似的需求。使用您的 postMessage 提示，每次用户单击服务工作者通知时，我都能在我的组件上获得一个事件，然后将用户路由到所需的路径。

服务-worker.js

self.addEventListener("notificationclick", async event => {
    const notification = event.notification;

    notification.close();

    event.waitUntil(
        self.clients.matchAll({ type: "window" }).then(clientsArr => {
            if (clientsArr[0]) {
                clientsArr[0].focus();
                clientsArr[0].postMessage({
                    type: "NOTIFICATION_CLICK",
                    ticketId: notification.tag,
                });
            }
        })
    );
});

在你的 React 组件上，添加一个新的监听器：

useEffect(() => {
    if ("serviceWorker" in navigator) {
        navigator.serviceWorker.addEventListener("message", message => {
            if (message.data.type === "NOTIFICATION_CLICK") {
                history.push(`/tickets/${message.data.ticketId}`);
            }
        });
    }
}, [history]);

如何激活反应路线并从服务工作者传递数据？

How to activate a react route and pass data from the service worker?

single-page-application

reactjs

react-router

service-worker

progressive-web-apps