Web SDK kurulumu - OneSignal

Genel bakış

Web push bildirimleri, kullanıcılarınıza gerçek zamanlı güncellemeler, hatırlatmalar ve kişiselleştirilmiş mesajlar göndermenize olanak tanır, etkileşim ve elde tutmayı artırır. OneSignal, tüm büyük tarayıcıları ve platformları destekler, bir kez yazmanıza ve Chrome, Firefox, Edge, Safari ve diğer desteklenen tarayıcılara teslim etmenize olanak tanır.

Gereksinimler

HTTPS web sitesi: Web push, HTTP’de veya gizli/özel modlarda çalışmaz.
Sunucu erişimi: Sitenize bir service worker dosyası yüklemeniz gerekecek.
Tek origin: Web push, Same-origin politikasını takip eder. Birden fazla origin’iniz varsa (alan adları/alt alan adları), birden fazla OneSignal uygulamasına ihtiyacınız olacaktır (origin başına bir tane). Bu tarayıcı sınırlamasına uymak için şunlardan birini yapabilirsiniz:
- Abonelikler için trafiği tek bir origin’e yönlendirin.
- Birden fazla OneSignal uygulaması oluşturun—origin başına bir tane.

Ekibiniz OneSignal ile zaten bir hesap oluşturduysa, uygulamayı kurabilmeniz için admin rolü olarak davet edilmenizi isteyin. Aksi takdirde, başlamak için onesignal.com’da ücretsiz bir hesap açın!

OneSignal uygulamanızı ve platformunuzu yapılandırın

OneSignal kontrol panelinde:

Ayarlar > Push & In-App > Web’e gidin.

OneSignal ayarlarınızda web platformunu etkinleştirin

Entegrasyon türünü seçin:

Tipik Site (önerilir)

Ek kodlama olmadan istemleri ve ayarları doğrudan OneSignal kontrol panelinden yönetin.

WordPress

Resmi eklentimizle WordPress kullanıyorsanız gereklidir.

Özel Kod

İstemler ve SDK yapılandırması üzerinde tam kontrol gerektiren geliştiriciler için.

Site kurulumu

Site ayrıntılarını ekleyin:

Site Adı: Sitenizin adı ve varsayılan bildirim başlığı.
Site URL’si: Sitenizin URL’si. Daha fazla ayrıntı için Site URL’sine bakın.
Otomatik Yeniden Abone Olma: Tarayıcı verilerini temizleyen kullanıcıları sitenize döndüklerinde otomatik olarak yeniden abone etmek için bunu etkinleştirin (yeni izin istemi gerekmez)
Varsayılan İkon URL’si: Bildirimlerde ve istemlerde görünen 256x256px kare PNG veya JPG resim yükleyin. Ayarlanmazsa, varsayılan ikon için bir zil kullanırız.

OneSignal kontrol panelinde web ayarları

Site URL

Sitenizin tam origin’ini girin, örneğin https://yourdomain.com. Siteniz bu şekilde yapılandırılmamışsa www. kullanmaktan kaçının. Birden fazla origin’iniz varsa:

Tek bir origin’e yönlendirin.
Veya origin başına bir OneSignal uygulaması kurun.

Yerel test

Web SDK’mız localhost ortamlarında test edilebilir. Localhost’ta test yapıyorsanız, üretim uygulamanızdan farklı bir OneSignal uygulaması kurmanızı öneririz.

Localhost yapılandırması

SITE URL’yi localhost ortam URL’nizle tam olarak eşleşecek şekilde ayarlayın. Yaygın bir localhost URL’si olmalıdır, örnekler:

http://localhost
https://localhost:3000
http://127.0.0.1
https://127.0.0.1:5000

Localhost’unuz HTTP kullanıyorsa, Test için HTTP localhost’u HTTPS olarak değerlendir’i seçin.Google Chrome, http://localhost ve http://127.0.0.1’i güvenli origin olarak değerlendirir, HTTP’de bile HTTPS entegrasyonlarına izin verir. Bu nedenle HTTPS localhost’ta diğer standart olmayan origin’leri test edemezsiniz.

