Flutter Push Notification with OneSignal

7 min readMar 3, 2024

Merhaba, bu yazımda Flutter da Push Notification bildirimlerini uygulamamızda nasıl kullanıp kullanıcılarımıza bildirim gönderip onlar ile iletişime geçeriz onu anlatacağım. Herkese iyi okumalar.

Push Notification Nedir?

Kullanıcıların uygulamanızla etkileşimde bulunmasını sağlayan önemli bir araçtır.
Uygulama kapalıyken dahi kullanıcılarının cihazlarına mesaj göndermesini sağlayan bir bildirim sistemidir.

Flutter’da bildirim göndermek için Firebase FCM veya OneSignal gibi bilinen 2 yöntem vardır. Ben kullanımını daha kolay bulduğum için bu yazımda OneSignal üzerinden bildirim entegrasyonu gerçekleştirmeyi konu alacağım.

OneSignal Nedir?

Web siteleri, mobil uygulamalar üzerinden kullanıcılarına push notification gönderme imkanı sunan popüler bir servistir.

OneSignal de aslında Android tarafında FCM katmanı üzerine yazılmış bir servistir. Yukarıdaki görselde çalışma mantığı gösterilmektedir. Apple APN ve Google FCM katmanlarına bir ara katman yazarak bildirim göndermeyi daha kolay hale getiren bir servistir OneSignal. Başlangıç projeleri için de ücretsizdir. Aşağıda hangi özellikler için ücretli olduğu yer almaktadır. İhtiyacınıza göre farklı planları kullanabilirsiniz. Ancak start-up seviyesindeki projeler için ücretsiz plan yeterlidir.

OneSignal Hesap ve Proje Oluşturma

OneSignal kullanmak için öncelikle ihtiyacımız olan bir OneSignal hesabı, Firebase hesabı ve Apple Developer hesabı (ios için).

OneSignal üzerinde bir hesap oluşturduktan sonra organizasyon ve app oluşturuyoruz. Daha sonra platforma özel yapılandırma ayarlarına geçeceğiz.

Apple iOS Yapılandırması (APNs)

App oluştururken yapılandırma yapacağımız platform için bir seçim çıkıyor. Oradan iOS seçip devam ettiğimizde üstteki gibi bir ekran bizi karşılıyor. Burada ihtiyacımız olan Apple Developer hesabından alacağımız .p8 Auth Key. Bu key’i almak için bir Apple Developer hesabımız olmalı.

Apple Developer hesabına girdikten sonra Certificates, Identifiers & Profiles kısmından Keys sekmesine gelip + butonuna tıklayarak yeni bir key oluşturabiliyoruz. Burada aşağıdan Apple Push Notification service (APNs)’i seçerek ve keyimize bir isim vererek ilerliyoruz. Key’i oluşturduktan sonra ise sadece 1 kere indirme hakkımız var. O yüzden aldığınız key’i kaybetmemelisiniz.

Key’i aldıktan sonra OneSignal iOS yapılandırmasında ilgili Key (.p8 file) kısmına yüklüyoruz ve Key’i alırken bize verilen Key ID ve Apple Hesabımız için bize verilen Team ID’yi ilgili alanlara girerek devam ediyoruz.

Bizi aşağdaki gibi bir ekrana yönlendiriyor. Burada app için kullanacağımız App ID’yi bize vermekte. Bunu daha sonra uygulama tarafında kullanacağız. Şimdi Android yapılandırmasına geçelim.

Google Android Yapılandırması (FCM)

Android yapılandırmasında Google Firebase’e ihtiyacımız var. Bunun için bir Firebase projesi oluşturuyoruz. Bu Firebase projesi üzerinden alacağımız Service Account JSON ile OneSignal yapılandırmasını yapacağız.

Firebase projesi oluşturduktan sonra Proje Settings > Cloud Messaging > Firebase Cloud Messaging API (V1) Enable olup olmadığına bakmamız gerekiyor. Enable değilse bu seçeneği enable yapıyoruz.

Ardından Proje Settings > Service Accounts > Generate new private key ile yeni bir Service Account JSON oluşturuyoruz. Oluşturduktan sonra sadece 1 kere indirme hakkımız var. O yüzden aldığınız JSON’ı kaybetmemelisiniz.

JSON dosyasını’i aldıktan sonra OneSignal Android yapılandırmasında ilgili Service Account JSON kısmına yüklüyoruz ve devam ediyoruz.

