Как настроить push-уведомление Twilio в веб-приложении
Я использую программируемый чат Twilio и хочу отправить push-уведомление в мобильное приложение (iOS, Android) и веб-приложение. Я следовал инструкциям Twilio Still, но не получаю уведомления и в веб-приложениях, и в мобильных приложениях. Ниже приведен код, который я реализовал.
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase-messaging.js"></script>
<script src="firebase-messaging-sw.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "******************",
authDomain: "*****.firebaseapp.com",
databaseURL: "https://******.firebaseio.com",
projectId: "******",
storageBucket: "******.appspot.com",
messagingSenderId: "***************"
};
firebase.initializeApp(config);
</script>
Во время входа в систему я делаю следующее
/* Generating token for Twilio chat */
$scope.URL = Path + "/twilio/chat/generateToken";
var data = {"identity":localStorage.userId,"deviceId":guid(),"pushCredentialSid":"**********"}
RestAPIService.post($http,data,$scope,$scope.URL, function ( responsesData ) {
if(responsesData.data.status == "success"){
var twilioToken = responsesData.data.token;
Twilio.Chat.Client.create(twilioToken).then(function(twilioClient) {
twilioChatClient = twilioClient;
// Twilio notification
firebase.initializeApp(config);
if (firebase && firebase.messaging()) {
// requesting permission to use push notifications
firebase.messaging().requestPermission().then(function() {
console.log ("Notification permission granted.");
// getting FCM token
firebase.messaging().getToken().then(function(fcmToken) {
console.log ("token is:" + fcmToken);
// continue with Step 7 here
// passing FCM token to the `chatClientInstance` to register for push notifications
twilioChatClient.setPushRegistrationId('fcm', fcmToken);
// registering event listener on new message from firebase to pass it to the Chat SDK for parsing
/* firebase.messaging().onMessage(function(payload){
twilioChatClient.handlePushNotification(payload);
}); */
}).catch(function(err) {
// can't get token
console.log(err);
});
}).catch(function(err){
// can't request permission or permission hasn't been granted to the web app by the user
console.log(err);
});
} else {
// no Firebase library imported or Firebase library wasn't correctly initialized
}
/* Twilio notification */
});
}
});
Я не уверен, как поступить дальше, и не знал, пропустил ли я что-нибудь. Если кто-то, кто внедрил push-уведомление из веб-приложения в мобильные приложения, направит меня, чтобы продолжить.
0 ответов
В документации Twilio по этому поводу действительно ожидается, что вы узнаете о Firebase, потому что их документации по этой теме явно не хватает, хотя обычно она отлично подходит для всего остального Twilio. Я сам столкнулся с проблемами, потому что использовал пустой сервис-воркер, но в документации четко сказано, что делать. Чтобы заставить работать как передние, так и фоновые уведомления, в сервис-воркере это точно так же, как в примере на https://firebase.google.com/docs/cloud-messaging/js/receive. После настройки firebase в сервис-воркере все, что вам нужно, как минимум, это 'const messaging = firebase.messaging()', чтобы получать уведомления переднего плана. Для фоновых уведомлений вы можете следовать примеру Google, чтобы использовать messaging.setBackgroundMessageHandler(), поскольку это, вероятно, лучше всего для большинства сценариев использования. В качестве альтернативы вы можете так же легко использовать прослушиватель событий для события push, если вам нужен больший контроль над тем, как вы будете обрабатывать уведомление. Т.е.,
// This event is where you'll handle background message. You can still do self.registration.showNotification() here.
self.addEventListener('push', function (event) {
if (event.data) {
console.log(`firebase-messaging-sw (background handler): This push event has data: ${event.data.text()}`);
//self.registration.showNotification('Title', { body: 'Background Message body.', icon: '/firebase-logo.png' });
}
else {
console.log('firebase-messaging-sw(background handler): This push event has no data.');
}
});Кстати, поскольку это сервис-воркер, вам не нужно ссылаться на этот скрипт на своей странице. Это сервисный работник, navigator.serviceWorker.register() гарантирует, что он будет работать в фоновом режиме вашего приложения.
Что касается Twilio, вам необходимо создать клиент Twilio с токеном (с предоставлением чата) для пользователя, который будет получать уведомления. Используя пример кода Twilio, но с дополнительными частями для ясности, этот пример кода должен помочь:
firebase.initializeApp({
apiKey: 'api-key',
authDomain: 'project-id.firebaseapp.com',
databaseURL: 'https://project-id.firebaseio.com',
projectId: 'project-id',
storageBucket: 'project-id.appspot.com',
messagingSenderId: 'sender-id',
appId: 'app-id',
measurementId: 'G-measurement-id',
});
const handleNotificationsForUser = function (userId) {
let getChatClient;
let accessToken = '';
// I'm getting my token from C# code. Leaving this here for clarity.
$.ajax({
url: `chat/accesstoken/${userId}`,
dataType: 'JSON',
async: false,
success: function (data) {
accessToken = data.result;
console.log(`accestoken: ${accessToken}`);
getChatClient = new Twilio.Chat.Client.create(accessToken);
}
});
getChatClient.then(function (chatClient) {
if (firebase && chatClient) {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/Scripts/firebase-messaging-sw.js').then(function (registration) {
firebase.messaging().useServiceWorker(registration);
console.log(`handleNotificationsForUser(): ServiceWorker registration successful with scope: ${registration.scope}`);
if (firebase && firebase.messaging()) {
firebase.messaging().requestPermission().then(() => { // requesting permission to use push notifications
firebase.messaging().getToken().then((fcmToken) => { // getting FCM token
console.log(`fcm: ${fcmToken}`);
chatClient.setPushRegistrationId('fcm', fcmToken);
// This is where we would handle the foreground. This registers an event listener
// on new message from firebase for you to do something with it.
// The chat window must have focus for messaging().onMessage to work.
firebase.messaging().onMessage(function (payload) {
console.log(`init - firebase.handleNotificationsForUser() - (foreground handler): This push event has data: ${JSON.stringify(payload)}`);
chatClient.handlePushNotification(payload);
// todo: your implementatation for UI here
});
}).catch((err) => {
console.log(`handleNotificationsForUser(): Can't get token. ${err}`);
});
}).catch((err) => {
console.log(`handleNotificationsForUser(): Can't request permission or permission hasn't been granted to the web app by the user. ${err}`);
});
} else {
console.log("handleNotificationsForUser(): No Firebase library imported or Firebase library wasn't correctly initialized.");
}
}, function (err) {
console.log(`handleNotificationsForUser(): ServiceWorker registration failed: ${err}`);
});
}
} else {
console.log('handleNotificationsForUser(): no firebase.js imported');
}
});
} Надеюсь, это поможет всем, кто пытается сделать это в Интернете.