Użyj Web Push

W rozszerzeniach możesz używać dowolnego dostawcy usług push do wysyłania powiadomień push i wiadomości. Komunikaty push z interfejsu Push API będą przetwarzane przez skrypt service worker jako natychmiast po jego otrzymaniu. Jeśli skrypt service worker został zawieszony, komunikat push Wybudź je. Sposób użycia rozszerzenia jest taki sam jak w przypadku używa się go w otwartej sieci.

Uzyskiwanie uprawnień do korzystania z interfejsu Push API

Gdy rejestrujesz serwer push w zwykłej witrynie, użytkownikowi wyświetla się o uprawnieniach do przyznania lub odrzucenia. W przypadku rozszerzeń nie będzie się pojawiać wyświetlane. Aby używać w rozszerzeniu interfejsu Push API, musisz ustawić Uprawnienie notifications w pliku manifest.json

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

Jeśli nie masz tego uprawnienia, wszelkie interakcje z Funkcja registration.pushManager spowoduje natychmiastowy błąd, taki sam jak jeśli użytkownik odmówił ich przyznania. Pamiętaj też, że Uprawnienie notifications spowoduje ostrzeżenie o uprawnieniach wyświetlany przy instalacji. Chrome wyłączy też to rozszerzenie na urządzeniach dotychczasowych instalacji, dopóki użytkownik nie zatwierdzi nowej prośby o uprawnienia. Dostępne opcje więcej informacji na ten temat znajdziesz w przewodnika z ostrzeżeniami o uprawnieniach.

Dostawcy i usługi Push

Po dodaniu uprawnień do pliku manifest.json wykonaj te czynności: skonfigurować połączenie między backendem a rozszerzeniem. To połączenie można podzielić na 2 części: dostawcę Push i usługę Push. O dostawca to pakiet SDK używany przez Ciebie do wysyłania wiadomości do usługi Push. Jest wiele różnych opcji, a każdy dostawca usługi push może działać w niej API (chociaż może on nie oferować pakietu SDK ułatwiającego integrację). Ty będą musieli eksperymentować z pakietem SDK dostawcy, aby sprawdzić, co jest możliwe. Pchnięcie usługa to usługa, w której urządzenie użytkownika jest zarejestrowane, więc można otrzymywać alerty do dowolnej wiadomości push wysłanej przez dostawcę usługi Push. To coś, czego nie masz ponieważ jest on zakodowany na stałe w poszczególnych przeglądarkach. W przypadku Chrome: Firebase Komunikacja w chmurze to usługa Push. wszelkie wiadomości przekazywane do Chrome; będzie przekierowywany przez użytkownika.

Samodzielnie hostowanie dostawcy usług push

Dowolny dostawca usługi push może działać, ale nie wszyscy dostawcy oferują w mechanizmach Service Worker. W razie problemów skontaktuj się z usługodawcą jego uruchomienie. Nie musisz jednak korzystać z usług dostawcy publicznego. Zastosowanie takich jak web-push, możesz hostować własny backend.

Możesz przetestować tę bibliotekę za pomocą web-push-codelab.glitch.me. W szczególności należy: skopiuj klucz publiczny VAPID serwera push, by wygenerować komunikat subskrypcji w przeglądarce. Ten klucz publiczny to w rzeczywistości base64. zakodowaną wartość binarną, którą należy zdekodować i przekonwertować na Uint8Array, aby zarejestrować ją za pomocą funkcji Push przeglądarki . Istnieją biblioteki, które to umożliwiają, ale wystarczy wykonać poniższe czynności.

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 PushSubscription, który zawiera metadane serwera Push. Ponieważ używasz web-push-codelab.glitch.me, należy skopiować tę wartość do: subskrypcji push na stronie.

Gdy masz subskrypcję PushSubscription, możesz zarejestrować detektor komunikatów push w skryptach service worker naszego rozszerzenia.

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

Mając już odbiornik, możesz przesłać wiadomość na web-push-codelab.glitch.me, a wiadomości będą zalogowane na koncie. w konsoli skryptu service worker.

Ponieważ jest to otwarty standard internetowy, istnieje wiele dokumentów na ten temat jak zaimplementować Web Push, także na blogu Chrome. Dla gdzie jest pełna wersja omówionego przykładu. Jedna z nich jest dostępna przykładowe repozytorium rozszerzeń.

Tryb cichy

Otrzymujesz powiadomienie push w rozszerzeniu platformy Manifest V3 od wprowadzenia platformy Manifest V3 w Chrome 88. Jednak zawsze istnieje wymaganie, aby powiadomienie zawierało jakiś widoczny dla użytkownika prompt, np. powiadomienie internetowe. Przez to korzystanie z tych funkcji jest znacznie mniej przydatne, przekazywanie poleceń i aktualizacji danych rozszerzenia bez obawy, podawanie niepotrzebnych informacji. Od Chrome 121 rozszerzenia mogą ustawić wartość userVisibleOnly na false. Możesz teraz wysłać powiadomienia push, które nie są przeznaczone dla użytkowników. Aby skorzystać z tej funkcji, ustaw userVisibleOnly na false podczas rozmowy z numerem pushManager.subscribe.

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