Эта статья поможет вам реализовать push-уведомления Firebase без использования каких-либо пакетов в вашем проекте для последней версии 7.18.0 или выше.
ВВЕДЕНИЕ
Firebase использует облачные сервисы для своих сервисов уведомлений на Android, IOS и в Интернете. Firebase Cloud Messaging или FCM работают на базовых принципах токенов, которые уникально генерируются для каждого устройства и позже используются для отправки сообщений на соответствующие устройства.
В веб-push-уведомлениях используется javascript для вызова методов firebase и генерации токена. В этой статье объясняется, как реализовать облачный обмен сообщениями firebase, прямо при настройке проекта.
Note-FCM работает только для Https-сервера
1. Зарегистрируйте приложение Firebase
- Перейдите по ссылке https://console.firebase.google.com/u/0/ и нажмите Создать проект.
2. Введите название проекта и продолжите, как только название будет проверено Google на его уникальность.
3. Введите запрашиваемую информацию, например страну, примите условия и продолжайте. Подождите некоторое время, пока проект не будет создан.
4. Добавьте приложение в свой проект, это может быть что угодно от Android, IOS, Web, Unity. Для этой статьи нам понадобится веб-приложение, поэтому щелкните значок сети, представленный как ‹/›
5. Добавьте псевдоним к своему приложению, этот псевдоним предназначен только для пользователя и внутреннего использования, что означает, что полезно просто различать приложения в проекте с точки зрения пользователя.
Вы можете добавить хостинг для проекта, если ваш проект еще не запущен на https-сервере, иначе вы можете пропустить этот шаг.
Нажмите "Зарегистрировать приложение"
6. После того, как ваше приложение будет зарегистрировано, вам будет представлен Firebase SDK, который выглядит как код, написанный ниже. Вы можете скопировать его сейчас, в противном случае его также можно будет использовать позже из настроек, шаги для которых будет описано в следующем разделе.
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-app.js"></script>
General
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
For Messaging
<script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-messaging.js"></script>
Do not copy below code as it is,values will be different for your app.
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
authDomain: "myapp-project-123.firebaseapp.com",
databaseURL: "https://myapp-project-123.firebaseio.com",
projectId: "myapp-project-123",
storageBucket: "myapp-project-123.appspot.com",
messagingSenderId: "65211879809",
appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
};
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
2. Добавьте firebase в свой проект.
- На панели управления перейдите на боковую панель и нажмите значок настроек. См. Изображение ниже. Нажмите Настройки проекта.
2.После открытия страницы настроек (Общие настройки) прокрутите страницу вниз и скопируйте код, отображаемый для выбранного CDN.
3. Добавьте этот код в свой HTML-файл в конце после тега body и добавьте сценарий CDN для обмена сообщениями firebase, как показано в коде ниже.
<body>
----
----Your Page Contents
----
</body>
<script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.18.0/firebase-messaging.js"></script>
//Do not copy below code as it is values will be different for your app.
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
authDomain: "myapp-project-123.firebaseapp.com",
databaseURL: "https://myapp-project-123.firebaseio.com",
projectId: "myapp-project-123",
storageBucket: "myapp-project-123.appspot.com",
messagingSenderId: "65211879809",
appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
};
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
3.Запуск службы Firebase
- Для кода, упомянутого выше, добавьте строки в код ниже после строки инициализации firebase.
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const messaging=firebase.messaging();
//Custom function made to run firebase service
getStartToken();
//This code recieve message from server /your app and print message to console if same tab is opened as of project in browser
messaging.onMessage(function(payload){
console.log("on Message",payload);
});
2. Приведенный ниже код может быть записан в отдельный файл js, включенный в вашу html-страницу, или может быть добавлен к коду выше в теге ‹script›.
messaging.getToken () извлекает токен с помощью вызываемого firebase sdk, если токен найден, мы отправляем его на сервер для хранения, в противном случае мы запрашиваем разрешение у пользователя на отправку ему уведомления, вызывая метод RequestPermission (), это настраиваемая функция.
setTokenSentToServer () также является настраиваемой функцией, которая использует локальное хранилище для установки значения sendTokenToServer == 1, если токен уже отправлен на сервер, и 0, если токен не отправлен на сервер, при отправке на сервер произошла ошибка. разделить или получить его из Firebase SDK
function getStartToken(){
messaging.getToken().then((currentToken) => {
if (currentToken) {
sendTokenToServer(currentToken);
}
else {
// Show permission request.
RequestPermission();
setTokenSentToServer(false);
}
}).catch((err) => {
setTokenSentToServer(false);
});
}
function RequestPermission(){
messaging.requestPermission()
.then(function(permission){
if (permission === 'granted') {
console.log("have Permission");
//calls method again and to sent token to server
getStartToken();
}
else{console.log("Permission Denied");}
.catch(function(err){
console.log(err);
})
}
function sendTokenToServer(token){
if (!isTokensendTokenToServer()) {
$.ajax({
url: URL,
type: 'POST',
data: {
//whatever you wanna send
push_token:token,
},
success: function (response) {
setTokenSentToServer(true);
},
error: function (err) {
setTokenSentToServer(false);
},
});
}}
function isTokensendTokenToServer() {
return window.localStorage.getItem('sendTokenToServer') === '1';
}
function setTokenSentToServer(sent) {
window.localStorage.setItem('sendTokenToServer', sent ? '1' : '0');
}
3. отправить сообщение из проекта
1. Предварительные требования к отправке сообщений
а. Для vapidKey перейдите в настройки на консоли firebase, нажмите облачные сообщения, прокрутите страницу вниз в веб-конфигурации нажмите кнопку Создать пару ключей.
б) Код для отправки сообщения из вашего проекта, обратитесь в Google, чтобы узнать, как отправить запрос API с вашего соответствующего языка программирования.
СПОСОБ - ОПУБЛИКОВАТЬ
URL- https://fcm.googleapis.com/fcm/send
ЗАГОЛОВКИ - отправьте с авторизацией с помощью ключа, который можно найти в Настройки ›Cloud Messaging, найдите раздел учетные данные проекта и скопируйте ключ сервера. .
в - токен, который вы сохранили в своей базе данных для пользователя.
registeration_ids- при отправке на несколько устройств
c. Чтобы узнать о различных сообщениях и fcm_options, перейдите по этому URL-адресу https://firebase.google.com/docs/cloud-messaging/concept-options.
г. Если вы хотите отправлять уведомления FCM в своем формате, перейдите по ссылке https://firebase.google.com/docs/cloud-messaging/js/first-message и посмотрите формат сообщения уведомления.
д. в этой статье я буду использовать сообщения с данными / пользовательские / без предварительно определенных пар "ключ-значение".
Примечание. Данные отправляются в формате json
е. мои данные выглядят
{"registration_ids":{token1,token2,token3},"data":{ "title":"demo","body":this is demo data","clickUrl":"https://google.com"}}
5. добавить сервисного работника
- Добавьте файл Service-Worker по имени (не меняйте имя) firebase-messaging-sw.js в корневую папку проекта или общую папку, например открытие ссылки- https: //your-url/firebase-messaging-sw.js дает вам содержимое файла.
- полезная нагрузка - это данные, которые вы отправляете и получаете, когда будет отправлен запрос api.
- Вам не потребуется прослушиватель событий уведомления, если сообщение отправлено через стандартное сообщение уведомления FCM, fcm обработает его самостоятельно.
importScripts('https://www.gstatic.com/firebasejs/7.18.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.18.0/firebase-messaging.js');
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
authDomain: "myapp-project-123.firebaseapp.com",
databaseURL: "https://myapp-project-123.firebaseio.com",
projectId: "myapp-project-123",
storageBucket: "myapp-project-123.appspot.com",
messagingSenderId: "65211879809",
appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
};
firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();
messaging.usePublicVapidKey(ABp.........BS5A);
messaging.onBackgroundMessage(function(payload) {
const notificationTitle = payload.data.title;
const notificationOptions = {
body: payload.data.message,
icon:'PATH TO ICON IF ANY',
data: { url:payload.data.onClick }, //the url which we gonna use later
};
return self.registration.showNotification(notificationTitle,notificationOptions);
});
//Code for adding event on click of notification
self.addEventListener('notificationclick', function(event) {
let url = event.notification.data.url;
event.notification.close();
event.waitUntil(
clients.matchAll({type: 'window'}).then( windowClients => {
// Check if there is already a window/tab open with the target URL
for (var i = 0; i < windowClients.length; i++) {
var client = windowClients[i];
// If so, just focus it.
if (client.url === url && 'focus' in client) {
return client.focus();
}
}
// If not, then open the target URL in a new window/tab.
if (clients.openWindow) {
return clients.openWindow(url);
}
})
);
});
Это единственное, что вам нужно сделать, чтобы добавить веб-push firebase в свой проект.
Нажмите Clap, если эта статья вам действительно помогла.