Bizi aşağdaki gibi bir ekrana yönlendiriyor. Burada app için kullanacağımız App ID’yi bize vermekte. Bunu daha sonra uygulama tarafında kullanacağız.

OneSignal tarafındaki yapılandırmalarımız bitti. Şimdi iOS ve Android için kuruluma bakacağız.

iOS Kurulumu

iOS kurulumu için Xcode’a ihtiyacımız var. Flutter projemizin ios klasörünü Xcode ile açıyoruz ve ardından

Runner > TARGETS (Runner) > Signing & Capabilities > + Capability > Push Notifications‘ı ekliyoruz.

+ Capability > Background Modes > Remote notifications’ı etkinleştiriyoruz.

File > New > Target…
Notification Service Extension ardından Next diyoruz. Ardından Product Name ksımına ‘OneSignalNotificationServiceExtension’ yazarak Finish diyoruz.

Daha sonra açılan diyalog penceresinde Cancel’ı seçiyoruz. Eğer yanlışlıkla Activate derseniz kaldırıp tekrar baştan Target eklemeyi yapmanız gerekmektedir.

Runner > TARGETS (OneSignalNotificationServiceExtension) > Minimum Deployments > iOS 11 veya daha yüksek olarak ayarlamalısınız.

Daha sonra Podfile dosyasında bulunan platform :ios, ‘11.0’ kısmını yorumdan çıkarıp en alta aşağıdakii kodu eklemelisiniz

target 'OneSignalNotificationServiceExtension' do
  use_frameworks!
  pod 'OneSignalXCFramework', '>= 5.0.0', '< 6.0'
end

Bu kodu ekledikten sonra terminal’i açıp, cd ile ios dizinine gelip, ardından pod install komutunu çalıştırın

Ardından Runner > OneSignalNotificationServiceExtension dizinindeki Notification Service dosyasının içeriğini aşağıdaki kod ile değiştirin.

import UserNotifications

import OneSignalExtension

class NotificationService: UNNotificationServiceExtension {
    
    var contentHandler: ((UNNotificationContent) -> Void)?
    var receivedRequest: UNNotificationRequest!
    var bestAttemptContent: UNMutableNotificationContent?
    
    override func didReceive(_ request: UNNotificationRequest, withContentHandler contentHandler: @escaping (UNNotificationContent) -> Void) {
        self.receivedRequest = request
        self.contentHandler = contentHandler
        self.bestAttemptContent = (request.content.mutableCopy() as? UNMutableNotificationContent)
        
        if let bestAttemptContent = bestAttemptContent {
            /* DEBUGGING: Uncomment the 2 lines below to check this extension is executing
                          Note, this extension only runs when mutable-content is set
                          Setting an attachment or action buttons automatically adds this */
            // print("Running NotificationServiceExtension")
            // bestAttemptContent.body = "[Modified] " + bestAttemptContent.body
            
            OneSignalExtension.didReceiveNotificationExtensionRequest(self.receivedRequest, with: bestAttemptContent, withContentHandler: self.contentHandler)
        }
    }
    
    override func serviceExtensionTimeWillExpire() {
        // Called just before the extension will be terminated by the system.
        // Use this as an opportunity to deliver your "best attempt" at modified content, otherwise the original push payload will be used.
        if let contentHandler = contentHandler, let bestAttemptContent =  bestAttemptContent {
            OneSignalExtension.serviceExtensionTimeWillExpireRequest(self.receivedRequest, with: self.bestAttemptContent)
            contentHandler(bestAttemptContent)
        }
    }  
}

iOS Kurulumu bu şekilde tamamlanmış oldu. Şimdi Andorid kurulumuna bakalım.

Android Kurulumu

Android kurulumu çok basit. iOS kadar işlem gerektirmiyor. Sadece android/app/build.gradle > compileSdkVersion 33 veya daha yüksek olarak ayarlamamız yetiyor.

android/app/build.gradle

// ...
android {
    compileSdkVersion 33
    // ...
}
// ...

Android kurulumunu da yaptığımıza göre artık Flutter kurulumuna geçebiliriz.

Flutter Kurulumu

Flutter tarafında öncelikle pubspec.yaml dosyamıza bağımlılığı ekliyoruz.

dependencies:
 onesignal_flutter: ^5.0.4

