Bu codelab'de, push bildirimi istemcisinin nasıl oluşturulacağı adım adım anlatılmaktadır. Codelab'in sonunda şu özelliklere sahip bir istemciniz olacak:
- Kullanıcının push bildirimlerine abone olmasını sağlar.
- Push mesajlarını alır ve bildirim olarak görüntüler.
- Kullanıcıyı push bildirimlerine olan aboneliği iptal eder.
Bu codelab'in amacı, uygulama ve oyun geliştirmeyi biraz konuşacağız. Ödeme yap Push bildirimleri nasıl çalışır? .
Bu codelab'in sunucu kodu zaten tamamlanmış. Sadece istemcinin uygulanmasıyla ilgili daha fazla bilgi edinin. Bir push bildirimi sunucusu hakkında daha fazla bilgi için Codelab: Push bildirimi oluşturma sunucu değerleridir.
push-notifications-client-codelab-complete adresine göz atın (kaynak) tıklayın.
Tarayıcı uyumluluğu
Bu codelab'in aşağıdaki işletim sistemi ve tarayıcı kombinasyonlarıyla çalıştığı bilinmektedir:
- Windows: Chrome, Edge
- macOS: Chrome, Firefox
- Android: Chrome, Firefox
Bu codelab'in aşağıdaki işletim sistemleriyle çalışmadığı bilinmektedir (veya işletim sistemi ve tarayıcı kombinasyonları):
- macOS: Cesur, Edge, Safari
- iOS
Kurulum
Kodun düzenlenebilir bir kopyasını alın
Bu talimatların sağ tarafında gördüğünüz kod düzenleyici Glitch UI'sını inceleyelim.
- Projeyi düzenlenebilir hale getirmek için Düzenlemek için Remiks'i tıklayın.
Kimlik doğrulamayı ayarlayın
Push bildirimlerini çalıştırabilmek için ayarlarınızı yapmanız gerekir. istemcinize kimlik doğrulama anahtarlarıyla erişebilirsiniz. Web push protokolü isteklerinizi imzalama başlıklı makaleye göz atın. bunun nedenini öğrenebilirsiniz.
- Glitch Kullanıcı Arayüzünde Araçlar'ı, ardından Terminal'i tıklayarak Glitch Terminal'i açın.
- Glitch Terminal'de
npx web-push generate-vapid-keys
komutunu çalıştırın. Özel anahtarı kopyalayın ve ortak anahtar/değer çiftlerine değer olmasıdır. - Glitch kullanıcı arayüzünde
.env
uygulamasını açıpVAPID_PUBLIC_KEY
veVAPID_PRIVATE_KEY
öğelerini güncelleyin. AyarlaVAPID_SUBJECT
-mailto:test@test.test
. Bu değerlerin tümü sarmalanmalıdır kullanabilirsiniz. Güncellemelerinizi yaptıktan sonra.env
dosyanız şuna benzer:
VAPID_PUBLIC_KEY="BKiwTvD9HA…"
VAPID_PRIVATE_KEY="4mXG9jBUaU…"
VAPID_SUBJECT="mailto:test@test.test"
- Glitch Terminal'i kapatın.
public/index.js
adlı kişiyi aç.VAPID_PUBLIC_KEY_VALUE_HERE
değerini ortak anahtarınızın değeriyle değiştirin.
Hizmet çalışanı kaydedin
İstemcinizin sonuçta verileri almak ve göstermek için bir hizmet çalışanına ihtiyacı olacaktır bildirimleri etkinleştirebilirsiniz. Hizmet çalışanının mümkün olduğunca erken kaydedilmesi en iyisidir. Bkz. Aktarılan iletileri şu şekilde alma ve görüntüleme bildirimlerine bakın.
// TODO add startup logic here
yorumunu aşağıdaki kodla değiştirin:
// TODO add startup logic here
if ('serviceWorker' in navigator && 'PushManager' in window) {
navigator.serviceWorker.register('./service-worker.js').then(serviceWorkerRegistration => {
console.info('Service worker was registered.');
console.info({serviceWorkerRegistration});
}).catch(error => {
console.error('An error occurred while registering the service worker.');
console.error(error);
});
subscribeButton.disabled = false;
} else {
console.error('Browser does not support service workers or push messages.');
}
subscribeButton.addEventListener('click', subscribeButtonHandler);
unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
- Siteyi önizlemek için Uygulamayı Görüntüle'ye basın. Ardından, Tam ekran .
- 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. Şu mesajı görüyor olmanız gerekir:
Service worker was registered.
Console'a giriş yaptı.
Push bildirimi izni isteme
Sayfa yüklendiğinde push bildirimleri göndermek için hiçbir zaman izin istememelisiniz. Bunun yerine kullanıcı arayüzünüz, kullanıcıya push bildirimleri almak isteyip istemediğini sormalıdır. Açıkça onayladıktan sonra (örneğin, bir düğmeyi tıklayarak) o zaman tarayıcıdan push bildirimi izni almak için resmi süreci başlatma.
- Glitch kullanıcı arayüzünde kodunuza dönmek için Kaynağı Görüntüle'yi tıklayın.
public/index.js
içindeki// TODO
yorumu şurada değiştirin: Şu kodu içerensubscribeButtonHandler()
:
// TODO
// Prevent the user from clicking the subscribe button multiple times.
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
console.error('The user explicitly denied the permission request.');
return;
}
if (result === 'granted') {
console.info('The user accepted the permission request.');
}
- Uygulama sekmesine geri dönün ve Aktarmak için abone ol'u tıklayın. Tarayıcınız veya işletim sistemi, web sitesinin sitelere izin vermek isteyip istemediğinizi size push bildirimleri gönderir. İzin ver'i (veya eşdeğer herhangi bir ifadeyi) tıklayın (tarayıcı/işletim sistemi kullanımları). Console'da sitenizin kabul edilip edilmediğini gösterir.
Push bildirimlerine abone ol
Abonelik işlemi, kontrol edilen bir web hizmetiyle etkileşimde bulunmayı push hizmeti adı verilen tarayıcı tedarikçisi. Google Haberler'i sunucuya göndermek için gereken push bildirimi abonelik bilgileri ve sunucunun bunu bir veritabanında uzun süre saklamasını sağlamak. İstemcinin push bildirimlerine abone olmasını sağlama konusuna bakın. ziyaret edin.
- Aşağıdaki vurgulanan kodu
subscribeButtonHandler()
hesabına ekleyin:
subscribeButton.disabled = true;
const result = await Notification.requestPermission();
if (result === 'denied') {
console.error('The user explicitly denied the permission request.');
return;
}
if (result === 'granted') {
console.info('The user accepted the permission request.');
}
const registration = await navigator.serviceWorker.getRegistration();
const subscribed = await registration.pushManager.getSubscription();
if (subscribed) {
console.info('User is already subscribed.');
notifyMeButton.disabled = false;
unsubscribeButton.disabled = false;
return;
}
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
});
notifyMeButton.disabled = false;
fetch('/add-subscription', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(subscription)
});
userVisibleOnly
seçeneği true
olmalıdır. Bir gün içinde
kullanıcıların görebileceği bildirimler göstermeden mesajları push etmek için
(sessiz itmeler) ancak tarayıcılar şu anda bu özelliğe izin vermemektedir
gizlilikle ilgili endişelerinden kaynaklanır.
applicationServerKey
değeri, şu işleve dayanır:
bir base64 dizesini Uint8Array'e dönüştürür. Bu değer şunun için kullanılır:
.
Push bildirimleri listesinden çık
Kullanıcı push bildirimlerine abone olduktan sonra kullanıcı adınızın şunları yapması gerekir: kullanıcının fikrini değiştirmesi durumunda e-posta listesinden çıkma yöntemi sağlama ve artık push bildirimleri almak istemiyor.
unsubscribeButtonHandler()
içindeki// TODO
yorumunu değiştirin aşağıdaki kodla değiştirin:
// TODO
const registration = await navigator.serviceWorker.getRegistration();
const subscription = await registration.pushManager.getSubscription();
fetch('/remove-subscription', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({endpoint: subscription.endpoint})
});
const unsubscribed = await subscription.unsubscribe();
if (unsubscribed) {
console.info('Successfully unsubscribed from push notifications.');
unsubscribeButton.disabled = true;
subscribeButton.disabled = false;
notifyMeButton.disabled = true;
}
Push mesajı alma ve bildirim olarak görüntüleme
Daha önce de belirtildiği gibi, bu sorunu çözmek için bir hizmet çalışanı istemciye aktarılan iletileri alma ve görüntüleme kaldırın. Bkz. Aktarılan iletileri şu şekilde alma ve görüntüleme bildirimlerini inceleyebilirsiniz.
public/service-worker.js
sayfasını aç ve// TODO
yorumunu değiştir aşağıdaki kodla Service Worker'ınpush
etkinlik işleyicisinde:
// TODO
let data = event.data.json();
const image = 'https://cdn.glitch.com/614286c9-b4fc-4303-a6a9-a4cef0601b74%2Flogo.png?v=1605150951230';
const options = {
body: data.options.body,
icon: image
}
self.registration.showNotification(
data.title,
options
);
- Uygulama sekmesine geri dönün.
- Bana bildir'i tıklayın. Push bildirimi alırsınız.
- Uygulama sekmenizin URL'sini diğer tarayıcılarda (hatta abonelik iş akışını takip edebilir ve ardından Tümünü bildir'i tıklayın. Aynı push bildirimini alırsınız. . Bu bölümde Tarayıcı/işletim sisteminin listesini görmek için tarayıcı uyumluluğu kombinasyonlarını test etmek amacıyla kullanılır.
Bildirimi birçok şekilde özelleştirebilirsiniz. Şu parametreleri inceleyin:
Daha fazla bilgi edinmek için ServiceWorkerRegistration.showNotification()
.
Kullanıcı bir bildirimi tıkladığında URL açma
Gerçek dünyada bildirimi, bir satın alma işlemi için ve sitenizi ziyaret etmelerini istemek üzere harekete geçirici bir mesaj ekleyin. Bunun için Service Worker'ınızı biraz daha yapılandırmanız gerekir.
- Hizmet çalışanının
notificationclick
öğesindeki// TODO
yorumunu değiştirin olay işleyicisi olarak kullanabilirsiniz:
// TODO
event.notification.close();
event.waitUntil(self.clients.openWindow('https://web.dev'));
- Uygulama sekmesine geri dönün, kendinize başka bir bildirim gönderin ve ardından
bildirimi tıklayın. Tarayıcınız yeni bir sekme açıp
https://web.dev
Sonraki adımlar
- Şunu inceleyin:
ServiceWorkerRegistration.showNotification()
bildirimleri özelleştirmenin farklı yollarını keşfedin. - Push bildirimlerine genel bakış başlıklı makaleyi inceleyin. .
- Codelab: Push bildirimi sunucusu oluşturma başlıklı makaleye göz atın abonelikleri yöneten ve Web push protokolü gönderen bir sunucu oluşturmayı öğrenin. kabul edersiniz.
- Bildirim Oluşturucu'yu deneyin adresine göz atın.