Web Push'u kullanma

Uzantılarda, push bildirimleri ve mesajlar göndermek için herhangi bir Push sağlayıcıyı kullanabilirsiniz. Push API'sinden yapılan bir aktarma, alındığında hizmet çalışanınız tarafından işlenir. Service Worker askıya alınmışsa Push özelliği hizmeti yeniden uyandırır. Uzantıda kullanma süreci, açık web'deki kullanım süreciyle bire bir aynıdır.

Push API'sini kullanma izni alma

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

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

Bu izne sahip değilseniz registration.pushManager ile herhangi bir etkileşim, kullanıcının izni reddetmesiyle aynı şekilde hemen bir hatayla sonuçlanır. Ayrıca, notifications izninin yükleme sırasında izin uyarısının görüntülenmesine 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 sorunu nasıl ele alacağınızla ilgili daha fazla bilgiyi izin uyarı kılavuzunda bulabilirsiniz.

Push sağlayıcıları ve Push hizmetleri

İzni manifest.json dosyanıza ekledikten sonra arka ucunuz ile uzantı arasındaki bağlantıyı yapılandırmanız gerekir. Bu bağlantı iki bölüm halinde düşünülebilir: Push sağlayıcısı ve Push hizmeti. Sağlayıcı, mesajı Push hizmetine göndermek için kullandığınız SDK'dır. Birçok farklı seçenek mevcuttur ve tüm Push sağlayıcıları Push API için ç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ıyla deneme yapmanız gerekir. Push hizmeti, son kullanıcının cihazının kayıtlı olduğu cihazdır. Bu sayede, bir Push sağlayıcısı tarafından gönderilen herhangi bir push mesajı için uyarı gösterilebilir. Bu, bağımsız tarayıcılara kod olarak gömüldüğü için kontrolünüz olmayan bir şeydir. Chrome'da Firebase Cloud Messaging, Push hizmetidir. Chrome kullanıcısına aktarılan tüm iletiler bu tarayıcı üzerinden yönlendirilir.

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

Tüm Push sağlayıcıları çalışabilir ancak tüm sağlayıcılar Service Worker'larda çalışan bir SDK sunmaz. Hizmeti çalıştırmakta sorun yaşarsanız sağlayıcınıza danışmanız gerekir. Ancak herkese açık bir sağlayıcı kullanmanıza gerek yoktur. web-push gibi kitaplıkları kullanarak kendi arka ucunuzu barındırabilirsiniz.

Bu kitaplığı web-push-codelab.glitch.me kullanarak test edebilirsiniz. Özellikle, 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öneticisine kaydolmak için kodunun çözülmesi ve bir Uint8Array'e dönüştürülmesi gereken base64 kodlamalı bir ikili program değeridir. Bu mantığı gerçekleştirmek için kullanılabilecek kitaplıklar vardır ancak gerekli olan tek şey aşağıda verilmiştir.

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 nesne olan PushSubscription hatası döndürür. web-push-codelab.glitch.me 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'ına push mesajları için bir dinleyici kaydedebilirsiniz.

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

İşleyiciniz hazır olduğunda web-push-codelab.glitch.me adresinden bir mesaj gönderebilirsiniz. Mesajlar, Service Worker'ın konsoluna kaydedilir.

Açık bir web standardı olduğundan, Web Push'un nasıl uygulanacağıyla ilgili çok sayıda belge mevcuttur. Chrome'un blogu da bu kapsamda yer alır. Burada ele alınan örneğin eksiksiz bir sürümünü uzantı örneği depomuzda bulabilirsiniz.

Sessiz İtme

Manifest v3 Chrome 88'de kullanıma sunulduğundan beri Manifest v3 uzantınızda push bildirimi almayı başardınız. Ancak her zaman bildirimin, Web Bildirimi gibi, kullanıcı tarafından görülebilen bir istem gösterme zorunluluğu vardı. Bu da, gereksiz bilgilerle kullanıcıyı rahatsız etmeden uzantınıza komutlar veya veri güncellemeleri aktarmak istediğinizde çok daha az kullanışlı hale geliyordu. Chrome 121'den itibaren uzantılar userVisibleOnly değerini false olarak ayarlayabilmektedir. Artık kullanıcılarınıza sessiz, kullanıcıya yönelik olmayan push bildirimleri gönderebilirsiniz. Bu özelliği kullanmak için, pushManager.subscribe çağırırken userVisibleOnly değerini false olarak ayarlayın.

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