OneSignal kontrol panelinde yerel test

OneSignal `init` seçeneklerinize `allowLocalhostAsSecureOrigin` ekleyin

OneSignal’i localhost sitenizde başlatırken, OneSignal init seçeneklerinize allowLocalhostAsSecureOrigin: true, ekleyin.Ek olarak, self-signed sertifika ile HTTPS üzerinde localhost’u test ediyorsanız, Chrome’dan test için geçersiz sertifikaları yok saymasını istemeniz gerekebilir: --allow-insecure-localhost. Firefox ve Safari, güvenlik sertifikaları için istisna eklemeye yönelik yerleşik mekanizmalar sağlar.

html

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

İzin istemi

Tipik site kurulumu, siz veya ekip üyelerinizin OneSignal kontrol panelinden istediğiniz zaman izin istemleri eklemesine, kaldırmasına ve güncellemesine olanak tanır.

İzin istemleri hakkında ayrıntılar için Web İzin İstemleri’ne bakın.

Hoş geldin bildirimi (isteğe bağlı)

Kullanıcılar push bildirimlerine abone olduklarında onlara gönderilecek bir hoş geldin bildirimi de ayarlayabilirsiniz.

Gelişmiş ayarlar

OneSignal kontrol panelinde yapılandırılabilir ek özellikler.

Webhook’lar

Web SDK’mız, belirli web push olaylarını seçtiğiniz bir URL’ye POST etme yeteneği sağlar. Web Push Webhook’ları, Olay Webhook’larından ayrı bir implementasyondur ve birbirinin yerine kullanılamaz.

Daha fazla ayrıntı için Web Push Webhook’ları’na bakın.

Service worker’lar

Web push yapılandırmasının sonraki sayfasında size OneSignalSDKWorker.js service worker dosyası sağlanacaktır. Web SDK’mız varsayılan olarak bu dosyayı sitenizin kök dizininde arar. Service worker dosya konumunu, adını ve/veya kapsamını değiştirmek istiyorsanız, bu ayarları buradan güncelleyebilirsiniz.

Service worker dosyalarının yolu, bu dosyaları koyacağınız dizinin yoludur.
Ana ve Güncelleyici service worker dosya adları sadece OneSignalSDKWorker.js olabilir veya bu dosyayı yeniden adlandırmak istiyorsanız. .js dosya uzantısı kullanmalıdır.
Service worker kayıt kapsamı, bu dosyanın çalışabileceği sayfalardır. Push bildirimleri için bu önemli değildir ve orijinal olarak service worker dosyasına daha fazla işlevsellik eklemek istediğiniz durumlar için tasarlanmıştır. Bunu konumunuzla aynı yol olarak ayarlamalısınız.

Service worker yapılandırması

Bu örnekle, dosyanın kodunun https://yourdomain.com/push/onesignal/OneSignalSDKWorker.js adresinde herkese açık olarak erişilebilir olduğunu görmelisiniz

Daha fazla ayrıntı için OneSignal Service Worker’a bakın.

Tıklama davranışı

Kullanıcıların bildirime tıkladıklarında ayarladığınız URL’ye nasıl gideceklerini kontrol edin.

