如何使用 NextJS 向我的 React 应用程序实现推送通知？

Question

• 我有一个使用 NextJS 的 React 应用程序，部署在 Vercel 上。
• 我想使用 OneSignal 发送通知

我的应用程序中有一个名为“提醒”的功能，它只是一个使用 Prisma ORM 的 MySQL 表。这是表架构：

model Tasks {
  id        Int      @id @default(autoincrement())
  name      String
  note      String?
  frequency String
  on        String
  lastDone  DateTime

  property   Property? @relation(fields: [propertyId], references: [id])
  propertyId String?
}

• 我已经设置了一个名为

  /api/property/tasks

  (POST) 的 API 端点，它返回当前任务列表
  • API 需要在正文中有一个令牌，该令牌通过名为

    sessionToken

    的 cookie 存储（永不过期）
  • 已根据

    nextDue

    和

    frequency

    值计算出名为

    on

    的变量。 （这会返回

    new Date()

    ）
• 使用 Service Workers 和 OneSignal API，如何让我的应用程序在设备时间等于

  nextDate

  时向用户设备发送通知，即使浏览器选项卡已关闭？
• Service Worker 将需要更新到新数据，以便在任务被删除或日期更新时发送正确的推送通知

谢谢！

编辑：我可以接受最好不使用 OneSignal API 的解决方案。

Answer 1

我猜您正在寻找服务工作者的两种功能（了解所有可用功能此处）：

1. 定期后台同步API
2. 通知API

您可以遵循 Microsoft 的这两个参考指南：

1. 使用定期后台同步 API 定期获取新鲜内容
2. 在操作中心显示通知

不要混淆推送 API 和通知 API。 您只是在寻找通知功能而不是推送。

Answer 2

我知道这已经晚了，但对于未来的任何人，我在这里都有一个有效的例子。它使用 web-push 库以及 next-pwa。

代码： https://github.com/david-randoll/push-notification-nextjs

现场演示： https://push-notification.davidrandoll.com/

一部 iPhone，您需要先 添加到主页 b4 才能正常工作。