Подключение Firebase к своему проекту для рассылки push уведомлений

[Admin]

1. Зарегистрироватся на https://firebase.google.com
2. Добавить библиотекту Firebase в свой проект

Код: Выделить всё

npm i firebase

3. Создать новое приложение в разделе Project settings - General - Your apps - Add New - Javascript (web). После добавления вам будет доступен ваш firebaseConfig
3. В корне сайта создать файл firebase-messaging-sw.js со следующим содержимым.
Переменную из firebaseConfig взять из кабинета

Код: Выделить всё

importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-messaging.js');

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
};

const app = firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging(app);
messaging.onBackgroundMessage((payload) => {
    console.log('[firebase-messaging-sw.js] Received background message ', payload);
});

4. Добавить обработчик на кнопку для подписки на уведомления. firebaseConfig взять из кабинета

Код: Выделить всё

const firebaseConfig = {
    apiKey: "",
    authDomain: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: ""
};
console.log("Requesting permission...");
Notification.requestPermission().then(permission => {
    if (permission === "granted") {
        console.log("Права на уведомления получены");
        const app = initializeApp(firebaseConfig);
        const messaging = getMessaging(app);
        getToken(messaging, {
            vapidKey:"Ваш vapid key",
        }).then(currentToken => {
            const formData = new FormData();
            formData.append("firebaseKey",String(currentToken));
            fetch("/api/registerFirebaseKey",{
                method:"POST",
                body:formData
            }).then(response=>{
                if(response.status==="ok"){
                    localStorage.setItem("webpushEnabled","1");
                    console.log("Права получены");
                }
            })
        });
    } else {
        console.log("Не получено разрешение");
    }
});