Angular 웹 SDK 설정

개요

이 가이드는 onesignal-ngx 패키지를 사용하여 Angular 애플리케이션에서 푸시 알림을 설정하는 방법을 설명하며, 설치부터 구성 및 서비스 워커 관리까지 모든 것을 다룹니다.

요구 사항

구성된 OneSignal 앱 및 플랫폼. 시작하려면 웹 푸시 설정을 참조하세요.

설치

선호하는 패키지 관리자를 사용하여 onesignal-ngx 패키지를 설치합니다:

npm install --save onesignal-ngx

초기화

루트 구성 요소에서 OneSignal 서비스를 가져오고 초기화합니다:

import { OneSignal } from 'onesignal-ngx';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private oneSignal: OneSignal) {
    this.oneSignal.init({
      appId: 'YOUR-ONESIGNAL-APP-ID',
    });
  }
}

초기화 대기

init()에서 반환된 프로미스를 두 가지 방법으로 처리할 수 있습니다:

// 옵션 1: async/await
await this.oneSignal.init({ appId: 'YOUR-APP-ID' });
// 다른 로직 진행

// 옵션 2: .then()
this.oneSignal.init({ appId: 'YOUR-APP-ID' }).then(() => {
  // OneSignal API와 안전하게 상호 작용
});

init 옵션 사용자 지정

추가 init 매개변수로 초기화를 사용자 지정할 수 있습니다.

서비스 워커 설정

Angular 자체 서비스 워커(PWA 설정에 사용됨)와의 충돌을 방지하려면 OneSignal 서비스 워커에 대한 고유한 범위 및 경로를 지정합니다. 아직 하지 않았다면 사이트에 추가할 OneSignal 서비스 워커 파일을 다운로드해야 합니다. OneSignalSDKWorker.js 파일은 공개적으로 액세스할 수 있어야 합니다. public 디렉터리, 최상위 루트 또는 하위 디렉터리에 넣을 수 있습니다. 그러나 파일을 하위 디렉터리에 배치하거나 사이트에 다른 서비스 워커가 있는 경우 경로를 지정해야 합니다. 자세한 내용은 OneSignal 서비스 워커를 참조하세요.

옵션	설명
`serviceWorkerParam`	OneSignal 워커가 제어하는 범위입니다. 권장 사항: 사용자 지정 하위 경로(예: `"/onesignal/"`)를 사용합니다.
`serviceWorkerPath`	호스팅된 OneSignal 서비스 워커 파일의 경로(예: `"onesignal/OneSignalSDKWorker.js"`). 공개적으로 액세스할 수 있어야 합니다.

예제:

this.oneSignal.init({
  appId: 'YOUR-APP-ID',
  serviceWorkerParam: {
    scope: '/onesignal/'
  },
  serviceWorkerPath: 'onesignal/OneSignalSDKWorker.js'
});

워커 호스팅

공개 루트(기본값): /OneSignalSDKWorker.js
사용자 지정 폴더(권장): 이전 단계에서 설정한 것처럼 예: /onesignal/OneSignalSDKWorker.js.

서비스 워커 호스팅 확인

브라우저에서 경로를 방문하여 액세스할 수 있는지 확인합니다. 루트를 사용한 경우:

https://your-site.com/OneSignalSDKWorker.js

예제 경로를 사용하는 경우:

https://your-site.com/onesignal/OneSignalSDKWorker.js

유효한 JavaScript를 반환해야 합니다.

Angular CLI 사용자에게 중요

파일이 제공되지 않는 경우 angular.json의 assets 배열에 나열되어 있는지 확인하세요:

json

"assets": [
  "src/assets",
  "onesignal/OneSignalSDKWorker.js"
]

중요 사항

개발 중 중복 초기화 방지
- 개발 환경에서 테스트할 때 OneSignal SDK가 두 번 초기화되어 콘솔 오류가 발생할 수 있습니다.
- 이는 <React.StrictMode>가 개발 중에 효과를 두 번 실행하기 때문에 발생합니다. 이를 해결하려면 개발 중에 루트 구성 요소에서 <React.StrictMode>를 제거하세요.

Strict 모드는 개발에만 영향을 미칩니다. 프로덕션 빌드에는 영향을 미치지 않습니다.

