草庐IT

关于 reactjs：如何激活 react 路由并从 service worker 传递数据？

codeneng 2023-03-28 原文

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

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

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

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

问题是：

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

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

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

  • 一个最小的，可重现的例子在这里会有所帮助

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

service-worker.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 组件上，添加一个新的监听器：

1
2
3
4
5
6
7
8
9
useEffect(() => {
    if ("serviceWorker" in navigator) {
        navigator.serviceWorker.addEventListener("message", message => {
            if (message.data.type ==="NOTIFICATION_CLICK") {
                history.push(`/tickets/${message.data.ticketId}`);
            }
        });
    }
}, [history]);

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

这大概是我的 service worker 代码的样子(我正在使用 idb 库)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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 组件中，我总是检查是否有要显示的内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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 也可能是要走的路，尽管我不确定如何将其插入反应框架)

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

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

1
2
3
4
5
6
7
8
9
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);
  }
}

检查这些链接：

  • https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerGlobalScope/notificationclick_event
  • https://developer.mozilla.org/en-US/docs/Web/API/Clients/openWindow

  • 我知道，这在我的问题中都有说明，但是如何将其与反应路由相匹配并避免刷新 SPA？

传递reactjsnbspbrsectionprogressive-web-appsreact-routerservice-workersingle-page-application

有关关于 reactjs：如何激活 react 路由并从 service worker 传递数据？的更多相关文章

  1. ruby - 如何使用 Nokogiri 的 xpath 和 at_xpath 方法 - 2

    我正在学习如何使用Nokogiri，根据这段代码我遇到了一些问题:require'rubygems'require'mechanize'post_agent=WWW::Mechanize.newpost_page=post_agent.get('http://www.vbulletin.org/forum/showthread.php?t=230708')puts"\nabsolutepathwithtbodygivesnil"putspost_page.parser.xpath('/html/body/div/div/div/div/div/table/tbody/tr/td/div

  2. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  3. python - 如何使用 Ruby 或 Python 创建一系列高音调和低音调的蜂鸣声？ - 2

    关闭。这个问题是opinion-based.它目前不接受答案。想要改进这个问题？更新问题，以便editingthispost可以用事实和引用来回答它.关闭4年前。Improvethisquestion我想在固定时间创建一系列低音和高音调的哔哔声。例如:在150毫秒时发出高音调的蜂鸣声在151毫秒时发出低音调的蜂鸣声200毫秒时发出低音调的蜂鸣声250毫秒的高音调蜂鸣声有没有办法在Ruby或Python中做到这一点？我真的不在乎输出编码是什么(.wav、.mp3、.ogg等等)，但我确实想创建一个输出文件。

  4. ruby-on-rails - Rails 3 中的多个路由文件 - 2

    Rails2.3可以选择随时使用RouteSet#add_configuration_file添加更多路由。是否可以在Rails3项目中做同样的事情？ 最佳答案 在config/application.rb中:config.paths.config.routes在Rails3.2(也可能是Rails3.1)中，使用:config.paths["config/routes"] 关于ruby-on-rails-Rails3中的多个路由文件，我们在StackOverflow上找到一个类似的问题

  5. ruby-on-rails - 如何验证 update_all 是否实际在 Rails 中更新 - 2

    给定这段代码defcreate@upgrades=User.update_all(["role=?","upgraded"],:id=>params[:upgrade])redirect_toadmin_upgrades_path,:notice=>"Successfullyupgradeduser."end我如何在该操作中实际验证它们是否已保存或未重定向到适当的页面和消息？ 最佳答案 在Rails3中，update_all不返回任何有意义的信息，除了已更新的记录数(这可能取决于您的DBMS是否返回该信息)。http://ar.ru

  6. ruby-on-rails - 'compass watch' 是如何工作的/它是如何与 rails 一起使用的 - 2

    我在我的项目目录中完成了compasscreate.和compassinitrails。几个问题:我已将我的.sass文件放在public/stylesheets中。这是放置它们的正确位置吗？当我运行compasswatch时，它不会自动编译这些.sass文件。我必须手动指定文件:compasswatchpublic/stylesheets/myfile.sass等。如何让它自动运行？文件ie.css、print.css和screen.css已放在stylesheets/compiled。如何在编译后不让它们重新出现的情况下删除它们？我自己编译的.sass文件编译成compiled/t

  7. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  8. ruby - 解析 RDFa、微数据等的最佳方式是什么，使用统一的模式/词汇(例如 schema.org)存储和显示信息 - 2

    我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i

  9. ruby - 如何指定 Rack 处理程序 - 2

    Rackup通过Rack的默认处理程序成功运行任何Rack应用程序。例如:classRackAppdefcall(environment)['200',{'Content-Type'=>'text/html'},["Helloworld"]]endendrunRackApp.new但是当最后一行更改为使用Rack的内置CGI处理程序时，rackup给出“NoMethodErrorat/undefinedmethod`call'fornil:NilClass”:Rack::Handler::CGI.runRackApp.newRack的其他内置处理程序也提出了同样的反对意见。例如Rack

  10. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

随机推荐