Web Push'u kullanma

Uzantılarda, push bildirimleri ve mesajlar göndermek için herhangi bir Push sağlayıcıyı kullanabilirsiniz. Push API'den gelen bir push, alındığı anda hizmet çalışanınız tarafından işlenir. Hizmet çalışanı askıya alınmışsa bir Push ile tekrar etkinleştirilebilir. Uzantılarda kullanma süreci, açık web'de kullandığınızla tamamen aynıdır.

Push API'yi kullanma izni alma

Bir Push sunucusunu normal bir web sitesine kaydettiğinizde, kullanıcıya sunucuyu onaylaması veya reddetmesi için bir izin istemi gösterilir. Uzantılarla bu istem gösterilmez. Push API'yi uzantınızda kullanmak için manifest.json dosyanızda notifications iznini ayarlamanız gerekir.

  {
    "manifest_version": 3,
    ...
    "permissions": ["notifications"]

Bu izniniz yoksa registration.pushManager ile yapılan tüm etkileşimler, kullanıcı izni reddetmiş gibi anında bir hatayla sonuçlanır. Ayrıca, notifications izninin yükleme sırasında izin uyarısı gösterilmesine neden olacağını unutmayın. Chrome ayrıca, kullanıcı yeni izin isteğini onaylayana kadar mevcut yüklemeler için uzantıyı devre dışı bırakır. Bu durumu nasıl ele alacağınızla ilgili daha fazla bilgiyi izin uyarısı kılavuzunda bulabilirsiniz.

Push sağlayıcılar ve Push hizmetleri

manifest.json dosyanıza izni ekledikten sonra, arka uç ile uzantı arasındaki bağlantıyı yapılandırmanız gerekir. Bu bağlantı, Push sağlayıcı ve Push hizmeti olmak üzere iki bölümden oluşabilir. Sağlayıcı, mesajı Push hizmetine göndermek için kullandığınız SDK'dır. Birçok farklı seçenek vardır ve tüm Push sağlayıcıları Push API ile çalışabilir (ancak entegrasyonu kolaylaştıran bir SDK sunmayabilirler). Nelerin mümkün olduğunu görmek için sağlayıcınızın SDK'sını denemeniz gerekir. Son kullanıcının cihazının kayıtlı olduğu bir Push hizmeti, Push sağlayıcı tarafından gönderilen tüm Push mesajları için uyarı alabilir. Bu, tarayıcılara kod olarak yerleştirildiği için kontrolünüz altında değildir. Chrome için push hizmeti Firebase Cloud Messaging'dir. Chrome kullanıcısına gönderilen tüm mesajlar bu proxy üzerinden yönlendirilir.

Push sağlayıcıyı kendi kendinize barındırma

Herhangi bir Push sağlayıcısı çalışabilir ancak tüm sağlayıcılar hizmet işçilerinde çalışan bir SDK sunmaz. Çalıştırırken sorun yaşarsanız sağlayıcınıza danışmanız gerekir. Bununla birlikte, herkese açık sağlayıcı kullanmanız gerekmez. web-push gibi kitaplıklar kullanarak kendi arka ucunuzu barındırabilirsiniz.

Bu kitaplığı web-push-codelab.glitch.me adresini kullanarak test edebilirsiniz. Daha açık belirtmek gerekirse, tarayıcıda Push aboneliğini oluşturmak için Push sunucusunun VAPID ortak anahtarını kopyalamanız gerekir. Bu ortak anahtar, aslında tarayıcının Push yöneticisi'ne kaydolmak için kodu çözmesi ve Uint8Array'e dönüştürülmesi gereken base64 olarak kodlanmış bir ikili değerdir. Bu mantığı gerçekleştirmek için kullanılabilecek kitaplıklar vardır ancak gereken tek şey aşağıdakilerdir.

function urlB64ToUint8Array(base64String) {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');

  const rawData = atob(base64);
  const outputArray = new Uint8Array(rawData.length);

  for (let i = 0; i < rawData.length; ++i) {
    outputArray[i] = rawData.charCodeAt(i);
  }
  return outputArray;
}

Sağlanan bu değer Push yöneticisine iletilir.

const SERVER_PUBLIC_KEY = '_INSERT_VALUE_HERE_';
const applicationServerKey = urlB64ToUint8Array(SERVER_PUBLIC_KEY);

async function subscribe() {
  try {
    let subscription = await self.registration.pushManager.subscribe({
      userVisibleOnly: true,
      applicationServerKey
    });

    console.log(`Subscribed: ${JSON.stringify(subscription,0,2)}`);

    return subscription
  } catch (error) {
    console.error('Subscribe error: ', error);
  }
}

const subscription = await subscribe();

subscribe işlevi, Push sunucusunun meta verilerini içeren bir PushSubscription (Push aboneliği) nesnesi döndürür. web-push-codelab.glitch.me adresini kullandığınız için bu değerin sayfanın Push Aboneliği bölümüne kopyalanması gerekir.

PushSubscription'ı edindikten sonra, uzantımızın Service Worker'ında push mesajları için bir dinleyici kaydettirmeye hazır olursunuz.

self.addEventListener('push', function (event) {
  console.log(`Push had this data/text: "${event.data.text()}"`);
});

Dinleyiciniz hazır olduğunda web-push-codelab.glitch.me adresinde bir mesaj gönderebilirsiniz. Mesajlar, hizmet çalışanının konsoluna kaydedilir.

Açık bir web standardı olduğundan, Chrome'un blogu da dahil olmak üzere Web Push'un nasıl uygulanacağıyla ilgili çok sayıda doküman mevcuttur. Burada ele alınan örneğin tam sürümünü uzantılar örnek deposunda bulabilirsiniz.

Sessiz İtme

Manifest v3, Chrome 88'de kullanıma sunulduğundan beri Manifest v3 uzantınızda Push bildirimi alabiliyorsunuz. Ancak her zaman için bildirimin, Web Bildirimi gibi kullanıcının görebildiği bir tür istem göstermesi gerekliydi. Bu durum, kullanıcıyı gereksiz bilgilerle rahatsız etmeden uzantınıza komut veya veri güncellemeleri göndermek istediğinizde bu özelliğin çok daha az kullanışlı olmasını sağlıyordu. Chrome 121'den itibaren uzantılar userVisibleOnly özelliğini false olarak ayarlayabilir. Artık kullanıcılarınıza sessiz, kullanıcılara dönük olmayan push bildirimleri gönderebilirsiniz. Bu özelliği kullanmak için pushManager.subscribe'yi aradığınızda userVisibleOnly'yi false olarak ayarlayın.

let subscription = await self.registration.pushManager.subscribe({
  userVisibleOnly: false,
  applicationServerKey
});