OneSignal Web SDK ile özel kod web push kurulumu

• Angular kurulumu
• React JS kurulumu
• Vue JS kurulumu

​

Gereksinimler

• HTTPS web sitesi: Web push, HTTP’de veya gizli/özel modlarda çalışmaz.
• Sunucu erişimi: Sitenize bir service worker dosyası yüklemeniz gerekecektir.
• Tek kaynak: Web push, Aynı kaynak politikasını takip eder. Birden fazla kaynağınız (alan adı/alt alan adı) varsa birden fazla OneSignal uygulamasına ihtiyacınız olacaktır (kaynak başına bir tane). Bu tarayıcı kısıtlamasına uymak için şunlardan birini yapabilirsiniz:
  • Abonelikler için trafiği tek bir kaynağa yönlendirin.
  • Kaynak başına bir tane olmak üzere birden fazla OneSignal uygulaması oluşturun.

​

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

• Settings > Push & In-App > Web bölümüne gidin.
• Custom Code entegrasyon türünü seçin.

​

Site kurulumu

• Site Name: Sitenizin adı ve varsayılan bildirim başlığı.
• Site URL: Sitenizin tam kaynağı, örn. https://yourdomain.com. Siteniz bu şekilde yapılandırılmamışsa www. kullanmaktan kaçının. Birden fazla kaynağınız varsa Gereksinimlere bakın.
• Auto Resubscribe: Kullanıcılar tarayıcı verilerini temizledikten sonra sitenize döndüklerinde otomatik olarak yeniden abone olmak için bunu etkinleştirin (yeni izin istemi gerekmez).
• Default Icon URL: Bildirimlerde ve istemlerde görünen kare 256×256 PNG, JPG veya animasyonsuz GIF yükleyin. Ayarlanmazsa varsayılan olarak bir zil simgesi kullanılır. Bkz. Bildirim simgeleri.

​

Yerel test

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

​

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

​

Service worker dosyasını yükleyin

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

​

Siteye kod ekleyin

<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",
      notifyButton: {
        enable: true,
      },
    });
  });
</script>

<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",
      serviceWorkerPath: "push/onesignal/OneSignalSDKWorker.js",
      serviceWorkerParam: { scope: "/push/onesignal/" },
      notifyButton: {
        enable: true,
      },
    });
  });
</script>

​

iOS web push desteği

​

Safari Web Push .p12 sertifikası (isteğe bağlı, eski)

​

OneSignal SDK entegrasyonunu test etme

​

Web push aboneliklerini kontrol edin

1

Test cihazında sitenizi başlatın.

• Test ederken Chrome, Firefox, Edge veya Safari kullanın.
• Gizli veya özel tarama modunu kullanmayın. Kullanıcılar bu modlarda push bildirimlerine abone olamazlar.
• İstemler izin istemleri yapılandırmanıza göre görünmelidir.
• Push bildirimlerine abone olmak için yerel istemde İzin Ver’e tıklayın.

2

OneSignal panonuzu kontrol edin

• Kitle > Abonelikler’e gidin.
• Abone durumuna sahip yeni bir girdi görmelisiniz.

Başarıyla bir web push aboneliği oluşturdunuz. Web push abonelikleri, kullanıcılar sitenizde push bildirimlerine ilk kez abone olduğunda oluşturulur.

​

Test aboneliklerini ayarlayın

1

Test Aboneliklerine ekleyin.

Panoda, aboneliğin yanında Seçenekler (üç nokta) düğmesine tıklayın ve Test Aboneliklerine Ekle’yi seçin.

2

Aboneliğinizi adlandırın.

Cihazınızı daha sonra Test Abonelikleri sekmesinde kolayca tanımlayabilmeniz için aboneliği adlandırın.

3

Test kullanıcıları segmenti oluşturun.

Kitle > Segmentler > Yeni Segment’e gidin.

4

Segmenti adlandırın.

Segmenti Test Users olarak adlandırın (ad önemlidir çünkü daha sonra kullanılacaktır).

5

Test Users filtresini ekleyin ve Create Segment'e tıklayın.

Başarıyla test kullanıcıları segmenti oluşturdunuz. Artık bu bireysel cihaza ve test kullanıcı gruplarına mesaj göndermeyi test edebiliriz.

​

API aracılığıyla test push gönderin

1

Uygulama API Anahtarınızı ve Uygulama ID'nizi alın.

OneSignal panonuzda Ayarlar > Anahtarlar & ID’ler’e gidin.

2

Sağlanan kodu güncelleyin.

Aşağıdaki koddaki YOUR_APP_API_KEY ve YOUR_APP_ID değerlerini gerçek anahtarlarınızla değiştirin. Bu kod, daha önce oluşturduğumuz Test Users segmentini kullanır.

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

Kodu çalıştırın.

Kodu terminalinizde çalıştırın.

4

Görselleri ve onaylanmış teslimatı kontrol edin.

Tüm kurulum adımları başarıyla tamamlandıysa, test abonelikleri bir bildirim almalıdır.

Yalnızca Chrome görselleri destekler. Görseller daraltılmış bildirim görünümünde küçük görünecektir. Tam görseli görmek için bildirimi genişletin.

5

Onaylanmış teslimatı kontrol edin.

Panonuzda Teslimat > Gönderilen Mesajlar’a gidin, ardından istatistikleri görüntülemek için mesaja tıklayın. Cihazın push’u aldığını gösteren onaylandı istatistiğini görmelisiniz.

Safari, Onaylanmış Teslimatı desteklemez.

Push bildirimi mesaj raporları

Push bildirimlerinizin teslimat, tıklama ve dönüşüm istatistiklerini görüntüleyin.

• API isteği ve yanıtını bir .txt dosyasına kopyalayıp yapıştırın
• Abonelik ID’niz
• OneSignal koduyla web sitesi URL’niz

​

Kullanıcı tanımlama

​

Harici ID ata

​

Veri etiketleri ekleyin

​

E-posta ve/veya SMS abonelikleri ekleyin

• E-posta abonelikleri oluşturmak için addEmail metodunu kullanın.
• SMS abonelikleri oluşturmak için addSms metodunu kullanın.

​

Gizlilik ve kullanıcı onayı

• setConsentRequired(true): Onay verilene kadar veri toplamayı engeller.
• setConsentGiven(true): Onay verildiğinde veri toplamayı etkinleştirir.

​

Push, kullanıcı ve uygulama içi etkinlikleri dinleyin

​

Push bildirimi etkinlikleri

• Tıklama etkinliği dinleyicisi: Bir bildirimin ne zaman dokunulduğunu tespit edin.
• Ön plan yaşam döngüsü dinleyicisi: Bildirimlerin ön planda nasıl davrandığını kontrol edin.

​

Kullanıcı durumu değişiklikleri

• Kullanıcı durumu değişiklik etkinliği dinleyicisi: Harici ID’nin ne zaman ayarlandığını tespit edin.
• İzin gözlemcisi: Kullanıcının yerel push izin istemi ile belirli etkileşimini izleyin.
• Push aboneliği değişiklik gözlemcisi: Push abonelik durumunun ne zaman değiştiğini izleyin.

​

Gelişmiş kurulum ve yetenekler

​

Web SDK kurulumu ve referansı

​

SSS

​

Web SDK, service worker’ı nerede arar?

​

Web push bildirimleri için HTTPS’ye ihtiyacım var mı?

​

Bu kurulumu tek sayfalı uygulama (SPA) ile kullanabilir miyim?

​

Bir kullanıcı tarayıcı verilerini temizlerse ne olur?

​

İlgili sayfalar