Kullanıcılar sitenizi hiçbir tarayıcı sekmesinde açık tutmuyorsa ve onları sitenize götüren bir bildirime tıklarlarsa, tarayıcı yeni bir sekme açar ve bildirimin URL’sine gider.
Kullanıcılar sitenizi bir veya daha fazla tarayıcı sekmesinde açık tutuyorsa ve onları sitenize götüren bir bildirime tıklarlarsa, tarayıcının yapılandırabileceğiniz birkaç olası davranış şekli vardır:
- Exact Navigate (varsayılan) - Bildirimin tam URL’si (örneğin example.com/product) tarayıcının zaten açık olduğu bir sekmeyle eşleşiyorsa, tarayıcı o sekmede bildirimin URL’sine gider.
- Origin Navigate - Bildirimin origin’i (örneğin example.com) tarayıcının zaten açık olduğu bir sekmeyle eşleşiyorsa, tarayıcı o sekmede bildirimin URL’sine gider.
- Exact Focus - Bildirimin tam URL’si (örneğin example.com/product) tarayıcının zaten açık olduğu bir sekmeyle eşleşiyorsa, tarayıcı o sekmeye odaklanır, ancak sayfayı yenilemez.
- Origin Focus - Bildirimin origin’i (örneğin example.com) tarayıcının zaten açık olduğu bir sekmeyle eşleşiyorsa, tarayıcı o sekmeye odaklanır, ancak sayfayı yenilemez.

Kalıcılık

Varsayılan web push davranışı, Bildirim Merkezi’ne taşınmadan önce yaklaşık 5 saniye boyunca cihazda pop-up olarak görünmeleridir, burada işletim sistemi tarafından kaldırılmadan önce yaklaşık 1 hafta saklanırlar. Bazı cihazlar ve Chrome ve Edge sürümleri, bildirimleri ekranda daha uzun süre kalıcı hale getirmenize olanak tanır. Bu, bildirimin kullanıcı onunla etkileşime girene kadar ekranda kalacağı anlamına gelir. Bu kullanıcılarınızı rahatsız edebilir ve önerilmez. Ayrıca, kalıcılığı etkinleştirirseniz, karakter sayısını azaltarak bildirimlerin abonelere nasıl göründüğünü etkiler ve resimlerin ve düğmelerin nasıl görüntülendiğini etkileyebilir. Bunları değiştirdiğinizde, yalnızca güncellenmiş ayarlarla siteyi ziyaret eden aboneler için geçerli olurlar. Bu seçeneklerin değiştiğini görmüyorsanız, beklemeniz gerekecektir

Safari sertifikası (İsteğe bağlı)

OneSignal, Safari tarayıcılarıyla çalışmak için gerekli sertifikaları ek ücret ödemeden otomatik olarak sağlar. Zaten kendi Safari Web Push Sertifikalarınız varsa, Safari Web .p12 Push Certificate ve şifrenizi yüklemek için bu seçeneği açın.

Safari sertifika yapılandırması

Service worker dosyasını yükle

Yukarıda Gelişmiş ayarlar > Service worker’lar bölümünde kısaca tartışıldığı gibi, OneSignalSDKWorker.js Service Worker dosyasını sitenize ekleyeceğiz.

Service worker dosyası yükleme adımı

Gelişmiş ayarlar > Service worker’lar bölümünde Service worker dosyalarının yolunu ayarlamadıysanız, OneSignalSDKWorker.js dosyasını sitenizin üst düzey kök dizinine yerleştirmeniz gerekecektir. Aksi takdirde, onu ayarladığınız dizine yerleştirmeniz gerekecektir.

Seçenek 1. Sunucuda dosya oluştur ve kodu kopyala
Seçenek 2. Zip klasörünü indir ve yükle

OneSignalSDKWorker.js adlı yeni bir dosya oluşturun ve onu herkese açık yapın.
Aşağıdaki import ifadesini dosyaya kopyalayıp yapıştırın:

importScripts("https://cdn.onesignal.com/sdks/web/v16/OneSignalSDK.sw.js");

Dosya sunucunuzda olduktan sonra, çalıştığından emin olmak için aşağıdakileri kontrol edin:

Konumu doğrula

Dosyanın Gelişmiş ayarlar > Service worker’lar’da ayarlanan Service worker dosyalarının yolu ile aynı konumda olduğundan emin olun. Bu ayarları güncellemediyseniz, dosyayı kök dizininize koymuş olmalısınız. Örneğin:

https://yourdomain.com/OneSignalSDKWorker.js
https://yourdomain.com/some-subdirectory/OneSignalSDKWorker.js

