Bu codelab'de, Bildirimler API'sini kullanarak:
- Bildirim gönderme izni isteme
- Bildirim gönder
- Bildirim seçenekleriyle denemeler yapma
Örnek uygulamayı remiksleyip yeni bir sekmede görüntüleyin
Bildirimler, yerleşik Glitch uygulamasından otomatik olarak engellendiği için bu sayfada uygulamayı önizleyemezsiniz. Bunun yerine aşağıdakileri yapmanız gerekir:
- Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran .
Glitch yeni bir Chrome sekmesinde açılır:
Bu codelab'de çalışırken bu sayfadaki yerleştirilmiş Glitch'te yer alan kodda değişiklik yapın. Değişiklikleri görmek için yeni sekmeyi yayındaki uygulamanızla yenileyin.
Başlangıç uygulaması ve kodu hakkında bilgi edinin
Yeni Chrome sekmesinde yayındaki uygulamaya göz atarak başlayın:
Geliştirici Araçları'nı açmak için "Control+Üst Karakter+J" (veya Mac'te "Command+Option+J") tuşlarına basın. Konsol sekmesini tıklayın.
Console'da aşağıdaki mesajı görürsünüz:
Notification permission is default
Bunun ne anlama geldiğini bilmiyorsanız endişelenmeyin. yakında açıklanacak!
Canlı uygulamadaki şu düğmeleri tıklayın: Bildirim gönderme izni isteyin ve Bildirim gönder.
Konsolda "TODO" yazdırılıyor birkaç işlev saplamasından gelen iletiler:
requestPermission
vesendNotification
. Bunlar, bu codelab'de uygulayacağınız işlevlerdir.
Şimdi bu sayfadaki yerleşik Glitch'te bulunan örnek uygulamanın koduna bakalım.
public/index.js
uygulamasını açın ve mevcut kodun bazı önemli bölümlerine göz atın:
showPermission
işlevi, aşağıdaki işlemler için Notifications API'yi kullanır: sitenin mevcut izin durumunu kontrol edip konsola kaydedin:// 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 istenmeden önce izin durumu
default
olarak ayarlanır.default
izin durumunda, bildirim gönderebilmesi için önce istekte bulunmalı ve siteye izin verilmesi gerekir.requestPermission
işlevi köktü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 köktür:// Use the Notification constructor to create and send a new Notification. function sendNotification() { console.log('TODO: Implement sendNotification()'); }
requestPermission
uygulandıktan sonra bu işlevi uygularsınız.window.onload
etkinlik işleyicisishowPermission
işlevini çağırır Sayfa yüklendiğinde, konsolda ve sayfada mevcut izin durumunu görüntüler:window.onload = () => { showPermission(); };
Bildirim gönderme izni isteme
Bu adımda, kullanıcının bildirim gönderme iznini isteme işlevi ekleyeceksiniz.
Kullanıcının sitenizden gelen bildirimlere izin vermesini veya engellenmesini isteyen bir pop-up'ı tetiklemek için Notification.requestPermission()
yöntemini kullanırsınız.
public/index.js içindeki
requestPermission
işlev sapı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); }); }
Yayındaki uygulamanızı görüntülediğiniz Chrome sekmesini yeniden yükleyin.
Canlı uygulama arayüzünde, Bildirim göndermek için izin iste'yi tıklayın. Bir pop-up görüntülenir.
Kullanıcı, izin pop-up'ına verilen üç yanıttan birini yapabilir.
Kullanıcı yanıtı | Bildirim izin 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, bildirimleri görüntüleyebilecektir.
Notification.requestPermission
numaralı telefona yapılan sonraki aramalar, pop-up olmadangranted
numarasına çözümlenecek.
Kullanıcı Engelle'yi tıklarsa:
Notification.permission
,denied
olarak ayarlandı.Site, kullanıcıya bildirim gösteremeyecek.
Notification.requestPermission
numaralı telefona yapılan sonraki aramalar, pop-up olmadandenied
numarasına çözümlenecek.
Kullanıcı pop-up'ı kapatırsa:
Notification.permission
,default
olarak kaldı.Site, kullanıcıya bildirim gösteremeyecek.
Notification.requestPermission
numaralı telefona yapılan sonraki çağrılar daha fazla pop-up oluşturur.Ancak kullanıcı pop-up'ları kapatmaya devam ederse tarayıcı siteyi engelleyebilir. Bu durumda
Notification.permission
,denied
olarak ayarlanır. Bu şekilde ne izin isteği pop-up'ları ne de bildirimleri kullanıcıya gösterilemez.Bu yazının yazıldığı sırada, kapatılan bildirimler izin pop-up'larına karşı tarayıcı davranışı değişebilir. Bunu yapmanın en iyi yolu, kullanıcının başlattığı bazı etkileşimlere yanıt olarak her zaman bildirim izni istemektir. Böylece, kullanıcı bunu bekler ve neler olduğunu öğrenir.
Bildirim gönderme
Bu adımda, kullanıcıya bir bildirim gönderirsiniz.
Yeni bir bildirim oluşturmak ve bunu görüntülemeyi denemek için Notification
oluşturucusunu kullanacaksınız.
İzin durumu granted
ise bildiriminiz gösterilir.
index.js'deki
sendNotification
işlev sapı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şturucusu iki parametre alır:title
veoptions
.options
, bildirime ekleyebileceğiniz görsel ayarları ve verileri temsil eden özelliklere sahip bir nesnedir. Daha fazla bilgi için Bildirim parametreleriyle ilgili MDN dokümanlarına bakın.Canlı uygulamanızı görüntülediğiniz Chrome sekmesini yenileme ve Bildirim gönder düğmesini tıklayın.
Test body
metnini içeren bir bildirim gösterilir.
İzniniz olmadan bildirim gönderdiğinizde ne olur?
Bu adımda, birkaç satırlık bir kod ekleyerek ne olduğunu görebilirsiniz. kullanıcının izni olmadan bir bildirim görüntülemeye çalıştığınızda.
public/index.js
içinde,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önderme izni iste'yi tıklayın. 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 konsolda günlüğe 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'ı birkaç kez kapatabilirsiniz.
Bildirim seçenekleriyle denemeler yapma
İzin isteme ve bildirim göndermeyle ilgili temel bilgileri öğrendiniz. Ayrıca, kullanıcı yanıtlarının uygulamanızın bildirimleri görüntüleme yeteneği üzerindeki etkisini de gördünüz.
Artık bildirim oluştururken mevcut olan birçok görsel ve veri seçeneğini kullanarak denemeler yapabilirsiniz. Mevcut seçeneklerin tamamını aşağıda bulabilirsiniz. (Bu seçenekler hakkında daha fazla bilgi edinmek için MDN'deki Bildirim dokümanlarına göz atın.)
Tarayıcıların ve cihazların bu seçenekleri farklı şekilde uyguladığını unutmayın. Bu nedenle, nasıl göründüklerini anlamak için bildirimlerinizi farklı platformlarda test etmeniz önerilir.
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'
},],
*/
}
Diğer fikirler için Peter Beverloo'nun Bildirim Oluşturucu sayfasına göz atın.
Takıldıysanız bu codelab için tamamlanmış kodu şurada bulabilirsiniz: glitch.com/edit/#!/codelab-notifications-get-started-completed
Daha ayrıntılı bilgi edinmek için bu serinin bir sonraki codelab'ine göz atın: Hizmet çalışanı ile bildirimleri yönetme.