Integrate OneSignal Web Push Notifications into your Angular application using the onesignal-ngx package. Learn how to install, configure, and troubleshoot service workers to deliver seamless push notifications.
onesignal-ngx
package, covering everything from installation to configuration and service worker management.
onesignal-ngx
package using your preferred package manager:
init()
in two ways:
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.angular.json
under the assets
array:
<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: