Powiadomienia push w Vue PWA
Push API, Notification API, klucze VAPID, subskrybowanie użytkowników oraz wysyłanie z serwera.
Powiadomienia push w Vue PWA to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.
Powiadomienia push w PWA
Web Push umożliwia serwerowi wysyłanie powiadomień do użytkownika nawet wtedy, gdy aplikacja jest zamknięta. Łączy interfejsy Notification API i Push API oraz service workera, a wszystko opiera się na wyraźnej zgodzie użytkownika.
Żądanie zgody
Przed zasubskrybowaniem powiadomień należy poprosić o zgodę. Notification.requestPermission() zwraca promise, który zostaje rozstrzygnięty jako "granted", "denied" lub "default".
const permission = await Notification.requestPermission();
if (permission === "granted") {
// proceed to subscribe
}Wywołanie w reakcji na działanie użytkownika
Przeglądarki wymagają, aby monit o zgodę pojawił się w reakcji na działanie użytkownika, takie jak kliknięcie przycisku. Nie należy nigdy żądać zgody podczas ładowania strony — takie żądanie zostanie zignorowane albo zirytuje użytkowników.
<button @click="enableNotifications">
Enable notifications
</button>Pobieranie rejestracji service workera
Subskrypcje push są przypisane do aktywnej rejestracji service workera. Należy zaczekać na navigator.serviceWorker.ready, aby ją pobrać.
const registration = await navigator.serviceWorker.ready;applicationServerKey
Push korzysta z kluczy VAPID. Serwer przechowuje klucz prywatny, a klient subskrybuje powiadomienia za pomocą klucza publicznego przekonwertowanego do postaci Uint8Array.
function urlBase64ToUint8Array(base64) {
const padding = "=".repeat((4 - base64.length % 4) % 4);
const raw = atob((base64 + padding).replace(/-/g, "+").replace(/_/g, "/"));
return Uint8Array.from([...raw].map((c) => c.charCodeAt(0)));
}pushManager.subscribe
Subskrypcję należy utworzyć za pośrednictwem pushManager rejestracji. Należy ustawić userVisibleOnly: true i przekazać przekonwertowany applicationServerKey.
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});Dlaczego userVisibleOnly
userVisibleOnly: true gwarantuje, że każde powiadomienie push wyświetli widoczne powiadomienie. Przeglądarki wymagają tego ustawienia, aby zapobiegać cichemu śledzeniu w tle.
Wysyłanie subskrypcji do serwera
Obiekt subskrypcji zawiera punkt końcowy i klucze potrzebne serwerowi. Należy wysłać go metodą POST do backendu, aby przechować go na potrzeby późniejszego wysyłania powiadomień.
await fetch("/api/subscribe", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(subscription)
});Serwer wysyła powiadomienie push
Backend korzysta z biblioteki Web Push i prywatnego klucza VAPID, aby wysłać dane do przechowywanego punktu końcowego.
// Node backend (web-push library)
webpush.sendNotification(
subscription,
JSON.stringify({ title: "Hello", body: "New message" })
);Odbieranie powiadomień push w service workerze
Service worker obsługuje zdarzenie push i wywołuje showNotification, aby wyświetlić powiadomienie.
// service worker
self.addEventListener("push", (event) => {
const data = event.data.json();
event.waitUntil(
self.registration.showNotification(data.title, {
body: data.body,
icon: "/pwa-192.png"
})
);
});Obsługa kliknięć powiadomień
Na kliknięcia należy reagować za pomocą zdarzenia notificationclick, aby uaktywnić aplikację lub otworzyć ją na właściwej stronie.
self.addEventListener("notificationclick", (event) => {
event.notification.close();
event.waitUntil(clients.openWindow("/inbox"));
});Szybkie sprawdzenie
Dlaczego podczas subskrybowania powiadomień push wymagane jest ustawienie userVisibleOnly: true?
Podsumowanie
Web Push rozpoczyna działanie od wywołania Notification.requestPermission() w reakcji na działanie użytkownika, a następnie od wywołania registration.pushManager.subscribe z ustawieniem userVisibleOnly: true i kluczem applicationServerKey. Należy wysłać subskrypcję do serwera, który wysyła dane odbierane przez service workera w zdarzeniu push i wyświetlane za pomocą showNotification.
Często zadawane pytania
Czy lekcja „Powiadomienia push w Vue PWA” jest bezpłatna?
Tak — pełny tekst „Powiadomienia push w Vue PWA” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Powiadomienia push w Vue PWA”?
Push API, Notification API, klucze VAPID, subskrybowanie użytkowników oraz wysyłanie z serwera. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Powiadomienia push w Vue PWA”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?
Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Konfiguracja vite-plugin-pwa
- Strategie Service Worker
- Obsługa trybu offline i synchronizacja w tle
- Powiadomienia push w Vue PWA