JavaScript ile Push Bildirimleri Nasıl Gönderilir?

JavaScript bildirimleri, kullanıcılarınıza gerçek zamanlı olarak mesaj göndermenin bir yoludur. Bunları web sitenizin güncellemeleri, yeni sohbet mesajları, e-postalar veya herhangi bir sosyal medya etkinliği hakkında bilgilendirmek için kullanabilirsiniz. Bildirimleri takvim hatırlatıcıları için de kullanabilirsiniz (Google Meet veya Zoom'da yaklaşan bir toplantı gibi).

JavaScript'te etkinlik bildirimlerini nasıl oluşturacağınızı ve bunları telefonunuza veya web tarayıcınıza nasıl göndereceğinizi öğrenin. Bunu yerleşik, istemci taraflı JavaScript kullanarak başaracaksınız; harici kitaplık gerekmez!

Bildirim Gönderme İzni İsteme

Bir bildirim oluşturmak için aramanız gerekir. Bildiri bir nesne oluşturmak için sınıf. Bildiriminizi yapılandırmak için kullanabileceğiniz çeşitli özelliklere ve yöntemlere erişmenizi sağlar. Ancak bir bildirim oluşturmadan önce kullanıcıdan izin istemeniz gerekir.

Aşağıdaki JavaScript, kullanıcı bildirimleri göndermek için izin isteyecektir. bu istek izni çağrı, tarayıcının bildirimlere izin verip vermediğini belirten bir mesaj döndürür:

sabit düğme = belge.querySelector('düğme')
 button.addEventListener("tıklamak", ()=> {
 Bildirim.requestPermission().then(izin => {
 uyarı (izin)
 })
})

Düğmeye tıkladığınızda, yazan bir uyarı alabilirsiniz. reddedildi. Bu, tarayıcının JavaScript'in etkinlik bildirimleri göndermesini reddettiği anlamına gelir. İzin durumu reddedildi kullanıcının sitelerin bildirim göndermesini açıkça engellediği (tarayıcı ayarları aracılığıyla) veya kullanıcının gizli modda gezindiği durumlar için.

Bu gibi durumlarda, kullanıcının reddedilen bildirimler konusundaki kararına saygı duymak daha iyidir ve onları daha fazla rahatsız etmekten kaçınmalısınız.

Temel Bildirimler Gönderme

oluşturarak bir anında iletme bildirimi oluşturursunuz. Bildiri new anahtar sözcüğüyle nesne. Nesne yönelimli programlamaya derinlemesine dalmak için şu adresteki kılavuzumuza başvurabilirsiniz: JavaScript'te sınıflar nasıl oluşturulur?.

Bildirimleri yalnızca izin verilirse göndereceğiniz için, bildirimi bir kutunun içine sarmanız gerekir. eğer kontrol etmek.

sabit düğme = belge.querySelector('düğme')
button.addEventListener("tıklamak", ()=> {
 Bildirim.requestPermission().then(perma => {
eğer(perma 'imtiyazlı') {
yeni Bildiri("Örnek bildirim")
 }
 })
})

Düğmeye tıklayın ve web tarayıcınızın sağ alt köşesinde belirtilen metni içeren bir anında iletme bildirimi alacaksınız.

Bu, bildirim oluşturmanın en temel yoludur ve bilgisayarınızda olduğu kadar telefonunuzda da çalışır. Bazı gelişmiş bildirim özelliklerine bakalım.

Gelişmiş Bildirim Özellikleri

Bildirim başlığına ek olarak, bildirim nesnesini oluştururken yapıcıya bir seçenekler bağımsız değişkeni de iletebilirsiniz. Bu seçenekler bağımsız değişkeni bir nesne olmalıdır. Burada, bildiriminizi özelleştirmek için birkaç seçenek ekleyebilirsiniz.

vücut özelliği

Bilmeniz gereken ilk özellik vücut mülk. Bunu, genellikle metin biçiminde daha fazla bilgi iletmek için bildiriminize bir gövde eklemek için kullanırsınız. İşte basit bir örnek:

sabit düğme = belge.querySelector('düğme')
button.addEventListener("tıklamak", ()=> {
 Bildirim.requestPermission().then(perma => {
eğer(perma 'imtiyazlı') {
yeni Bildiri("Örnek bildirim", {
 vücut: "Bu daha fazla metin",
 })
 }
 })
})

Bu kodu çalıştırırsanız, gövde metni push bildiriminde Örnek bildirim başlık.

veri Özniteliği

Çoğu zaman bildirimlere özel veriler eklemek isteyebilirsiniz. İzin reddedilirse belirli bir hata mesajı görüntülemek veya bir API'den aldığınız verileri depolamak isteyebilirsiniz. Tüm bu gibi durumlar için, veri Bildiriminize özel veriler eklemek için özellik.

button.addEventListener("tıklamak", ()=> {
 Bildirim.requestPermission().then(perma => {
eğer(perma 'imtiyazlı') {
sabit bildirim = yeni Bildiri("Örnek bildirim", {
 vücut: "Bu daha fazla metin",
 veri: {Merhaba: "dünya"}
 })

 uyarı (notification.data.hello)
 }
 })
})

adresinden verilere ulaşabilirsiniz. veri özelliği yukarıdaki kod bloğunda gösterilene benzer (içinde uyarı()).

Ayrıca olay dinleyicilerini bildirimlerinize bağlayabilirsiniz. Örneğin, push bildirimini her kapattığınızda aşağıdaki olay dinleyicisi yürütülür. Geri arama işlevi, yalnızca özel mesajı günlüğe kaydeder.

sabit bildirim = yeni Bildiri("Örnek bildirim", { 
 vücut: "Bu daha fazla metin",
 veri: {Merhaba: "dünya"} 
})
bildiri. addEventListener("kapalı", e => {
konsol.log (e.target.data.hello)
})

Bu, birisi bir bildirimi kapattığında veya tıkladığında bir şey yapmanız gerektiğinde verileri aktarmanın mükemmel bir yoludur. dışında kapalı olayı (bildirimi kapattığınızda yürütülür), bunları saklamanız gerekir. olay dinleyicileri senin aklında:

• göstermek: Bildirim gösterildiğinde yürütülür.
• tıklamak: Kullanıcı bildirimde herhangi bir yeri tıkladığında yürütülür.
• hata: JavaScript'in bildirim gönderme iznini reddettiğinizde yürütülür.

Simge özelliği

bu simge özelliği, push bildirimine bir simge eklemek içindir. Adlı bir simge logonuz olduğunu varsayarsak logo.png geçerli dizinde, bunu aşağıdaki gibi bildirimlerinizde kullanabilirsiniz:

sabit bildirim = yeni Bildiri("Örnek bildirim", { 
 simge: "logo.png"
})

Dosyalarınıza bağlantı vermekte zorlanıyorsanız, göreli URL'lerin ve mutlak URL'lerin işleyişini anlama.

Dosyayı kaydettiğinizde, tarayıcıyı yenilediğinizde ve düğmeyi tıklattığınızda, bildirimde resim üstbilginin ve gövdenin sol tarafında görüntülenir.

etiket Özniteliği

ayarladığınızda etiket bildiriminizdeki öznitelik, temelde bildirime benzersiz bir kimlik veriyorsunuz. Aynı etikete sahiplerse iki bildirim birlikte var olamaz. Bunun yerine, en yeni bildirim eski bildirimin üzerine yazılacaktır.

Önceki düğme örneğimizi (etiketsiz) ele alalım. Düğmeyi art arda üç kez tıklarsanız, üç bildirim görünecek ve üst üste yığılacaklar. Şimdi bildirime aşağıdaki etiketi eklediğinizi varsayalım:

sabit bildirim = yeni Bildiri("Örnek bildirim", { 
 vücut: "Bu daha fazla metin",
 etiket: "Yeni etiketim"
})

Düğmeye tekrar tıklarsanız, yalnızca bir bildirim kutusu görünecektir. Sonraki her tıklama, önceki bildirimin üzerine yazılacaktır, bu nedenle düğmeyi kaç kez tıkladığınızdan bağımsız olarak yalnızca bir bildirim gösterilecektir. Bu, dinamik veriler (örneğin Matematik.random()) vücuda:

sabit bildirim = yeni Bildiri("Örnek bildirim", { 
 vücut: Matematik.rastgele()
 simge: "logo.png",
 etiket: "Vücut etiketim"
})

Düğmeye her tıkladığınızda, yeni bir numara görünecektir. İçinde yeni bilgiler bulunan geçerli bir bildirimin üzerine yazmak istiyorsanız tag özelliğini kullanın. Örneğin, bir mesajlaşma uygulamasında, yeni mesajları bildirimin üzerine yazmak için etiket özelliğini kullanabilirsiniz.

JavaScript Kullanan Anlık Bildirim Örneği

Aşağıdaki örnek, sayfanızda ne zaman odağınızı kaybettiğinizi (ör. sayfayı kapattığınızda veya yeni bir sekme açtığınızda) algılar. Bu durumda kod, geri dönmenizi isteyen bir bildirim gönderir:

izin vermek bildiri
belge.addEventListener("görünürlük değişikliği", ()=> {
eğer(belge.visibilityDevlet "gizlenmiş") {
 bildirim = yeni Bildiri("Lütfen geri dön", {
 vücut: "Henüz gitme :("
 etiket: "Geri gelmek"
 })
 } başka {
 bildirim.kapat()
 }
})

O sayfadaki odağınızı ne zaman kaybederseniz, o sayfaya geri dönmenizi isteyen bir bildirim alırsınız. Ancak sayfaya döndüğünüzde, başka push bildirimini kapatan blok yürütülür. Bu teknik, sayfanızdan ayrıldıktan sonra kullanıcıya bir tür bilgi vermek istediğiniz durumlarda mükemmeldir.

JavaScript Hakkında Daha Fazla Bilgi Edinin

Etkinlik bildirimi, JavaScript'te bulabileceğiniz sayısız özellikten yalnızca biridir. Bildirimler konusunda gerçekten iyi olmak için, öncelikle JavaScript'in temel dil özelliklerini ve sözdizimini kavramalısınız. Basit oyunlar oluşturmak, becerilerinizi geliştirmenin ve dilin temel kavramlarını öğrenmenin yollarından biridir.