Emre Yüz


Firebase ve PHP ile Masaüstü Bildirimi Gönderme

Merhaba ilk yazı ile yeni bloğuma start veriyorum. Firebase platformunun kaynak olarak yetersiz olması ve Google Cloud Messaging'in yerini FCM'ye bırakması nedeniyle bir çok tutorial çöp olmuş durumda.

Firebase ve PHP ile Masaüstü Bildirimi Gönderme

By Emre YÜZ
17.09.2018 23:49



firebase php push notification bildirim

Bu nedenle ilk yazımı yakın zamanda bir projemde kullandığım Firebase ve PHP ile masaüstü bildirimleri gönderme konusuna ayırmak istedim.


Öncelikle Firebase Konsol'a giderek bir proje oluşturuyoruz veya projeniz varsa proje spark ekranında bulunan </> web butonuna tıklayarak projemizin tanımlandığı (apiKey, projectId) kod öbeğini aşağıdaki gibi kopyalıyoruz.



Şimdi manifest.json dosyası oluşturmamız gerekiyor. Bu kısımda döküman sayfasında sabit bir gönderici numarası kullanmamız söyleniyor. Tüm FCM alıcıları için ortak olduğunu belirtilmiş.

{
  "gcm_sender_id": "103953800507"
} 


Üçüncü adım olarak bildirimlerin kullanıcılara anlık olarak aktarılmasını sağlayacak olan Chrome servisini oluşturuyoruz. Burada önemli bir nokta var dosyamızın adı firebase-messaging-sw.js olacak ve bu dosya diğer dosyaların bir üstündeki klasörde barındırılmalı aksi takdirde çalışmayacaktır. Yine ilk adımda edindiğimiz proje bilgilerini burada da kullanıyoruz ve bildirim geldiğinde gözükmesini istediğimiz icon ve büyük resimin yolunu yazıyoruz.

importScripts('https://www.gstatic.com/firebasejs/5.4.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/5.4.1/firebase-messaging.js');

firebase.initializeApp({apiKey: "AIzaSyB2_5c90nKGWhNZKyB9818PSbFYCamXJQ0",
    authDomain: "test-296ce.firebaseapp.com",
    databaseURL: "https://test-296ce.firebaseio.com",
    projectId: "test-296ce",
    storageBucket: "test-296ce.appspot.com",
    messagingSenderId: "629011879386"
  });

const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(function(payload) {
const notificationTitle = payload.data.title;
const notificationOptions = {
    body: payload.data.body,
icon: 'http://localhost/images/icon.png',
image: 'http://localhost/images/logo.png'
  };
  return self.registration.showNotification(notificationTitle, notificationOptions);
}); 


Bu adımda kullanıcılardan bildirim göndermek için izin alacağız. Bunun için Chrome'un varsayılan bildirim popup'ını kullanacağız eğer isterseniz bunu kendiniz de tasarlayabilirsiniz. Aşağıda izin aldıktan sonra oluşturulan token'ı save.php dosyamıza post ederek veritabanına kaydediyoruz.

<script src="https://www.gstatic.com/firebasejs/5.4.1/firebase.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="manifest" href="manifest.json">
<script>
var config = {apiKey: "AIzaSyB2_5c90nKGWhNZKyB9818PSbFYCamXJQ0",
    authDomain: "test-296ce.firebaseapp.com",
    databaseURL: "https://test-296ce.firebaseio.com",
    projectId: "test-296ce",
    storageBucket: "test-296ce.appspot.com",
    messagingSenderId: "629011879386"
};
firebase.initializeApp(config);

const messaging = firebase.messaging();
    
messaging.requestPermission()
    .then(function() {
        if (isTokenSentToServer()) {
        } else {
            getRegToken();
        }
    })
    .catch(function(err) {
        console.log("İzin Alınamadı!", err);
});

function getRegToken(argument) {
	messaging.getToken()
	.then(function(currentToken) {
		if (currentToken) {
			saveToken(currentToken);
			console.log(currentToken);
			setTokenSentToServer(true);
		} else {
			setTokenSentToServer(false);
		}
	})
	.catch(function(err) {
		setTokenSentToServer(false);
	});
}

