Web Push'u kullanma

Uzantılarda, push bildirimleri göndermek ve çeşitli bildirimler için mesaj. Push API'den yapılan bir aktarma işlemi, hizmet çalışanınız tarafından alır. Service Worker askıya alındıysa Push CANNOT TRANSLATE Uzantılarda kullanma süreci, açık web'de kullanırsınız.

Push API'sini kullanma izni alma

Normal bir web sitesine bir Push sunucusu kaydettiğinizde kullanıcıya kabul etmesini veya reddetmesini sağlar. İstemsiz uzantılarla gösteriliyor. Uzantınızda Push API'sini kullanmak için manifest.json dosyanızda notifications izni

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

Bu izne sahip değilseniz registration.pushManager hemen bir hataya neden olur. Bu hatanın sonucu (kullanıcı izni reddettiyse). Ayrıca, notifications izni, izin uyarısına neden olur yükleme sırasında gösterilir. Chrome ayrıca Kullanıcı yeni izin isteğini onaylayana kadar mevcut yüklemeleri. Şunları yapabilirsiniz: bunun nasıl ele alınacağı ile ilgili daha fazla bilgi için izin uyarısı kılavuzunu inceleyin.

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ırın. Bu bağlantı Push sağlayıcısı ve Push hizmeti olmak üzere iki bölüm halinde düşünülebilir. CEVAP sağlayıcı, Push hizmetine mesaj göndermek için kullandığınız SDK'dır. Birçok farklı seçenek vardır ve herhangi bir Push sağlayıcısı Push için çalışabilir API'ye (ancak entegrasyonu kolaylaştıran bir SDK sunmayabilirler). Siz nelerin mümkün olduğunu görmek için sağlayıcınızın SDK'sıyla deneme yapması gerekir. İtme hizmet, son kullanıcının cihazının kayıtlı olduğu cihazdır. Dolayısıyla bu öğe için uyarı yapılabilir Push sağlayıcısı tarafından gönderilen herhangi bir push iletisi için. Bu, sahip olmadığınız bir tek tek tarayıcılara gömülü olduğundan, bunlar üzerinde tam denetime sahip değildir. Chrome için, Firebase Cloud Messaging, Push hizmetidir. Chrome'a aktarılan tüm mesajlar ü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 çalışan bir SDK sunmaz için de geçerlidir. Sorun yaşarsanız sağlayıcınıza danışmanız gerekir anlamaya başladım. Bununla birlikte, herkese açık sağlayıcı kullanmanız gerekmez. Kullanım web-push gibi kitaplıklar varsa kendi arka ucunuzu barındırabilirsiniz.

Bu kitaplığı test etmek için web-push-codelab.glitch.me. Özel olarak, Push oluşturmak için Push sunucusunun VAPID ortak anahtarını kopyalayın. abonelikten yararlanın. Bu ortak anahtar aslında bir base64 kodunun çözülmesi ve Uint8Array işlevini kullanarak tarayıcının Push özelliğine inceleyebilirsiniz. Bu mantığı gerçekleştirmek için kullanılabilecek kitaplıklar vardır ancak yalnızca aşağıdakiler gerekiyor.

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 aktarılır

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, PushSubscription, Push sunucusunun meta verilerini içeren nesne. web-push-codelab.glitch.me bağlantısını kullanarak, bu değerin Push Aboneliği bölümünde bulabilirsiniz.

PushSubscription'ı edindikten sonra, şu adım için bir dinleyici kaydettirmeye hizmet çalışanımıza otomatik push mesajları gönderebilirsiniz.

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 sayfasına yönlendirilirsiniz. Bu sayede mesajlar, hizmet çalışanının konsoluna ekleyin.

Açık bir web standardı olduğundan, bununla ilgili birçok mevcut belge mevcuttur Chrome'un blogu da dahil olmak üzere Web Push'u nasıl uygulayacağınızı öğreneceksiniz. Örneğin, tam sürümü için de extensions sample repo [uzantılar örnek deposu].

Sessiz İtme

Manifest v3 uzantınızda push bildirimi aldınız Manifest v3 sürümü, Chrome 88'de kullanıma sunulduğundan beri. Ancak her zaman bildirimde, kullanıcının görebileceği bir tür istem görüntülemesi şartı, Web Bildirimi gibi. Bu da, herhangi bir kurumda , kullanıcıya öğreteceğim. Chrome 121 sürümünden itibaren uzantılar kullanıcıları userVisibleOnly öğesini false olarak ayarlayabilir. Artık gönderebilirsiniz Kullanıcılarınıza yönelik olmayan, sessiz push bildirimleri. Bunu kullanmak için pushManager.subscribe numaralı telefonu aradığınızda userVisibleOnly değerini false olarak ayarlayın.

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