Origin'inizde herkese açık olarak erişilebilir olmalı

OneSignalSDKWorker.js dosyası herkese açık olarak erişilebilir olmalı ve origin’inizde mevcut olmalıdır. CDN aracılığıyla barındırılamaz veya yönlendirme ile farklı bir origin’e yerleştirilemez.Dosyanın URL’sini ziyaret ettiğinizde, kodu görmelisiniz.

content-type: application/javascript ile sunulmalı

Bu bir javascript dosyasıdır ve bu şekilde sunulmalıdır. text/html content-type’ına sahip olamaz.

Ek sorularınız varsa veya farklı bir web push sağlayıcısından OneSignal’e geçiş yapıyorsanız, OneSignal Service Worker belgelerimizi gözden geçirmeniz önerilir.

Sitenize kod ekleyin

Artık SDK’mızı sitenize eklemeye hazırsınız. Sağlanan JavaScript SDK kodumuz herhangi bir sitede çalışmalıdır, ancak siteniz Angular, React JS veya Vue JS kullanılarak kurulduysa bu bağlantıları takip edin. OneSignal’i JavaScript SDK’mızla sitenizde başlatmak için, sağlanan kodu web sitenizin <head> etiketlerine kopyalayıp yapıştırın. Kontrol panelimiz aşağıdaki kodu sağlayacaktır ancak OneSignal uygulama ID’nizi içerir.

JavaScript

  <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",
      });
    });
  </script>

iOS web push desteği

Apple, iOS 16.4+ çalıştıran iPhone ve iPad’lerde web push bildirimlerini desteklemeye başladı. Desteklenen bir tarayıcıda ziyaret edildiği sürece web push’un “çalıştığı” Android cihazların aksine, Apple manifest.json dosyası ve kullanıcıların sitenizi ana ekranlarına eklemesi gibi birkaç gereksinim daha ekledi.

iOS Web Push Kurulumu

Gerekli manifest.json dosyasını ekleyin ve kullanıcılara sitenizi ana ekranlarına eklemeleri için rehberlik edin.

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.

Need help?Chat with our Support team or email support@onesignal.comPlease include:

Details of the issue you’re experiencing and steps to reproduce if available
Your OneSignal App ID
The External ID or Subscription ID if applicable
The URL to the message you tested in the OneSignal Dashboard if applicable
Any relevant logs or error messages

We’re happy to help!

Geliştirici Belgeleri

Mobil SDK'lar

Web SDK'lar

Gerçek Zamanlı Etkinlikler

Masaüstü & Watch Kurulumu

Eski SDK referansı

​Genel bakış

​Gereksinimler

​OneSignal uygulamanızı ve platformunuzu yapılandırın

Tipik Site (önerilir)

WordPress

Özel Kod

​Site kurulumu

​Site URL

​Yerel test

​OneSignal init seçeneklerinize allowLocalhostAsSecureOrigin ekleyin

​İzin istemi

​Hoş geldin bildirimi (isteğe bağlı)

​Gelişmiş ayarlar

​Webhook’lar

​Service worker’lar

​Tıklama davranışı

​Kalıcılık

​Safari sertifikası (İsteğe bağlı)

​Service worker dosyasını yükle

​Sitenize kod ekleyin

​iOS web push desteği

iOS Web Push Kurulumu

​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

Genel bakış

Gereksinimler

OneSignal uygulamanızı ve platformunuzu yapılandırın

Site kurulumu

Site URL

Yerel test

OneSignal `init` seçeneklerinize `allowLocalhostAsSecureOrigin` ekleyin

İzin istemi

Hoş geldin bildirimi (isteğe bağlı)

Gelişmiş ayarlar

Webhook’lar

Service worker’lar

Tıklama davranışı

Kalıcılık

Safari sertifikası (İsteğe bağlı)

Service worker dosyasını yükle

Sitenize kod ekleyin

iOS web push desteği

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