function setTokenSentToServer(sent) {
    window.localStorage.setItem('sentToServer', sent ? 1 : 0);
}

function isTokenSentToServer() {
    return window.localStorage.getItem('sentToServer') == 1;
}

function saveToken(currentToken) {
    $.ajax({
        url: 'include/save.php',
        method: 'post',
        data: 'token=' + currentToken
    }).done(function(result) {
        console.log(result);
    });
}

messaging.onMessage(function(payload) {
    notificationTitle = payload.data.title;
    notificationOptions = {
        body: payload.data.body,
        icon: payload.data.icon,
        image: payload.data.image
    };
    var notification = new Notification(notificationTitle, notificationOptions);
});
</script>

Şimdi veritabanımızı oluşturarak bildirimlerimize izin veren kullanıcıları burada saklıyoruz.
CREATE TABLE `tokens` (
  `id` int(4) NOT NULL,
  `token` varchar(300) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


Son olarak save.php dosyamızı da oluşturarak gelen tokenları veritabanına kaydediyoruz.

 if($_POST)
{
	define('HOST','localhost');
	define('USER','root');
	define('PASS','');
	define('DB','');
	$con = mysqli_connect(HOST,USER,PASS,DB) or die('Bağlantı Başarısız!');
	$check = mysqli_query($con, "SELECT * FROM tokens WHERE token='".$_POST['token']."'");
	if(mysqli_num_rows($check)<=0)
	{
		mysqli_query($con, "INSERT INTO tokens (token) VALUES ('".$_POST['token']."')");
	}
}

Şimdi sıra geldi bildirim göndermeye. Bu kısımda bize Firebase projemizin SERVER_API_KEY anahtarı lazım bunu konsoldan proje ayarlarına girerek bulabilirsiniz. Bildirimlerimizi CURL ile gönderiyoruz PHP versiyonunuzu kontrol ederek bu kütüphanenin çalışır olduğundan emin olun.

 define('SERVER_API_KEY', 'KENDİ PROJENİZİN ANAHTARI');
$tokns = mysqli_query($con, "SELECT * FROM tokens");
while($print=mysqli_fetch_array($tokns))
{
	$registrationIds[] = $print['token'];
}
$header = ['Authorization: Key='.SERVER_API_KEY, 'Content-Type: Application/json'];
$msg = [
	'title' => 'Bildirim Başlığı',
	'body' => 'Bu alana bildirimin detaylarını ekleyebilirsiniz!',
	'icon' => 'http://localhost/images/icon.png',
	'image' => 'http://localhost/images/logo.png',
];
$payload = ['registration_ids' => $registrationIds,	'data' => $msg];
$curl = curl_init();
curl_setopt_array($curl, array(
	CURLOPT_URL => "https://fcm.googleapis.com/fcm/send",
	CURLOPT_RETURNTRANSFER => true,
	CURLOPT_CUSTOMREQUEST => "POST",
	CURLOPT_POSTFIELDS => json_encode( $payload ),
	CURLOPT_HTTPHEADER => $header,
	CURLOPT_SSL_VERIFYPEER => false
));
$response = curl_exec($curl);
$err = curl_error($curl);
curl_close($curl);


Not: FCM bildirimlerini localhost'ta test edebilirsiniz. Bunun dışında HTTP protokolünü güvenlik nedenlerinden dolayı desteklemiyor bu nedenle SSL sertifikanız yoksa one signal tarzı 3. parti servisleri kullanabilirsiniz. Çok yakında bununla ilgili de bir yazı hazırlayacağım.

Emre Yüz
Emre YÜZ
Multidisipliner Full-Stack Web Geliştirici/Tasarımcı, Veri
Mimarı ve Analist.

Multidisipliner Full-Stack Web Geliştirici/Tasarımcı, Veri Mimarı ve Analist.



HAKKIMDA

Emre YÜZ

Multidisipliner Full-Stack Web Geliştirici/Tasarımcı, Veri Mimarı ve Analist.

Son Yazılar

insta ❤️ feed

  • @yuzemre
  • @yuzemre
  • @yuzemre
  • @yuzemre
  • @yuzemre
  • @yuzemre

Reklam