Bu codelab'de, Notifications API'nin temel özelliklerini kullanarak şunları yapacaksınız:
- Bildirim gönderme izni isteme
- Bildirim gönderme
- Bildirim seçeneklerini deneme
Sana Özel uygulamasını yeniden derleyip yeni bir sekmede görüntüleme
Yerleşik Glitch uygulamasında bildirimler otomatik olarak engellenir. Bu nedenle, uygulamayı bu sayfada önizleyemezsiniz. Bunun yerine aşağıdakileri yapmanız gerekir:
- Projeyi düzenlenebilir hale getirmek için Düzenlemek için remiks oluştur'u tıklayın.
- Siteyi önizlemek için Uygulamayı Görüntüle'ye, ardından Tam Ekran'a basın.
Glitch yeni bir Chrome sekmesinde açılır:
Bu codelab'i tamamlarken bu sayfadaki yerleşik Glitch'teki kodda değişiklikler yapın. Değişiklikleri görmek için canlı uygulamanızın bulunduğu yeni sekmeyi yenileyin.
Başlangıç uygulaması ve kodu hakkında bilgi edinin
Yeni Chrome sekmesinde canlı uygulamaya göz atarak başlayın:
Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın. Konsol sekmesini tıklayın.
Konsol'da aşağıdaki mesajı görürsünüz:
Notification permission is default
Bunun ne anlama geldiğini bilmiyorsanız endişelenmeyin. Tüm bilgiler yakında açıklanacak.
Canlı uygulamadaki Bildirim gönderme izni iste ve Bildirim gönder düğmelerini tıklayın.
Konsolda,
requestPermission
vesendNotification
adlı iki işlev taslağı için "TODO" mesajları yazdırılır. Bu codelab'de uygulayacağınız işlevler bunlardır.
Şimdi bu sayfada yerleşik Glitch'teki örnek uygulamanın koduna bakalım.
public/index.js
dosyasını açıp mevcut kodun bazı önemli bölümlerine göz atın:
showPermission
işlevi, sitenin mevcut izin durumunu almak ve konsola kaydetmek için Notifications API'yi kullanır:// Print current permission state to console;
// update onscreen message.
function showPermission() {
let permission = Notification.permission;
console.log('Notification permission is ' + permission);
let p = document.getElementById('permission');
p.textContent = 'Notification permission is ' + permission;
}İzin isteğinde bulunmadan önce izin durumu
default
olur.default
izin durumundaki bir site, bildirim gönderebilmek için izin isteğinde bulunmalı ve izin almalıdır.requestPermission
işlevi bir taslaktır:// Use the Notification API to request permission to send notifications.
function requestPermission() {
console.log('TODO: Implement requestPermission()');
}Bu işlevi bir sonraki adımda uygulayacaksınız.
sendNotification
işlevi bir taslaktır:// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
console.log('TODO: Implement sendNotification()');
}Bu işlevi
requestPermission
'ü uyguladıktan sonra uygulayacaksınız.window.onload
etkinlik dinleyicisi, sayfa yüklendiğindeshowPermission
işlevini çağırır ve mevcut izin durumunu konsolda ve sayfada gösterir:window.onload = () => { showPermission(); };
Bildirim gönderme izni isteme
Bu adımda, kullanıcıdan bildirim gönderme izni isteyecek işlevleri ekleyeceksiniz.
Kullanıcıdan sitenizden gelen bildirimlere izin vermesini veya bunları engellemesini isteyen bir pop-up'ı tetiklemek için Notification.requestPermission()
yöntemini kullanırsınız.
public/index.js dosyasında
requestPermission
işlev taslağını aşağıdaki kodla değiştirin:// Use the Notification API to request permission to send notifications.
function requestPermission() {
Notification.requestPermission()
.then((permission) => {
console.log('Promise resolved: ' + permission);
showPermission();
})
.catch((error) => {
console.log('Promise was rejected');
console.log(error);
});
}Canlı uygulamanızı görüntülediğiniz Chrome sekmesini yeniden yükleyin.
Canlı uygulama arayüzünde Bildirim gönderme izni isteyin'i tıklayın. Bir pop-up gösterilir.
Kullanıcı, izin pop-up'ına üç yanıttan birini verebilir.
Kullanıcı yanıtı | Bildirim izni durumu |
---|---|
Kullanıcı İzin ver'i seçer | granted |
Kullanıcı Engelle'yi seçer | denied |
Kullanıcı, seçim yapmadan pop-up'ı kapatır | default |
Kullanıcı İzin ver'i tıklarsa:
Notification.permission
,granted
olarak ayarlandı.Site bildirim gösterebilir.
Notification.requestPermission
için yapılan sonraki çağrılar, pop-up olmadangranted
olarak çözülür.
Kullanıcı Engelle'yi tıklarsa:
Notification.permission
,denied
olarak ayarlandı.Site, kullanıcıya bildirim gösteremez .
Notification.requestPermission
için yapılan sonraki çağrılar, pop-up olmadandenied
olarak çözülür.
Kullanıcı pop-up'ı kapatırsa:
Notification.permission
kaldıdefault
.Site, kullanıcıya bildirim gösteremez.
Notification.requestPermission
çağrısı tekrarlandığında daha fazla pop-up gösterilir.Ancak kullanıcı pop-up'ları kapatmaya devam ederse tarayıcı,
Notification.permission
değerinidenied
olarak ayarlayarak siteyi engelleyebilir. Bu durumda kullanıcıya izin istek pop-up'ları veya bildirimler gösterilemez.Bu makalenin yazıldığı sırada, reddedilen bildirim izni pop-up'larına yanıt olarak tarayıcının davranışı hâlâ değişiklik gösterebilir. Bu sorunun en iyi çözümü, kullanıcının başlattığı bir etkileşime yanıt olarak her zaman bildirim izni istemektir. Böylece kullanıcı, bildirimi bekler ve ne olduğunu bilir.
Bildirim gönderme
Bu adımda kullanıcıya bildirim göndereceksiniz.
Yeni bir bildirim oluşturmak ve görüntülemeye çalışmak için Notification
yapıcısını kullanırsınız.
İzin durumu granted
ise bildiriminiz gösterilir.
index.js dosyasında
sendNotification
işlev taslağını aşağıdaki kodla değiştirin:// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
let title = 'Test';
let options = {
body: 'Test body',
// Other options can go here
};
console.log('Creating new notification');
let notification = new Notification(title, options);
}Notification
oluşturucu, iki parametre alır:title
veoptions
.options
, bir bildirime dahil edebileceğiniz görsel ayarları ve verileri temsil eden özelliklere sahip bir nesnedir. Daha fazla bilgi için bildirim parametreleriyle ilgili MDN belgelerine bakın.Canlı uygulamanızı görüntülediğiniz Chrome sekmesini yenileyin ve Bildirim gönder düğmesini tıklayın.
Test body
metnini içeren bir bildirim gösterilir.
İzinsiz bildirim gönderdiğinizde ne olur?
Bu adımda, kullanıcının izni olmadan bildirim göstermeye çalıştığınızda ne olacağını görmenizi sağlayacak birkaç kod satırı ekleyeceksiniz.
public/index.js
dosyasında,sendNotification
işlevinin sonunda yeni bildiriminonerror
etkinlik işleyicisini tanımlayın:
// Use the Notification constructor to create and send a new Notification.
function sendNotification() {
let title = 'Test';
let options = {
body: 'Test body',
// Other options can go here
};
console.log('Creating new notification');
let notification = new Notification(title, options);
notification.onerror = (event) => {
console.log('Could not send notification');
console.log(event);
};
}
Bildirim izni hatasını gözlemlemek için:
Chrome URL çubuğunun yanındaki kilit simgesini tıklayın ve sitenin bildirim izni ayarını varsayılan değerine sıfırlayın.
Bildirim göndermek için izin iste'yi tıklayın ve bu kez pop-up'tan Engelle'yi seçin.
Bildirim gönder'i tıklayın ve ne olduğunu görün. Hata metni (
Could not send notification
) ve etkinlik nesnesi konsola kaydedilir.
İsteğe bağlı olarak sitenin bildirim izinlerini tekrar sıfırlayın. Ne olacağını görmek için izin isteyebilir ve pop-up'ı birden çok kez kapatmayı deneyebilirsiniz.
Bildirim seçeneklerini deneme
İzin isteme ve bildirim göndermeyle ilgili temel bilgileri öğrendiniz. Ayrıca kullanıcı yanıtlarının, uygulamanızın bildirim gösterme özelliği üzerindeki etkisini de gördünüz.
Artık bildirim oluştururken birçok görsel ve veri seçeneğini deneyebilirsiniz. Kullanabileceğiniz tüm seçenekler aşağıda verilmiştir. (Bu seçenekler hakkında daha fazla bilgi için MDN'deki bildirim dokümanlarına bakın.)
Tarayıcıların ve cihazların bu seçenekleri farklı şekilde uyguladığını unutmayın. Bu nedenle, bildirimlerinizin nasıl göründüğünü görmek için farklı platformlarda test etmeniz faydalı olacaktır.
let options = {
dir: 'auto', // Text direction
lang: 'en-US', // A language tag
badge: '/orange-cat.png', // Display when insufficient room
body: 'Hello World', // Body text
tag: 'mytag', // Tag for categorization
icon: '/line-cat.png', // To display in the notification
image: '/orange-cat.png', // To display in the notification
data: { // Arbitrary data; any data type
cheese: 'I like cheese',
pizza: 'Excellent cheese delivery mechanism',
arbitrary: {
faveNumber: 42,
myBool: true
}},
vibrate: [200, 100, 200], // Vibration pattern for hardware
renotify: false, // Notify if replaced? Default false
requireInteraction: false,// Active until click? Default false
/*
actions: // Array of NotificationActions
// Only usable with a service worker
[{
action: 'shop',
title: 'Shop!',
icon: '/bags.png'
},],
*/
}
Daha fazla fikir için Peter Beverloo'nun Notification Generator aracına göz atın.
Takıldıysanız bu codelab'in tamamlanmış kodunu burada bulabilirsiniz: glitch.com/edit/#!/codelab-notifications-get-started-completed
Daha fazla bilgi edinmek için bu serinin bir sonraki kod laboratuvarına (Bildirimleri servis çalışanıyla işleme) göz atın.