요구 사항
- HTTPS 웹사이트: 웹 푸시는 HTTP 또는 시크릿/비공개 모드에서 작동하지 않습니다.
- 서버 액세스: 서비스 워커 파일을 사이트에 업로드해야 합니다.
- 단일 출처: 웹 푸시는 동일 출처 정책을 따릅니다. 여러 출처(도메인/하위 도메인)가 있는 경우 여러 OneSignal 앱이 필요합니다(출처당 하나). 이 브라우저 제한을 준수하려면:
- 구독을 위해 트래픽을 단일 출처로 리디렉션합니다.
- 출처당 하나씩 여러 OneSignal 앱을 만듭니다.
OneSignal 앱 및 플랫폼 구성
OneSignal 대시보드에서:- Settings > Push & In-App > Web으로 이동합니다.
- Custom Code 통합 유형을 선택합니다.
사이트 설정
사이트 세부 정보를 추가합니다:- Site Name: 사이트 이름 및 기본 알림 제목.
- Site URL: 사이트의 정확한 출처(예:
https://yourdomain.com). 사이트가 그렇게 구성되지 않은 경우www.사용을 피하세요. 여러 출처가 있는 경우 요구 사항을 참조하세요. - Auto Resubscribe: 사용자가 브라우저 데이터를 지운 후 사이트에 돌아올 때 자동으로 재구독하려면 이것을 활성화합니다(새 권한 프롬프트 불필요).
- Default Icon URL: 알림 및 프롬프트에 표시되는 정사각형
256x256pxPNG 또는 JPG 이미지를 업로드합니다. 설정하지 않으면 기본값으로 벨 아이콘이 사용됩니다.

OneSignal 대시보드의 웹 설정
로컬 테스트
localhost에서 테스트하려면 프로덕션 앱과 별도의 OneSignal 앱을 사용하고init 옵션에 allowLocalhostAsSecureOrigin: true를 추가합니다.
자체 서명된 인증서로 HTTPS에서 localhost를 테스트하는 경우 --allow-insecure-localhost를 사용하여 Chrome에 잘못된 인증서를 무시하도록 지시해야 할 수 있습니다. Firefox와 Safari는 보안 인증서에 예외를 추가하는 기본 제공 메커니즘을 제공합니다.
Safari 웹 푸시 인증서(선택 사항)
OneSignal은 무료로 Safari 인증서를 자동으로 제공합니다. 사용해야 하는 기존 Safari 웹 푸시 인증서가 있는 경우에만 이를 활성화하세요.
기존 인증서용 Safari 인증서 업로드 옵션
Safari Web .p12 Push Certificate를 업로드하고 비밀번호를 입력하세요.
Save를 클릭하여 계속합니다.
서비스 워커 파일 업로드
웹 푸시 구성의 다음 페이지에서OneSignalSDKWorker.js 서비스 워커 파일이 제공됩니다.
Web SDK는 기본적으로 사이트 루트에서 이 파일을 찾습니다(예: https://yourdomain.com/OneSignalSDKWorker.js). 코드에서 파일 위치, 이름 및 범위를 변경할 수 있습니다.
OneSignal 서비스 워커
사이트에 코드 추가
이 코드를 웹사이트의<head> 섹션에 추가합니다. 다음을 교체합니다:
YOUR_ONESIGNAL_APP_ID를 OneSignal 대시보드의 실제 앱 ID로YOUR_SAFARI_WEB_ID를 OneSignal 대시보드의 실제 Safari Web ID로
iOS 웹 푸시 지원
Apple은 iOS 16.4+를 실행하는 iPhone 및 iPad에서 웹 푸시 알림 지원을 시작했습니다. 지원되는 브라우저에서 방문하면 웹 푸시가 그냥 “작동하는” Android 기기와 달리, Apple은manifest.json 파일 및 사용자가 사이트를 홈 화면에 추가하는 작업 등 몇 가지 추가 요구 사항을 추가했습니다.
iOS 웹 푸시 설정
manifest.json 파일을 추가하고 사용자가 사이트를 홈 화면에 추가하도록 안내합니다.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
- Go to Audience > Subscriptions.
- You should see a new entry with the status Subscribed.

Dashboard showing subscription with 'Subscribed' status
Set up test users
test users are helpful for testing a push notification before sending a message.Add to Test Users.

Adding a device to Test Users
Name your subscription.
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
Send test push via API
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 receipt.

Expanded push notification with image on Chrome macOS
Check for confirmed receipt.
푸시 알림 메시지 보고서
support@onesignal.com with the following:
- The API request and response (copy-paste into a
.txtfile) - Your Subscription ID
- Your website URL with the OneSignal code
User identification
The previous section covered creating web push Subscriptions. This section expands to identifying Users across all their subscriptions (including push, email, and SMS) using the OneSignal SDK. It covers 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 the SDK’slogin method each time a user is identified by your app.
Add Tags
Tags are key-value pairs of string data you can use to store user properties (likeusername, 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 the SDK’s 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
Add email and/or SMS subscriptions
The OneSignal SDK creates web push subscriptions automatically when users opt in. You can also reach users through email and SMS channels by creating the corresponding subscriptions.- Use the
addEmailmethod to create email subscriptions. - Use the
addSmsmethod to create SMS subscriptions.

A user profile with push, email, and SMS subscriptions unified by External ID
- 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.
Privacy & user consent
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.
SDK가 수집하는 데이터
개인 데이터 처리
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.