Web Push'u kullanma

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

Push API'yi kullanmak için izin alma

Normal bir web sitesine Push sunucusu kaydettiğinizde kullanıcıya izin istemi gösterilir. Kullanıcı, bu istemi kabul edebilir veya reddedebilir. Uzantılarla bu istem gösterilmez. Uzantınızda Push API'yi kullanmak için manifest.json dosyanızda notifications iznini ayarlamanız gerekir.

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

Bu izniniz yoksa registration.pushManager ile etkileşimde bulunduğunuzda hemen hata alırsınız. Bu hata, kullanıcının izni reddetmesiyle aynı sonucu verir. Ayrıca, notifications izninin yükleme sırasında izin uyarısı gösterilmesine neden olacağını unutmayın. Chrome, kullanıcı yeni izin isteğini onaylayana kadar mevcut yüklemelerde de uzantıyı devre dışı bırakır. Bu durumu nasıl ele alacağınız hakkında daha fazla bilgiyi izin uyarısı kılavuzunda bulabilirsiniz.

Push sağlayıcılar ve Push hizmetleri

İzni manifest.json dosyanıza ekledikten sonra arka uçunuz ile uzantı arasındaki bağlantıyı yapılandırmanız gerekir. Bu bağlantı iki bölümden oluşur: Push sağlayıcı ve Push hizmeti. Sağlayıcı, mesajı Push hizmetine göndermek için kullandığınız SDK'dır. Birçok farklı seçenek vardır ve herhangi bir Push sağlayıcı, Push API için çalışabilir (entegrasyonu kolaylaştıran bir SDK sunmayabilir). Nelerin mümkün olduğunu görmek için sağlayıcınızın SDK'sını denemeniz gerekir. Push hizmeti, son kullanıcının cihazının kaydedildiği hizmettir. Bu nedenle, Push sağlayıcı tarafından gönderilen tüm Push mesajları için uyarı verilebilir. Bu, tek tek tarayıcılara sabit kodla yerleştirildiği için kontrolünüzde olmayan bir durumdur. Chrome için Push hizmeti Firebase Cloud Messaging'dir. Chrome kullanıcısına gönderilen tüm mesajlar bu hizmet üzerinden yönlendirilir.

Push sağlayıcısını kendi sunucunuzda barındırma

Herhangi bir Push sağlayıcı çalışabilir ancak tüm sağlayıcılar, hizmet çalışanlarında çalışan bir SDK sunmaz. Çalıştırmayla ilgili sorun yaşarsanız sağlayıcınıza danışmanız gerekir. Ancak herkese açık bir sağlayıcı kullanmanız gerekmez. web-push gibi kitaplıkları kullanarak kendi arka uçunuzu barındırabilirsiniz.

Bu kitaplığı web-push-codelab.glitch.me adresini kullanarak test edebilirsiniz. Özellikle, tarayıcıda Push aboneliği oluşturmak için Push sunucusunun VAPID ortak anahtarını kopyalamanız gerekir. Bu ortak anahtar aslında base64 kodlu bir ikili değerdir. Tarayıcının Push manager'ına kaydolmak için bu değerin kodunun çözülüp Uint8Array'e dönüştürülmesi gerekir. Bu mantığı uygulamak için kullanılabilecek kitaplıklar vardır ancak yalnızca aşağıdakiler gereklidir.

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 değer, Push Manager'a 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 nesne olan PushSubscription döndürür. web-push-codelab.glitch.me adresini kullandığınız için bu değerin sayfanın Push Subscription (Push Aboneliği) bölümüne kopyalanması gerekir.

PushSubscription'ı aldıktan sonra uzantımızın hizmet çalışanında push mesajları için bir işleyici kaydetmeye hazırsınız.

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

Dinleyiciniz yerindeyken 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 birçok mevcut doküman bulunmaktadır. Burada ele alınan örneğin tam sürümünü uzantı örnekleri depomuzda bulabilirsiniz.

Sessiz anlık bildirim

Chrome 88'de Manifest v3 kullanıma sunulduğundan beri Manifest v3 uzantınızda push bildirimi alabiliyorsunuz. Ancak, bildirimin her zaman kullanıcı tarafından görülebilen bir istem göstermesi (ör. web bildirimi) gerekiyordu. Bu durum, kullanıcıyı gereksiz bilgilerle rahatsız etmeden uzantınıza komut veya veri güncellemesi göndermek istediğinizde uzantıyı çok daha az kullanışlı hale getiriyordu. Chrome 121'den itibaren uzantılar userVisibleOnly özelliğini false olarak ayarlayabilir. Artık kullanıcılarınıza sessiz ve kullanıcıya yönelik olmayan push bildirimleri gönderebilirsiniz. Bu özelliği kullanmak için pushManager.subscribe'ı aradığınızda userVisibleOnly ayarını false olarak belirleyin.

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