Novu•6mo ago

Next.js webapp

Hi, We are running a web applications with Next.js as front end and RoR as backend. There are no Android or iOS apps at the moment and we wont develop it. We want to send native push notifications that lands on users lockscreens on their devices - obviously after consent and actions from the user. Can Novu help with that?

5 Replies

Ask Inkeep•6mo ago

Hi @eriikn, I'm an AI assistant for Novu. While a team member reviews this question, I'll see if I can find relevant sources for your question. ----------------------------- While I generate an answer, here are some sources that might be helpful: * Push Channel Introduction * How to send push notifications in an Android app (react native) with FCM and Novu * How to send web push notifications with FCM and Novu * How to send push notifications to Flutter apps (Android & iOS) with FCM using Novu ----------------------------- Answer Yes, Novu can help you send push notifications for your Next.js web application, even without Android or iOS native apps. Let me explain how you can achieve this using Novu: 1. Web Push Notifications: Novu supports sending web push notifications that can appear on users' devices, including their lock screens, after they've given consent (1) . This is possible through the Push channel in Novu, which supports various providers including web push services . 2. Next.js Integration: Novu provides a seamless integration with Next.js applications (2) . You can add a Novu API Endpoint to your Next.js app, which will allow you to trigger notifications . 3. Setting up Push Channel: To send push notifications, you'll need to add a push channel provider in the Novu integration store (1) . For web push, you might consider using a provider like Firebase Cloud Messaging (FCM) which supports web push notifications (3) . 4. Workflow Creation: You'll need to create a workflow in Novu that includes a push step (1) . This workflow will define the content and behavior of your push notifications (2) . 5. User Consent and Device Tokens: It's crucial to obtain user consent before sending push notifications. You'll need to implement a mechanism to request permission and obtain device tokens from your users' browsers (4) (3) . These tokens should be stored in the subscriber profile in Novu (1) . 6. Triggering Notifications: Once set up, you can trigger notifications from your Next.js application using the Novu API (2) . This can be done in response to events in your application or based on certain conditions. Here's a basic example of how you might set up the Novu endpoint in your Next.js app:

Ask Inkeep•6mo ago

import { serve } from "@novu/framework/next";
import { myWorkflow } from "../../novu/workflows";
export const { GET, POST, PUT, OPTIONS } = serve({ workflows: [myWorkflow] });

import { serve } from "@novu/framework/next";
import { myWorkflow } from "../../novu/workflows";
export const { GET, POST, PUT, OPTIONS } = serve({ workflows: [myWorkflow] });

Remember, you'll need to handle user consent, token management, and integrate with a web push service (like FCM) to make this work effectively (4) (3) . The exact implementation details may vary based on your specific requirements and the web push service you choose.

Sources [1] Push Channel Introduction [2] How to send notifications with Next.js and Novu Framework [3] How to send web push notifications with FCM and Novu [4] How to send push notifications in an Android app (react native) with FCM and Novu

Ask Inkeep•6mo ago

Feel free to tag @Ask Inkeep with additional questions. Got it. Tagging @Support for additional help.

eriiknOP•6mo ago

Hey, thanks for that. Its just a bit unclear what exactly that is needed... thank you! We seve like 8-10 million users monthly, so could be a new channel for us with the right partner and implementation.

Pawan Jain•6mo ago

@eriikn to send fcm push notification these are steps:- 1. Go to integrations store, add fcm integration, make it active with correct credentials as per our docs 2. Configure your client webapp to manage push notification permission, display and fcm token generation. You can follow this guide 3. Store the deviceToken for subscriber. 4. create novu worklfow add use push step 5. trigger the worklfow to same subscriber as step 3

Gaming

Programming

Next.js webapp