How do I implement Push notifications to my React application using NextJS?

• I have a React application using NextJS, deployed on Vercel.
• I want to use OneSignal to send notifications

I have a certain feature in my app called "Reminders", which is just a MySQL table using the Prisma ORM. Here is the table schema:

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?
}

• I have already set up an API endpoint called /api/property/tasks (POST) which returns the current task list
  • The API requires a token in the body, which is stored via a cookie called sessionToken (which never expires)
  • A variable called nextDue is already calculated based on the frequency and on values. (This returns a new Date())
• Using Service Workers and the OneSignal API, how do I make my app send notifications to the user's device when the device's time is equal to nextDate, even if the browser tab is closed?
• The service worker will need to update to the new data to send the correct push notification in case the task gets deleted or the date gets updated

Thank you!

EDIT: I'm OK with a solution without using the OneSignal API preferably.

I guess you are looking for two capabilities of service workers (learn about all available capabilities here):

1. Periodic Background Sync API
2. Notifications API

You can follow these two reference guides by Microsoft:

1. Use the Periodic Background Sync API to regularly get fresh content
2. Display notifications in the action center

Do not confuse yourself between Push API & Notifications API. You are only looking for notification functionality not push.