Learn how to integrate OneSignal push notifications with your ReactJS or NextJS web application, including initialization, service worker setup, and TypeScript support.
YOUR_APP_ID
with your OneSignal app ID found in Keys & IDs.
init
parameters.
OneSignalSDKWorker.js
file must be publicly accessible. You can put it in your public
directory, top-level root, or a subdirectory. However, if you are placing the file in a subdirectory and/or have another service worker for your site, then make sure to specify the path. See OneSignal Service Worker for details.
Option | Description |
---|---|
serviceWorkerParam | Scope controlled by the OneSignal worker. Recommendation: Use a custom sub-path (e.g., "/onesignal/" ). |
serviceWorkerPath | Path to your hosted OneSignal service worker file (e.g., "onesignal/OneSignalSDKWorker.js" ). Must be publicly accessible. |
/OneSignalSDKWorker.js
/onesignal/OneSignalSDKWorker.js
as set in the previous step.<React.StrictMode>
causing effects to run twice in development. To resolve it, remove <React.StrictMode>
from your root component during development.Launch your site on a test device.
Web push native permission prompt
Check your OneSignal dashboard
Dashboard showing subscription with 'Subscribed' status
Add to Test Subscriptions.
Adding a device to Test Subscriptions
Name your subscription.
Dashboard showing the 'Name your subscription' field
Create a test users segment.
Name the segment.
Test Users
(the name is important because it will be used later).Add the Test Users filter and click Create Segment.
Creating a 'Test Users' segment with the Test Users filter
Get your App API Key and App ID.
Update the provided code.
YOUR_APP_API_KEY
and YOUR_APP_ID
in the code below with your actual keys. This code uses the Test Users
segment we created earlier.Run the code.
Check images and confirmed delivery.
Expanded push notification with image on Chrome macOS
Check for confirmed delivery.
Delivery stats showing confirmed delivery
Confirmed delivery at the device level in Audience Activity
support@onesignal.com
with the following information:.txt
filelogin
method each time they are identified by your app.
username
, role
, or preferences) and events (like purchase_date
, game_level
, or user interactions). Tags power advanced Message Personalization and Segmentation allowing for more advanced use cases.
Set tags with our SDK addTag
and addTags
methods as events occur in your app.
In this example, the user reached level 6 identifiable by the tag called current_level
set to a value of 6
.
A user profile in OneSignal with a tag called "current_level" set to "6"
Segment editor showing a segment targeting users with a current_level value of greater than 4 and less than 10
Screenshot showing a push notification targeting the Level 5-10 segment with a personalized message
addEmail
method to create email subscriptions.addSms
method to create SMS subscriptions.A user profile with push, email, and SMS subscriptions unified by External ID
setConsentRequired(true)
: Prevents data collection until consent is given.setConsentGiven(true)
: Enables data collection once consent is granted.support@onesignal.com
Please include: