Użyj Web Push

W rozszerzeniach możesz używać dowolnego dostawcy Push do wysyłania powiadomień push i wiadomości. Komunikat push z interfejsu Push API zostanie przetworzony przez skrypt service worker zaraz po jego otrzymaniu. Jeśli skrypt service worker został zawieszony, metoda push wybudzi go z powrotem. Używanie ich w rozszerzeniach wygląda 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 lub odrzucenie żądania. W przypadku rozszerzeń prompty nie będą się wyświetlać. Aby użyć interfejsu Push API w rozszerzeniu, musisz ustawić uprawnienie notifications w pliku manifest.json

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

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

Dostawcy powiadomień push i usługi push

Po dodaniu uprawnień do pliku manifest.json musisz skonfigurować połączenie między backendem a rozszerzeniem. Połączenie to można rozumiać w 2 części: dostawcy Push i usługi Push. Dostawca to pakiet SDK, którego używasz do wysyłania wiadomości do usługi Push. Jest wiele różnych opcji, a każdy dostawca funkcji Push może obsługiwać interfejs Push API (chociaż może nie oferować pakietu SDK, który ułatwia integrację). Aby to sprawdzić, musisz poeksperymentować z pakietem SDK dostawcy. Usługa push to usługa, za pomocą której rejestrowane jest urządzenie użytkownika, dlatego może być ono powiadamiane o każdej wiadomości push wysłanej przez dostawcę usługi Push. Nie masz nad tym kontroli, ponieważ jest on zakodowany na stałe w poszczególnych przeglądarkach. W przypadku Chrome Komunikacja w chmurze Firebase to usługa Push. Wszystkie wiadomości przekazywane do użytkownika Chrome są przez niego kierowane.

Samodzielne hostowanie dostawcy usług push

Dowolny dostawca funkcji push może działać, ale nie wszyscy dostawcy oferują pakiet SDK, który działa w mechanizmach service worker. Jeśli masz problemy z jego uruchomieniem, 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ę, używając pliku web-push-codelab.glitch.me. W szczególności musisz skopiować klucz publiczny VAPID serwera push, aby wygenerować subskrypcję Push w przeglądarce. Klucz publiczny jest w rzeczywistości zakodowaną w formacie base64 wartością binarną, która musi zostać zdekodowana i przekonwertowana na format Uint8Array, aby zarejestrować go w narzędziu Push Manager przeglądarki. Istnieją biblioteki, które obsługują tę logikę, ale potrzebne są wszystkie potrzebne informacje.

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 usługi Push Manager

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 obiekt PushSubscription, który zawiera metadane serwera Push. Ponieważ używasz pliku web-push-codelab.glitch.me, musisz skopiować tę wartość do sekcji strony dotyczącej subskrypcji push.

Po uzyskaniu subskrypcji PushSubscription możesz zarejestrować detektor wiadomości push w mechanizmie Service Worker naszego rozszerzenia.

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

Po skonfigurowaniu detektora możesz przesłać wiadomość na stronie web-push-codelab.glitch.me – wiadomości będą logowane w konsoli skryptu service worker.

Ponieważ jest to otwarty standard internetowy, dostępna jest m.in. dokumentacja na temat implementacji tej funkcji (m.in. na blogu Chrome). Pełną wersję omówionego tu przykładu znajdziesz w przykładowym repozytorium rozszerzeń.

Ciche wypchnięcie

Od momentu wprowadzenia w Chrome 88 powiadomienia push możesz otrzymywać w rozszerzeniu Manifest V3. Zawsze jednak było wymaganie, aby powiadomienie zawierało jakiś rodzaj widoczny dla użytkownika, np. powiadomienie internetowe. Było to o wiele mniej przydatne w sytuacji, gdy trzeba było przekazywać polecenia lub aktualizacje danych do rozszerzenia, nie martwiąc się o niepotrzebne informacje. Od Chrome 121 rozszerzenia mogą ustawiać wartość userVisibleOnly na false. Teraz możesz wysyłać do użytkowników ciche powiadomienia push, które nie są widoczne dla użytkowników. Aby tego użyć, ustaw userVisibleOnly na false podczas wywoływania funkcji pushManager.subscribe.

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