Bu codelab'de, bildirimleri yönetmek için bir servis çalışanı kullanacaksınız. Buradaki talimatlarda, Service Worker'lar hakkında bilgi sahibi olduğunuz ve bildirim izni isteme ve bildirim gönderme ile ilgili temel bilgilere sahip olduğunuz varsayılır. Bildirimler hakkında bilgi edinmek istiyorsanız Notifications API'yi kullanmaya başlama codelab'ine göz atın. Hizmet çalışanları hakkında daha fazla bilgi edinmek için Matt Gaunt'ın Hizmet çalışanlarına giriş başlıklı makalesine göz atın.
Örnek uygulamayı remiksleyin ve yeni sekmede görüntüleyin.
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 yeni sekmeyi yayındaki uygulamanızla yenileyin.
Örnek uygulama ve başlangıç kodu hakkında bilgi edinme
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.
Filtre kutusunun yanındaki Düzeyler açılır menüsünde Bilgi seçeneğinin seçili olduğundan emin olun.
Canlı uygulamanızın Geliştirici Araçları konsolunda bir konsol mesajı görürsünüz:
TODO: Implement getRegistration()
.Bu, bu codelab'de uygulayacağınız bir işlev taslağı mesajıdır.
Şimdi bu sayfadaki yerleşik Parazit'te bulunan örnek uygulamanın koduna bakalım.
Yerleştirilmiş Glitch'te
public/index.js
şuna bakın:Uygulayacağınız işlevler için dört yoksunluk örneği vardır:
registerServiceWorker
,getRegistration
,unRegisterServiceWorker
vesendNotification
.requestPermission
işlevi, bildirim göndermek için kullanıcıdan izin ister. Bildirimler API'sini kullanmaya başlayın codelab'ini uyguladıysanızrequestPermission
işlevinin burada kullanıldığını fark edeceksiniz. Tek fark, artık izin isteği çözüldükten sonra kullanıcı arayüzünün de güncellenmesidir.updateUI
işlevi, uygulamanın tüm düğmelerini ve mesajlarını yeniler.initializePage
işlevi, tarayıcıda hizmet çalışanı özelliği için özellik algılama işlemi gerçekleştirir ve uygulama kullanıcı arayüzünü günceller.Komut dosyası, sayfa yüklenene kadar bekler ve ardından sayfayı başlatır.
Yerleşik Glitch'te
public/service-worker.js
'ü açın.Adından da anlaşılacağı gibi, bu dosyayı hizmet çalışanı olarak kaydettirmek için uygulamaya kod eklersiniz.
Dosya henüz uygulama tarafından kullanılmıyor olsa da, hizmet çalışanı etkinleştirildiğinde konsola bir mesaj yazdıran bir başlangıç kodu içerir.
Hizmet çalışanı bildirim aldığında bunları işlemek için
public/service-worker.js
dosyasına kod eklersiniz.
Hizmet çalışanını kaydedin
Bu adımda, kullanıcı uygulama kullanıcı arayüzünde Hizmet çalışanını kaydet'i tıkladığında çalışan kodunu yazacaksınız.
Bu kod, public/service-worker.js
hizmet işçisi olarak kaydeder.
Yerleşik Glitch düzenleyicisinde
public/index.js
öğesini açın.registerServiceWorker
işlevini aşağıdaki kodla değiştirin:// Use the Service Worker API to register a service worker.
async function registerServiceWorker() {
await navigator.serviceWorker.register('./service-worker.js')
updateUI();
}registerServiceWorker
'ün, vaatleri daha kolay işlemek içinasync function
beyanını kullandığını unutmayın. Bu sayede,Promise
değerinin çözüldüğüawait
değerini alabilirsiniz. Örneğin, yukarıdaki işlev kullanıcı arayüzünü güncellemeden önce bir service worker kaydının sonucunu bekler. Daha fazla bilgi için MDN'dekiawait
sayfasına bakın.Kullanıcı artık bir hizmet işçisi kaydedebildiğinden, hizmet işçisi kayıt nesnesinin referansını alabilirsiniz.
public/index.js
içindegetRegistration
işlevini aşağıdaki kodla değiştirin:// Get the current service worker registration.
function getRegistration() {
return navigator.serviceWorker.getRegistration();
}Yukarıdaki işlev, varsa mevcut Service Worker kaydını almak için Service Worker API'yi kullanır. Bu, hizmet çalışanı kaydına referans almanın biraz daha kolay olmasını sağlar.
Hizmet çalışanı kaydı işlevini tamamlamak için hizmet çalışanının kaydını iptal edecek kod ekleyin.
unRegisterServiceWorker
işlevini aşağıdaki kodla değiştirin:// Unregister a service worker, then update the UI.
async function unRegisterServiceWorker() {
// Get a reference to the service worker registration.
let registration = await getRegistration();
// Await the outcome of the unregistration attempt
// so that the UI update is not superceded by a
// returning Promise.
await registration.unregister();
updateUI();
}
Canlı uygulamayı görüntülediğiniz sekmede sayfayı yeniden yükleyin. Hizmet çalışanı kaydet ve Hizmet çalışanı kaydını iptal et düğmeleri artık çalışıyor olmalıdır.
Hizmet işleyiciye bildirim gönderme
Bu adımda, kullanıcı uygulama kullanıcı arayüzünde Bildirim gönder'i tıkladığında çalışacak kodu yazarsınız. Bu kod bildirim oluşturur, bir hizmet çalışanının kayıtlı olup olmadığını kontrol eder ve ardından postMessage
yöntemini kullanarak bildirimi hizmet çalışanına gönderir.
Yerleşik Glitch düzenleyicisinde public/index.js
dosyasını açın ve sendNotification
işlevini aşağıdaki kodla değiştirin:
// Create and send a test notification to the service worker.
async function sendNotification() {
// Use a random number as part of the notification data
// (so you can tell the notifications apart during testing!)
let randy = Math.floor(Math.random() * 100);
let notification = {
title: 'Test ' + randy,
options: { body: 'Test body ' + randy }
};
// Get a reference to the service worker registration.
let registration = await getRegistration();
// Check that the service worker registration exists.
if (registration) {
// Check that a service worker controller exists before
// trying to access the postMessage method.
if (navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.postMessage(notification);
} else {
console.log('No service worker controller found. Try a soft reload.');
}
}
}
Bu kod şu işlemleri yapar:
sendNotification
asynkron bir işlev olduğundan hizmet çalışanı kaydına referans almak içinawait
'u kullanabilirsiniz.Servis çalışanının
postMessage
yöntemi, uygulamadan servis çalışanına veri gönderir. Daha fazla bilgi için postMessage ile ilgili MDN dokümanlarına göz atın.Kod,
postMessage
işlevine erişmeye çalışmadan öncenavigator.serviceWorker.controller
mülkünün varlığını kontrol eder. Etkin bir hizmet çalışanı yoksa veya sayfa zorla yenilendiyse (Shift+
Yeniden yükle)navigator.serviceWorker.controller
null
olur. Daha fazla bilgi için MDN'deki ServiceWorker denetleyici dokümanlarına bakın.
Hizmet çalışanında bildirimleri işleme
Bu adımda, hizmet çalışanına gönderilen mesajları işleyen ve kullanıcıya bildirim gösteren kod yazarsınız.
Yerleşik Glitch düzenleyicisinde public/service-worker.js
öğesini açın. Dosyanın sonuna aşağıdaki kodu ekleyin:
// Show notification when received
self.addEventListener('message', (event) => {
let notification = event.data;
self.registration.showNotification(
notification.title,
notification.options
).catch((error) => {
console.log(error);
});
});
Aşağıda kısa bir açıklama verilmiştir:
self
, hizmet çalışanının kendisine bir referanstır.Bildirimlerin gösterilmesi artık hizmet çalışanı tarafından yönetiliyor olsa da kullanıcıdan bildirim izni almak ana uygulama kullanıcı arayüzünün sorumluluğundadır. İzin verilmezse
showNotification
tarafından döndürülen söz reddedilir. Yukarıdaki kodda, yakalanmayanPromise
ret hatasını önlemek ve bu hatayı biraz daha düzgün bir şekilde ele almak için bircatch
bloğu kullanılmaktadır.
Sorun yaşıyorsanız tamamlanmış kod için glitch.com/edit/#!/codelab-notifications-service-worker-completed adresine bakın.
Bu serinin bir sonraki codelab'ine geçin: Push bildirim sunucusu oluşturma.