Testing the OneSignal SDK integration

This guide helps you verify that your OneSignal SDK integration is working correctly by testing push notifications and subscription registration.

Check web push subscriptions

Launch your site on a test device.

Use Chrome, Firefox, Edge, or Safari while testing.
Do not use Incognito or private browsing mode. Users cannot subscribe to push notifications in these modes.
The prompts should appear based on your permission prompts configuration.
Click Allow on the native prompt to subscribe to push notifications.

Web push native permission prompt

Check your OneSignal dashboard

Check the OneSignal dashboard:

Go to Audience > Subscriptions.
You should see a new entry with the status Subscribed.

Dashboard showing subscription with 'Subscribed' status

You have successfully created a web push subscription. Web push subscriptions are created when users first subscribe to push notifications on your site.

Set up test subscriptions

Test subscriptions are helpful for testing a push notification before sending a message.

Add to Test Subscriptions.

In the dashboard, next to the subscription, click the Options (three dots) button and select Add to Test Subscriptions.

Adding a device to Test Subscriptions

Name your subscription.

Name the subscription so you can easily identify your device later in the Test Subscriptions tab.

Dashboard showing the 'Name your subscription' field

Create a test users segment.

Go to Audience > Segments > New Segment.

Name the 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

You have successfully created a segment of test users. We can now test sending messages to this individual device and groups of test users.

Send test push via API

Get your App API Key and App ID.

In your OneSignal dashboard, go to Settings > Keys & IDs.

Update the provided code.

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

curl -X \
POST --url 'https://api.onesignal.com/notifications' \
 --header 'content-type: application/json; charset=utf-8' \
 --header 'authorization: Key YOUR_APP_API_KEY' \
 --data \
 '{
  "app_id": "YOUR_APP_ID",
  "target_channel": "push",
  "name": "Testing basic setup",
  "headings": {
  	"en": "👋"
  },
  "contents": {
    "en": "Hello world!"
  },
  "included_segments": [
    "Test Users"
  ],
  "chrome_web_image": "https://avatars.githubusercontent.com/u/11823027?s=200&v=4"
}'

Run the code.

Run the code in your terminal.

Check images and confirmed delivery.

If all setup steps were completed successfully, the test subscriptions should receive a notification.

Only Chrome supports images. Images will appear small in the collapsed notification view. Expand the notification to see the full image.

Expanded push notification with image on Chrome macOS

Check for confirmed delivery.

In your dashboard, go to Delivery > Sent Messages, then click the message to view stats.You should see the confirmed stat, meaning the device received the push.

Safari does not support Confirmed Delivery.

Delivery stats showing confirmed delivery

If you’re on a Professional plan or higher, scroll to Audience Activity to see subscription-level confirmation:

Confirmed delivery at the device level in Audience Activity

You have successfully sent a notification via our API to a segment.

Need help? Contact support@onesignal.com with the following information:

Copy-paste the API request and response into a .txt file
Your Subscription ID
Your website URL with the OneSignal code

We’ll be happy to help!

User identification

Previously, we demonstrated how to create web push Subscriptions. Now we’ll expand to identifying Users across all their subscriptions (including push, email, and SMS) using the OneSignal SDK. We’ll cover External IDs, tags, multi-channel subscriptions, privacy, and event tracking to help you unify and engage users across platforms.

Assign External ID

Use an External ID to identify users consistently across devices, email addresses, and phone numbers using your backend’s user identifier. This ensures your messaging stays unified across channels and 3rd party systems (especially important for Integrations). Set the External ID with our SDK’s login method each time they are identified by your app.

OneSignal generates unique read-only IDs for subscriptions (Subscription ID) and users (OneSignal ID).As users download your app on different devices, subscribe to your website, and/or provide you email addresses and phone numbers outside of your app, new subscriptions will be created.Setting the External ID via our SDK is highly recommended to identify users across all their subscriptions, regardless of how they are created.

Add data tags