veya terminale flutter pub add onesignal_flutter komutunu yazarak da ekleyebiliriz :)

Paket bağımlılığımızı ekledikten sonra sıra geldi bildirim iznini nasıl alıp tıklandığında veya kullanıcıya özel ayarlama için kod tarafında neler yapacağımıza.

OneSignal.initialize(“YOUR_APP_ID”) ile init işlemimizi yaparak OneSignal ile bağlantı kuruyoruz.

OneSignal.Notifications.requestPermission(true) ile uygulamanın bildirim izni diyalogunu (platforma özel) çıkararak kullanıcıdan izin alıp izin verdiyse OneSignal’e kaydolmasını (subscribe) sağlıyoruz.

OneSignal.Notifications.addClickListener((OSNotificationClickEvent result) async {

});
ile de gelen bildirime tıklayınca yapılacak işlemleri özelleştirebiliyoruz.

Benim Bildirimleri yönetmek için kullandığım yönetim class’ı aşağıda yer almaktadır. Ben genellikle initialize() methodunu splash ekranımda, login() methodunu ana sayfamda user bilgileri geldikten sonra çağırıyorum. Siz uygulama çalışma şeklinize göre ayarlayabilirsiniz.

class OneSignalNotificationManager {
  static void get login async {
    var userId = 'unique userId';
    // Bir kullanıcının OneSignal SDK'ya giriş yapması, 
    // kullanıcı bağlamını söz konusu kullanıcıya değiştirecektir.
    // OneSignal tarafında externalId ile cihaz eşleştirmesi yapılarak
    // kullanıcıya özel bildirim gönderirken bu değer ile özel bildirim
    // gönderebiliriz.
    await OneSignal.login(userId);
  }

  static void get logout async {
    await OneSignal.logout();
  }

  static void initialize() async {
    await OneSignal.Debug.setLogLevel(OSLogLevel.none);
    OneSignal.initialize(ProductConstants.instance.oneSignalAppId);
    login;
    // Bildirim izni yoksa kullanıcıdan bildirim izni alıyoruz
    await OneSignal.Notifications.requestPermission(true).then((accepted) {});
  }

  static get onClick {
    OneSignal.Notifications.addClickListener((OSNotificationClickEvent result) async {
      // Bildirime tıkladığında yapılacak işlemleri burada gerçekleştiriyoruz
      print('notification onClick');
    });
  }
}

OneSignal Dashboard ve Bildirim Gönderme

OneSignal adresi üzerinden oluşturduğunuz uygulamayı seçtikten sonra solda bulunan menüden Audience > Subscriptions kısmından uygulamanız üzerinden abone olan cihazları görebilirsiniz.

Buradan abone olmuş kullanıcıları ve durumunu görebilirsiniz.

Bildirim göndermek içinde yine solda bulunan menüden Messages > Push kısmına giderek önceki gönderdiğiniz bildirimleri görebilirsiniz. Sağ üstte bulunan New Message > New Push ile yeni bildirim gönderebileceğiniz ekrana gidebilirsiniz.

Sizi yukarıdaki gibi bir ekran karşılamakta. Buradan bildirimin içeriğini değiştirip istedğiniz gibi özelleştirebilirsiniz. Dilerseniz Subscription kısmından kayıt olan bir cihazı test cihazı olarak kaydedip sağ üstte bulunan Send Test Push ile sadece o cihaza bildirim gönderebilir veya bildirim içeriğini ayarladıktan sonra tüm kayıtlı cihazlarınıza gönderebilirsiniz.

Eğer kendi backend servisiniz var ise oradan da Rest API’ı kullanarak bildirim gönderebilirsiniz. Detaylı incelemek isterseniz buradan dokümanına ulaşabilirsiniz.

Artık uygulamalarınızda bildirim kullanabilir, kullanıcılarınıza bildirim gönderip onlarla iletişime geçebilirsiniz. Unutmayın ki uygulamanız kapalıyken kullanıcılarınıza kendinizi bildirimler ile hatırlatabilirsiniz 🎉

Buraya kadar okuduğunuz için teşekkür ederim! 💙
Bu benim ilk medium yazımdı. Umarım Flutter OneSignal entegrasyonu ve yönetimi hakkında yardımcı olabilmişimdir.

Buradan hesaplarıma göz atabilir ve sorunuz olursa bana ulaşabilirsiniz.

Yeni yazılarda görüşmek üzere. 🫡