Веб-push-уведомление Firebase с помощью javascript.
В этом блоге объясняется, как зарегистрироваться в firebase и создать работника службы firebase для получения сообщения, даже если веб-приложение не открыто в браузере,
используя javascript.
Начнем с регистрационной части
Если вы уже зарегистрировали свое приложение в firebase, вы можете пропустить этот раздел и перейти к следующему разделу Получение учетных данных FCM и ключа VAPId .
- После входа в систему firebase перейдите к консоли, нажав кнопку «перейти к консоли»
- Щелкните по добавленному проекту.
- Теперь введите название проекта и продолжайте
- Здесь аналитика проверяется по умолчанию, если вы хотите использовать аналитику Google для своего проекта, оставьте это так, в противном случае нажмите на переключатель и продолжите.
- На следующем шаге он может попросить вас создать учетную запись Google Analytics для вашего проекта в зависимости от вашего предыдущего выбора.
- Теперь вы попадете на обзорный экран вашего проекта, здесь вы можете увидеть круглые кнопки, как на изображении ниже. Щелкните по веб-кнопке.
7. Выполните шаги, которые вас просят на странице «Добавить Firebase в свое веб-приложение».
Вуаля! вы успешно зарегистрировали свое приложение на firebase.
Получение учетных данных FCM и ключа VAPId
Если вы уже знаете об этом, переходите к следующему разделу.
- Перейдите в консоль и щелкните свой проект.
- На странице проекта щелкните значок приложения, появится небольшое всплывающее окно, щелкните значок «Параметры».
- Вы попадете на страницу, которая выглядит именно так.
4. Прокрутите вниз, чтобы найти фрагмент SDK firebase, который выглядит примерно так, как показано ниже. Держите этот код под рукой, мы будем использовать его для инициализации firebase.
<!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script> <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries --> <script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-analytics.js"></script> <script> // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional var firebaseConfig = { apiKey: "myApiKey", authDomain: "browser-notif-test.firebaseapp.com", projectId: "browser-notif-test", storageBucket: "browser-notif-test.appspot.com", messagingSenderId: "myMessaginSenderId", appId: "myAppId", measurementId: "myMeasurementId"// this is for analytics purpose }; // Initialize Firebase firebase.initializeApp(firebaseConfig); firebase.analytics(); </script>
5. Перейдите на вкладку облачных сообщений в настройках, где вы найдете ключ сервера. Прокрутите вниз и нажмите кнопку «Создать», чтобы получить пустой ключ.
Кодирование клиента для веб-push-уведомлений FCM.
Технический стек
J, avascript, firebase-tools.
Давайте настроим
Настройка firebase-tool
Установите firebase-tools. (Если вы хотите сделать это с помощью экспресс-сервера, нажмите здесь и пропустите этот раздел)
npm install -g firebase-tools
Создайте каталог и добавьте эти файлы.
firebase.json
{
"hosting": {
"public": "./",
"ignore": [
"firebase.json"
]
}
}
manifest.json
{
"//_comment1": "Some browsers will use this to enable push notifications.",
"//_comment2": "It is the same for all projects, this is not your project's sender ID",
"gcm_sender_id": "202066980505"
}
Давайте настроим инструменты Firebase
Зайдите в свой каталог firebase (каталог, в котором находится файл firebase.json)
выполните следующие команды
$firebase login // it will take you to your default browser singin there with your credentials.
$firebase use --add
// We will use the below commnad to start firebase server on our local machine.
$firebase serve -p 8081
Настройка экспресс-сервера
Это альтернатива настройке инструмента firebase и, как правило, именно так вы можете обслуживать свою клиентскую страницу.
создать app.js
const express = require('express');
const app = express();
app.use(require('body-parser').json());
app.use(require('express-static')('./'));
app.listen(3000);
На этом настройка сервера завершена. Теперь вы можете выполнить следующий шаг как есть.
Напишем код.
Клиентская страница HTML и js.
index.html
скопируйте код SDK firebase в нижнюю часть тела index.html.
<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>FCM cloud messaging</title> </head> <body> <!-- your regular html code --> <!-- insert here the firebase sdk code--> <script> // All the other code realted to firebase will be below this </script> </body>
Код Firebase SDK используется для инициализации firebase, весь остальной код должен располагаться ниже этого.
Теперь давайте напишем код, чтобы получать сообщение на переднем плане.
index.html
//Put this inside the script
messaging.onMessage((payload) => {
console.log('Message received. ', payload);
});
Здесь полезная нагрузка будет содержать полученную информацию об уведомлении.
Отправка сообщения клиенту браузера firebase
Чтобы firebase могла отправлять сообщение клиенту, ему необходимо однозначно идентифицировать его, что он делает с помощью токена, токены генерируются на стороне клиента и могут храниться на стороне нашего сервера. Посмотрим, как получить токен клиента.
index.html
//Put this inside the script
//Below above snippet code.
messaging.getToken({vapidKey: 'MY_VAPID_KEY'}).then((currentToken) => {
if (currentToken) {
console.log("token is ",currentToken);
//Send this token to your server and store it.
} else {
console.log('No registration token available. Request permission to generate one.');
}
}).catch((err) => {
console.log('An error occurred while retrieving token. ', err);
});
В приведенном выше фрагменте используйте свой пустой ключ.
Вы можете запустить сервер firebase и проверить напечатанный токен в консоли браузера.
Теперь давайте настроим получение уведомлений, даже если наше приложение не находится на переднем плане или сам браузер закрыт (фоновое уведомление).
создайте новый файл firebase-messaging-sw.js и добавьте следующий контент.
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.0/firebase-messaging.js');
//Remeber this part we have used above in our index.html
var firebaseConfig = {
apiKey: "myApiKey",
authDomain: "browser-notif-test.firebaseapp.com",
projectId: "browser-notif-test",
storageBucket: "browser-notif-test.appspot.com",
messagingSenderId: "myMessaginSenderId",
appId: "myAppId",
measurementId: "myMeasurementId"// this is for analytics purpose
};
const messaging = firebase.messaging();
messaging.onBackgroundMessage(function(payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
// Customize notification here
const notificationTitle = 'Title';
const notificationOptions = {
body: payload,
icon: '/firebase-logo.png'
};
self.registration.showNotification(notificationTitle,
notificationOptions);
});```
Предполагается, что указанный выше файл запускается в фоновом режиме, поэтому мы зарегистрируем его в сервис-воркере (механизм для запуска процесса в фоновом режиме, нажмите на чернила, чтобы лучше понять сервис-воркера.)
Давайте зарегистрируемся у обслуживающего персонала
async function registerWorker() {
console.log('Registering service worker');
const registration = await navigator.serviceWorker.
register('/firebase-messaging-sw.js', {scope: '/'});
console.log('Registered service worker');
const subscription = await registration.pushManager.
subscribe({
userVisibleOnly: true,
applicationServerKey: 'my_VAPID'
});
}
if ('serviceWorker' in navigator) {
console.log('Registering service worker');
regiserWorker().catch(error => console.error(error));
}
Теперь мы запускаем сервер firebase с помощью firebase serve -p 8081 или, если у вас есть экспресс-настройка сервера, выполните node app.js.
Вы можете перейти на localhost: 8081, чтобы увидеть свою клиентскую страницу, скопируйте идентификатор токена, напечатанный в консоли. Вам нужно будет разрешить отображение всплывающего окна с уведомлением в браузере, иначе вы не получите токен.
Давайте сделаем curl-запрос, чтобы проверить уведомление.
curl -X POST -H "Authorization: key=YOUR_SERVER_KEY" -H "Content-Type: application/json" -d '{
"notification": {
"title": "First notif",
"body": "Hello world",
"icon": "firebase-logo.png",
"click_action": "http://localhost:8081"
},
"to": "CLIENT_TOKEN"
}' "https://fcm.googleapis.com/fcm/send"
Нажмите Enter, и вы должны увидеть свое первое уведомление.
Спасибо за ваше терпение при чтении. Удачного развития.
Я приветствую ваши предложения (так что не стесняйтесь оставлять одно :-D )
Намасте…