Tags are key-value pairs of string data you can use to store user properties (like 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"

We can create a segment of users that have a level of between 5 and 10, and use that to send targeted and personalized messages:

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

Add email and/or SMS subscriptions

Earlier we saw how our SDK creates web push subscriptions to send push. You can also reach users through emails and SMS channels by creating the corresponding subscriptions.

Use the addEmail method to create email subscriptions.
Use the addSms method to create SMS subscriptions.

If the email address and/or phone number already exist in the OneSignal app, the SDK will add it to the existing user, it will not create duplicates. You can view unified users via Audience > Users in the dashboard or with the View user API.

A user profile with push, email, and SMS subscriptions unified by External ID

Best practices for multi-channel communication

Obtain explicit consent before adding email or SMS subscriptions.
Explain the benefits of each communication channel to users.
Provide channel preferences so users can select which channels they prefer.

To control when OneSignal collects user data, use the SDK’s consent gating methods:

setConsentRequired(true): Prevents data collection until consent is given.
setConsentGiven(true): Enables data collection once consent is granted.

See our Privacy & security docs for more on:

Listen to push, user, and in-app events

Use SDK listeners to react to user actions and state changes. The SDK provides several event listeners for you to hook into. See our SDK reference guide for more details.

Push notification events

Click event listener: Detect when a notification is tapped.
Foreground lifecycle listener: Control how notifications behave in foreground.

User state changes

User state change event listener: Detect when the External ID is set.
Permission observer: Track the user’s specific interaction with the native push permission prompt.
Push subscription change observer: Track when the push subscription status changes.

Advanced setup & capabilities

Explore more capabilities to enhance your integration:

Web SDK setup & reference

Make sure you’ve enabled all key features by reviewing the Web push setup guide. For full details on available methods and configuration options, visit the Web SDK reference.

Congratulations! You’ve successfully completed the Web SDK setup guide.

도움이 필요하신가요?지원 팀과 채팅하거나 support@onesignal.com으로 이메일을 보내주세요.다음을 포함해 주세요:

발생한 문제의 세부 정보 및 재현 단계(가능한 경우)
OneSignal 앱 ID
External ID 또는 Subscription ID(해당하는 경우)
OneSignal 대시보드에서 테스트한 메시지의 URL(해당하는 경우)
관련 로그 또는 오류 메시지

기꺼이 도와드리겠습니다!

개발자 문서

모바일 SDKs

웹 SDKs

실시간 활동

데스크탑 & 워치 설정

레거시 SDK 참조

Angular 웹 SDK 설정

개요

요구 사항

설치

초기화

초기화 대기

init 옵션 사용자 지정

서비스 워커 설정

워커 호스팅

서비스 워커 호스팅 확인

Angular CLI 사용자에게 중요

중요 사항

Testing the OneSignal SDK integration

Check web push subscriptions

Set up test subscriptions

Send test push via API

User identification

Assign External ID

Add data tags

Add email and/or SMS subscriptions

Listen to push, user, and in-app events

Push notification events

User state changes

Advanced setup & capabilities

Web SDK setup & reference

개발자 문서

모바일 SDKs

웹 SDKs

실시간 활동

데스크탑 & 워치 설정

레거시 SDK 참조

​개요

​요구 사항

​설치

​초기화

​초기화 대기

​init 옵션 사용자 지정

​서비스 워커 설정

​워커 호스팅

​서비스 워커 호스팅 확인

​Angular CLI 사용자에게 중요

​중요 사항

​Testing the OneSignal SDK integration

​Check web push subscriptions

​Set up test subscriptions

​Send test push via API

​User identification

​Assign External ID

​Add data tags

​Add email and/or SMS subscriptions

​Privacy & user consent

​Listen to push, user, and in-app events

​Push notification events

​User state changes

​Advanced setup & capabilities

​Web SDK setup & reference

개요

요구 사항

설치

초기화

초기화 대기

init 옵션 사용자 지정

서비스 워커 설정

워커 호스팅

서비스 워커 호스팅 확인

Angular CLI 사용자에게 중요

중요 사항

Testing the OneSignal SDK integration

Check web push subscriptions

Set up test subscriptions

Send test push via API

User identification

Assign External ID

Add data tags

Add email and/or SMS subscriptions

Privacy & user consent

Listen to push, user, and in-app events

Push notification events

User state changes

Advanced setup & capabilities

Web SDK setup & reference