Web SDK - 사용자 지정 코드 설정

• Angular 설정
• React JS 설정
• Vue JS 설정

​

요구 사항

• HTTPS 웹사이트: 웹 푸시는 HTTP 또는 시크릿/비공개 모드에서 작동하지 않습니다.
• 서버 액세스: 서비스 워커 파일을 사이트에 업로드해야 합니다.
• 단일 출처: 웹 푸시는 동일 출처 정책을 따릅니다. 여러 출처(도메인/하위 도메인)가 있는 경우 여러 OneSignal 앱이 필요합니다(출처당 하나). 이 브라우저 제한을 준수하려면:
  • 구독을 위해 트래픽을 단일 출처로 리디렉션합니다.
  • 출처당 하나씩 여러 OneSignal 앱을 만듭니다.

​

OneSignal 앱 및 플랫폼 구성

• Settings > Push & In-App > Web으로 이동합니다.
• Custom Code 통합 유형을 선택합니다.

​

사이트 설정

• Site Name: 사이트 이름 및 기본 알림 제목.
• Site URL: 사이트의 정확한 출처(예: https://yourdomain.com). 사이트가 그렇게 구성되지 않은 경우 www. 사용을 피하세요. 여러 출처가 있는 경우 요구 사항을 참조하세요.
• Auto Resubscribe: 사용자가 브라우저 데이터를 지운 후 사이트에 돌아올 때 자동으로 재구독하려면 이것을 활성화합니다(새 권한 프롬프트 불필요).
• Default Icon URL: 알림 및 프롬프트에 표시되는 정사각형 256x256px PNG 또는 JPG 이미지를 업로드합니다. 설정하지 않으면 기본값으로 벨 아이콘이 사용됩니다.

​

로컬 테스트

  <script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
  <script>
    window.OneSignalDeferred = window.OneSignalDeferred || [];
    OneSignalDeferred.push(function(OneSignal) {
      OneSignal.init({
        appId: "YOUR_OS_APP_ID",
        allowLocalhostAsSecureOrigin: true,
      });
    });
  </script>

​

Safari 웹 푸시 인증서(선택 사항)

​

서비스 워커 파일 업로드

​

사이트에 코드 추가

• YOUR_ONESIGNAL_APP_ID를 OneSignal 대시보드의 실제 앱 ID로
• YOUR_SAFARI_WEB_ID를 OneSignal 대시보드의 실제 Safari Web ID로

<script src="https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.page.js" defer></script>
<script>
  window.OneSignalDeferred = window.OneSignalDeferred || [];
  OneSignalDeferred.push(async function(OneSignal) {
    await OneSignal.init({
      appId: "YOUR_ONESIGNAL_APP_ID",
      safari_web_id: "YOUR_SAFARI_WEB_ID",
      notifyButton: {
        enable: true,
      },
    });
  });
</script>

​

iOS 웹 푸시 지원

​

Testing the OneSignal SDK integration

​

Check web push subscriptions

1

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.

2

Check your OneSignal dashboard

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

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

1

Add to Test Subscriptions.

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

2

Name your subscription.

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

3

Create a test users segment.

Go to Audience > Segments > New Segment.

4

Name the segment.

Name the segment Test Users (the name is important because it will be used later).

5

Add the Test Users filter and click Create Segment.

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

1

Get your App API Key and App ID.

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

2

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"
}'

3

Run the code.

Run the code in your terminal.

4

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.

5

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.

푸시 알림 메시지 보고서

푸시 알림의 전달, 클릭 및 전환 통계를 확인하세요.

• The API request and response (copy-paste into a .txt file)
• Your Subscription ID
• Your website URL with the OneSignal code

​

User identification

​

Assign External ID

​

Add Tags

​

Add email and/or SMS subscriptions

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

​

Privacy & user consent

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

​

Listen to push, user, and in-app events

​

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

​

Web SDK setup & reference

​

FAQ

​

웹 푸시 알림에 HTTPS가 필요한가요?

​

단일 페이지 애플리케이션(SPA)에서 이 설정을 사용할 수 있나요?

​

사용자가 브라우저 데이터를 지우면 어떻게 되나요?

​

관련 페이지