javascript - How do I implement Push notifications to my React application using NextJS? - Stack Overflow

admin管理员组

文章数量:1025322

• 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 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.

• javascript
• prisma
• onesignal

Share Improve this question Follow edited Oct 9, 2022 at 19:46 Manu G asked Oct 7, 2022 at 2:19 Manu GManu G 17355 silver badges1414 bronze badges 2

• You can try this dev.to/onesignal/… – Divyessh Commented Oct 10, 2022 at 19:09
• Hi! Thank you for your ment, however, the article you sent does not explain how to send push notifications directly from the app itself. My app needs to send push notifications automatically at a given time to users – Manu G Commented Oct 11, 2022 at 17:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4 +50

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.

I know this is late but for anyone in the future I have a working example here. it uses the web-push library along with next-pwa.

code: https://github./david-randoll/push-notification-nextjs

live demo: https://push-notification.davidrandoll./

One iPhones, you need to Add to Home first b4 it works.

• 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 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.

• javascript
• prisma
• onesignal

Share Improve this question Follow edited Oct 9, 2022 at 19:46 Manu G asked Oct 7, 2022 at 2:19 Manu GManu G 17355 silver badges1414 bronze badges 2

• You can try this dev.to/onesignal/… – Divyessh Commented Oct 10, 2022 at 19:09
• Hi! Thank you for your ment, however, the article you sent does not explain how to send push notifications directly from the app itself. My app needs to send push notifications automatically at a given time to users – Manu G Commented Oct 11, 2022 at 17:21

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4 +50

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.

I know this is late but for anyone in the future I have a working example here. it uses the web-push library along with next-pwa.

code: https://github./david-randoll/push-notification-nextjs

live demo: https://push-notification.davidrandoll./

One iPhones, you need to Add to Home first b4 it works.

本文标签： javascriptHow do I implement Push notifications to my React application using NextJSStack Overflow