Użyj Web Push

W rozszerzeniach możesz wysyłać powiadomienia push i wiadomości za pomocą dowolnego dostawcy powiadomień push. Komunikat push z Push API zostanie przetworzony przez Twoje narzędzie pomocnicze od razu po otrzymaniu. Jeśli usługa w tle została zawieszona, powiadomienie push ją ponownie uruchomi. Korzystanie z nich w rozszerzeniach wygląda dokładnie tak samo jak w otwartej sieci.

Uzyskiwanie uprawnień do korzystania z interfejsu Push API

Gdy zarejestrujesz serwer Push w zwykłej witrynie, użytkownik zobaczy prośbę o przyznanie uprawnień do wysyłania powiadomień push. W przypadku rozszerzeń tego typu komunikat nie będzie wyświetlany. Aby korzystać z interfejsu Push API w rozszerzeniu, musisz w pliku manifest.json ustawić uprawnienie notifications.

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

Jeśli nie masz tego uprawnienia, każda interakcja z registration.pushManager spowoduje natychmiastowy błąd, tak samo jak w przypadku odmowy udzielenia uprawnienia przez użytkownika. Pamiętaj też, że uprawnienie notifications spowoduje wyświetlenie ostrzeżenia podczas instalacji. Chrome wyłączy też rozszerzenie we wszystkich dotychczasowych instalacjach, dopóki użytkownik nie zaakceptuje nowej prośby o przyznanie uprawnień. Więcej informacji o tym, jak sobie z tym poradzić, znajdziesz w przewodniku dotyczącym ostrzeżeń o wymaganych uprawnieniach.

Dostawcy i usługi powiadomień push

Po dodaniu uprawnień do pliku manifest.json musisz skonfigurować połączenie między backendem a rozszerzeniem. To połączenie można podzielić na 2 części: dostawcę powiadomień push i usługę push. Dostawca to pakiet SDK używany do wysyłania wiadomości do usługi Push. Dostępnych jest wiele różnych opcji, a z Push API może korzystać każdy dostawca powiadomień push (chociaż może nie oferować pakietu SDK, który ułatwia integrację). Aby sprawdzić dostępne możliwości, musisz poeksperymentować z pakietem SDK dostawcy. Usługa powiadomień push to usługa, w której rejestrowane jest urządzenie użytkownika, aby można było wysyłać na nie powiadomienia push. Nie masz nad tym kontroli, ponieważ jest to zakodowane w poszczególnych przeglądarkach. W przypadku Chrome usługą push jest Firebase Cloud Messaging. Wszystkie wiadomości przesyłane do użytkownika Chrome będą przekierowywane przez tę przeglądarkę.

Samodzielne hostowanie dostawcy powiadomień push

Dowolny dostawca usługi push może działać, ale nie wszyscy oferują pakiet SDK, który działa w mechanizmach Service Worker. Jeśli masz problemy z uruchomieniem tej kampanii, skontaktuj się z dostawcą. Nie musisz jednak korzystać z usług dostawcy publicznego. Korzystając z bibliotek takich jak web-push, możesz hostować własny backend.

Możesz przetestować tę bibliotekę za pomocą strony web-push-codelab.glitch.me. W szczególności musisz skopiować klucz publiczny VAPID serwera Push, aby wygenerować subskrypcję Push w przeglądarce. Ten klucz publiczny to w rzeczywistości wartość binarna zakodowana w base64, którą trzeba zdekodować i przekonwertować na format Uint8Array, by zarejestrować się w menedżerze Push przeglądarki. Istnieją biblioteki, które umożliwiają realizację tej logiki, ale wystarczy to:

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;
}

Podana wartość jest przekazywana do Menedżera powiadomień push.

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();

Funkcja subscribe zwraca PushSubscription, czyli obiekt zawierający metadane serwera Push. Ponieważ korzystasz z web-push-codelab.glitch.me, musisz skopiować tę wartość do sekcji Subskrypcja push na stronie.

Gdy masz subskrypcję powiadomień push, możesz zarejestrować odbiornika wiadomości push w serwisie workera rozszerzenia.

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

Po zainstalowaniu odbiornika możesz przesłać wiadomość na stronie web-push-codelab.glitch.me. Wiadomości będą zapisywane w konsoli usługi.

Ponieważ jest to otwarty standard internetowy, istnieje wiele dokumentów na temat wdrażania usługi Web Push, w tym na blogu Chrome. Pełna wersja przykładu, o którym mowa w tym artykule, jest dostępna w repozytorium przykładowych rozszerzeń.

Tryb cichy

Od czasu wprowadzenia Manifestu V3 w Chrome 88 możesz otrzymywać powiadomienia push w rozszerzeniu Manifest V3. Zawsze jednak wymagano, aby powiadomienie zawierało widoczne dla użytkownika prompt, na przykład powiadomienie internetowe. Było to więc mniej przydatne w sytuacji, gdy nie trzeba było przekazywać poleceń i aktualizować danych w rozszerzeniu bez zachęcania użytkownika do podawania zbędnych informacji. Od wersji Chrome 121 rozszerzenia mogą ustawić wartość false dla atrybutu userVisibleOnly. Możesz teraz wysyłać użytkownikom powiadomienia push bez dźwięku, które nie są widoczne dla użytkowników. Aby z niej korzystać, ustaw userVisibleOnly na false, gdy dzwonisz na numer pushManager.subscribe.

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