Подключение Firebase к своему проекту для рассылки push уведомлений
Добавлено: 15 дек 2022, 17:22
1. Зарегистрироватся на https://firebase.google.com
2. Добавить библиотекту Firebase в свой проект
3. Создать новое приложение в разделе Project settings - General - Your apps - Add New - Javascript (web). После добавления вам будет доступен ваш firebaseConfig
3. В корне сайта создать файл firebase-messaging-sw.js со следующим содержимым.
Переменную из firebaseConfig взять из кабинета
4. Добавить обработчик на кнопку для подписки на уведомления. firebaseConfig взять из кабинета
2. Добавить библиотекту Firebase в свой проект
Код: Выделить всё
npm i firebase3. В корне сайта создать файл 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);
});Код: Выделить всё
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("Не получено разрешение");
}
});