Как сделать запрос на Push уведомление для Android в Quasar Caricator?

Question

[D1ma5ta]

Делаю мобильное приложение на Quasar с Capacitor. Не могу понять, как при запуске приложения запросить у пользователя разрешение на показ Push уведомлений? У меня сделано вот так, но не работает. В вебе запрашивает разрешение, на android нет.

import { createApp } from "vue";
import App from "src/App.vue";
import { createPinia } from "pinia";
import router from "./routes";
import { useUserStore } from "./stores/userStore";
import { FirebaseMessaging } from "@capacitor-firebase/messaging";

const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.use(router);

const userStore = useUserStore();

app.mount("#app");

// Проверяем, запущено ли приложение на Android
const isAndroid = () => /Android/i.test(navigator.userAgent);

const requestNotificationPermission = async () => {
  if (isAndroid()) {
    try {
      const result = await FirebaseMessaging.requestPermissions();
      if (result.receive === "granted") {
        console.log("✅ Разрешение на уведомления получено (Android)");
        const { token } = await FirebaseMessaging.getToken();
        console.log("FCM-токен (Android):", token);
        if (userStore.userId) {
          await userStore.requestFCMPermission(userStore.userId, token);
        }
      } else {
        console.warn("❌ Разрешение на уведомления отклонено (Android)");
        alert(
          "Пожалуйста, включите уведомления в настройках приложения: Настройки > Приложения > Yo Bro > Уведомления."
        );
      }
    } catch (error) {
      console.error("Ошибка при запросе разрешения (Android):", error);
    }
    return;
  }

  // Веб-логика только для браузера
  if ("Notification" in window && "serviceWorker" in navigator) {
    try {
      const permission = await Notification.requestPermission();
      if (permission === "granted") {
        console.log("✅ Разрешение на уведомления получено (веб)");
        const { getMessaging, getToken } = await import("firebase/messaging");
        const messaging = getMessaging();
        const token = await getToken(messaging, {
          vapidKey:
            "BDYkhdsevukfsrIPM5iT0zPZp0aULZHFm7kzZsfnqtBYkeQoudMAGNDsNPlNj4kHcufJ2R9xlKt-lS1IzIOkxck",
        });
        if (token && userStore.userId) {
          await userStore.requestFCMPermission(userStore.userId, token);
        }
      } else {
        console.warn("❌ Разрешение на уведомления отклонено (веб)");
      }
    } catch (error) {
      console.error("Ошибка при запросе разрешения (веб):", error);
    }
  }
};

// Вызов после аутентификации
const auth = getAuth();
onAuthStateChanged(auth, async (user) => {
  if (user) {
    userStore.userId = user.uid;
    userStore.userEmail = user.email;
    await userStore.fetchUserProfile();
    await requestNotificationPermission();
  } else {
    userStore.userId = null;
    userStore.userEmail = null;
    userStore.userName = "";
  }
});

// Регистрация Service Worker только для веб
if (!isAndroid() && "serviceWorker" in navigator) {
  navigator.serviceWorker
    .register("/firebase-messaging-sw.js")
    .then((registration) => {
      console.log("Service Worker зарегистрирован:", registration);
    })
    .catch((err) => {
      console.error("Ошибка регистрации Service Worker:", err);
    });
}

Answer 1

[Антон Антон]

именно в капаситоре, ИМХО, лучше использовать их официальный плагин https://capacitorjs.com/docs/apis/push-notifications вот так:

import { PushNotifications } from '@capacitor/push-notifications'

export async function getPushToken() {
  let permStatus = (await PushNotifications.checkPermissions()).receive

  if (permStatus === 'prompt') {
    permStatus = (await PushNotifications.requestPermissions()).receive;
  }

  if (permStatus !== 'granted') {
    throw new Error('User denied permissions!');
  }

  const res = new Promise((resolve, reject) => {
      PushNotifications.addListener('registration', token => {
        resolve(token.value)
      });

      PushNotifications.addListener('registrationError', err => {
        reject(err.error);
      });
    })
  PushNotifications.register();

  return res
}

а в quasar дополнительно есть https://quasar.dev/options/platform-detection и https://quasar.dev/quasar-cli-vite/boot-files, которые можно сделать отдельно для капаситора, запихав эту функцию куда-нибудь в window, чтобы потом вызывать её в любом окружении (ну и можно еще сделать похожую функцию для PWA версии с сервис воркером используя пакет firebase/messaging от гугла напрямую)

также для капаситора есть хороший мануал, как эту всю шарманку завести https://capacitorjs.com/docs/guides/push-notificat... (там для ios не совсем тривиально, да и для андроида надо очень внимательно читать)

Comments

[D1ma5ta]

Спасибо большое! Посмотрю