Użyj Web Push

W rozszerzeniach możesz używać dowolnego dostawcy powiadomień push do wysyłania powiadomień i wiadomości push. Powiadomienie z interfejsu Push API zostanie przetworzone przez skrypt service worker natychmiast po jego otrzymaniu. Jeśli skrypt service worker został zawieszony, powiadomienie push go wybudzi. Proces używania go w rozszerzeniach jest dokładnie taki sam jak w przypadku otwartej sieci.

Uzyskiwanie uprawnień do korzystania z interfejsu Push API

Gdy rejestrujesz serwer Push w zwykłej witrynie, użytkownikowi wyświetla się prośba o przyznanie lub odrzucenie uprawnień. z rozszerzeniami, które nie będą się wyświetlać. Aby korzystać z 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 registration.pushManager spowoduje natychmiastowy błąd, tak samo jak w przypadku, gdy użytkownik odmówi przyznania uprawnień. Pamiętaj też, że uprawnienie notifications spowoduje wyświetlenie ostrzeżenia o uprawnieniach podczas instalacji. Chrome wyłączy też rozszerzenie w przypadku wszystkich istniejących instalacji, dopóki użytkownik nie zatwierdzi nowej prośby o uprawnienia. Więcej informacji o tym, jak sobie z tym poradzić, znajdziesz w przewodniku po ostrzeżeniach dotyczących uprawnień.

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ę powiadomień push. Dostawca to pakiet SDK, którego używasz do wysyłania wiadomości do usługi Push. Dostępnych jest wiele różnych opcji, a każdy dostawca powiadomień push może współpracować z interfejsem Push API (chociaż może nie oferować pakietu SDK, który ułatwia integrację). Aby sprawdzić, co jest możliwe, musisz przeprowadzić eksperymenty z pakietem SDK dostawcy. Usługa Push to usługa, w której zarejestrowane jest urządzenie użytkownika końcowego, dzięki czemu może ono otrzymywać powiadomienia o wiadomościach push wysyłanych przez dostawcę usługi Push. Nie masz na to wpływu, ponieważ jest to na stałe wpisane w poszczególne przeglądarki. W przypadku Chrome usługą Push jest Firebase Cloud Messaging. Wszystkie wiadomości wysyłane do użytkownika Chrome będą kierowane przez ten serwer.

Samodzielne hostowanie dostawcy powiadomień push

Może to być dowolny dostawca powiadomień push, ale nie wszyscy oferują pakiet SDK, który działa w skryptach service worker. Jeśli masz problemy z uruchomieniem, skontaktuj się z dostawcą. Nie musisz jednak korzystać z usług publicznego dostawcy. Korzystając z bibliotek takich jak web-push, możesz hostować własny backend.

Możesz przetestować tę bibliotekę na stronie 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 jest w rzeczywistości wartością binarną zakodowaną w base64, którą trzeba będzie zdekodować i przekonwertować na Uint8Array, aby zarejestrować ją w menedżerze Push przeglądarki. Istnieją biblioteki, które mogą wykonać tę logikę, ale wystarczy poniższy kod.

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 obiekt PushSubscription, który zawiera metadane serwera Push. Ponieważ używasz domeny web-push-codelab.glitch.me, musisz skopiować tę wartość do sekcji Subskrypcja powiadomień push na stronie.

Gdy uzyskasz PushSubscription, możesz zarejestrować detektor wiadomości push w skrypcie service worker rozszerzenia.

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

Po skonfigurowaniu odbiornika możesz przesłać wiadomość na stronie web-push-codelab.glitch.me. Wiadomości będą rejestrowane w konsoli service workera.

Jest to otwarty standard internetowy, więc istnieje wiele dokumentacji dotyczącej wdrażania powiadomień push w internecie, w tym na blogu Chrome. Pełna wersja przykładu omówionego w tym artykule jest dostępna w naszym repozytorium przykładowych rozszerzeń.

Silent Push

Od czasu wprowadzenia platformy Manifest V3 w Chrome 88 możesz otrzymywać powiadomienia push w rozszerzeniu Manifest V3. Zawsze jednak wymagaliśmy, aby powiadomienie zawierało widoczny dla użytkownika komunikat, np. powiadomienie internetowe. Sprawiało to, że było ono znacznie mniej przydatne, jeśli chciałeś wysyłać polecenia lub aktualizacje danych do rozszerzenia bez zawracania użytkownikowi głowy niepotrzebnymi informacjami. Od Chrome 121 rozszerzenia mogą ustawiać wartość userVisibleOnly na false. Możesz teraz wysyłać do użytkowników ciche powiadomienia push, które nie są widoczne dla użytkowników. Aby z niej korzystać, ustaw userVisibleOnly na false, gdy dzwonisz pod numer pushManager.subscribe.

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