Push-уведомления в Vue PWA
Push API, Notification API, ключи VAPID, подписка пользователей и отправка с сервера
«Push-уведомления в Vue PWA» — бесплатный урок Vue Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 4 уроков всего.
Push-уведомления в PWA
Web Push позволяет серверу отправлять уведомления пользователю, даже когда приложение закрыто. Для этого используются API уведомлений, Push API и сервис-воркер, работающие только после явного разрешения пользователя.
Запрос разрешения
Перед подпиской необходимо запросить разрешение. Notification.requestPermission() возвращает обещание, которое разрешается значением "granted", "denied" или "default".
const permission = await Notification.requestPermission();
if (permission === "granted") {
// proceed to subscribe
}Запрашивайте после действия пользователя
Браузеры требуют, чтобы запрос разрешения следовал за действием пользователя, например нажатием кнопки. Никогда не запрашивайте разрешение при загрузке страницы — такой запрос будет проигнорирован или начнет раздражать пользователей.
<button @click="enableNotifications">
Enable notifications
</button>Получение регистрации сервис-воркера
Push-подписки хранятся в регистрации активного сервис-воркера. Дождитесь navigator.serviceWorker.ready, чтобы получить ее.
const registration = await navigator.serviceWorker.ready;Ключ applicationServerKey
Для Push используются ключи VAPID. Сервер хранит закрытый ключ, а клиент подписывается с помощью открытого ключа, преобразованного в 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
Оформляйте подписку через pushManager регистрации. Установите userVisibleOnly: true и передайте преобразованный applicationServerKey.
const subscription = await registration.pushManager.subscribe({
userVisibleOnly: true,
applicationServerKey: urlBase64ToUint8Array(VAPID_PUBLIC_KEY)
});Зачем нужен userVisibleOnly
userVisibleOnly: true гарантирует, что каждое push-уведомление будет отображаться пользователю. Браузеры требуют этот параметр, чтобы предотвращать скрытое отслеживание в фоновом режиме.
Отправка подписки на ваш сервер
Объект подписки содержит конечную точку и ключи, необходимые серверу. Отправьте его методом POST на серверную часть, чтобы сохранить для последующей отправки уведомлений.
await fetch("/api/subscribe", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(subscription)
});Сервер отправляет Push
Серверная часть использует библиотеку Web Push и закрытый ключ VAPID, чтобы отправить полезную нагрузку на сохраненную конечную точку.
// Node backend (web-push library)
webpush.sendNotification(
subscription,
JSON.stringify({ title: "Hello", body: "New message" })
);Получение Push сервис-воркером
Сервис-воркер обрабатывает событие push и вызывает showNotification, чтобы отобразить уведомление.
// 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"
})
);
});Обработка нажатий на уведомления
Обрабатывайте нажатия с помощью события notificationclick, чтобы перевести приложение на нужную страницу или открыть ее.
self.addEventListener("notificationclick", (event) => {
event.notification.close();
event.waitUntil(clients.openWindow("/inbox"));
});Быстрая проверка
Почему при подписке на Push требуется userVisibleOnly: true?
Итоги
Web Push начинается с вызова Notification.requestPermission() после действия пользователя, затем выполняется registration.pushManager.subscribe с параметрами userVisibleOnly: true и applicationServerKey. Отправьте подписку на сервер, который передает полезные нагрузки; сервис-воркер получает их в событии push и отображает с помощью showNotification.
Изучай HTML с ИИ-репетитором — бесплатно
Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.
- Курсы
- 42
- Уроки
- 156
Часто задаваемые вопросы
Урок «Push-уведомления в Vue PWA» бесплатный?
Да — полный текст урока «Push-уведомления в Vue PWA» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 4 уроков всего.
Чему я научусь в уроке «Push-уведомления в Vue PWA»?
Push API, Notification API, ключи VAPID, подписка пользователей и отправка с сервера Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Push-уведомления в Vue PWA»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Настройка vite-plugin-pwa
- Стратегии Service Worker
- Офлайн-поддержка и фоновая синхронизация
- Push-уведомления в Vue PWA