Firebase messaging for web. Multiple tabs notifications - javascript

I'm using Firebase Messaging for browser notifications. Problem is when multiple tabs are open. Notification for every tab is shown. Adding tag to options didn't help
firebase.initializeApp(constants.CONFIG);
const messaging = firebase.messaging();
messaging.setBackgroundMessageHandler(({ data }) => {
const options = {
body: data.body,
data: { link: data.link, },
icon: data.icon,
};
const backgroundNotification = self.registration.showNotification(data.title, options);
return backgroundNotification;
});
I need only one notification to be displayed even when many tabs with same app are open

Comment this line of code
const backgroundNotification = self.registration.showNotification(data.title, options);
and use instead
new Notification(notification.title, {
body : notification.body,
tag : notification.title,
icon : notification.icon
});
Note that - Tag is unique, If you have 2 tabs and you are sending a push
with name title: title1 and title1, it will show the push only ones.
Example 3.5:
https://notifications.spec.whatwg.org/

Related

"In order to select an item please sign in" issue occurring randomly when using Google Drive Picker UI

I'm using Google Drive Picker UI to select a folder and create or update spreadsheet into that folder on a schedule
Sometimes it works as expected but recently it is showing a message called "In order to select an item, please sign in". On clicking "sign in" button it shows "The feature you requested is currently unavailable. Please try again later."
Previously, this used to occur when reauthorizing immediately after revoking access but now I'm requesting with extra params like whom the folder is shared with, created date, folder name to display in front-end. It worked fine for some days but now, the issue above mentioned is occurring frequently.
createPicker(oauthToken, authCode, authUser) {
const googleViewId = window.google.picker.ViewId.FOLDERS;
const docsView = new window.google.picker.DocsView(googleViewId)
.setIncludeFolders(true)
.setMimeTypes('application/vnd.google-apps.folder')
.setSelectFolderEnabled(true);
const picker = new window.google.picker.PickerBuilder()
.addView(docsView)
.setOAuthToken(oauthToken)
.setDeveloperKey(this.props.developerKey)
.setCallback(data => {
if (data.action === window.google.picker.Action.PICKED) {
this.fetchFolderDetails(data, authCode, authUser);
}
});
if (this.props.multiSelect) {
picker.enableFeature(window.google.picker.Feature.MULTISELECT_ENABLED);
}
picker.build().setVisible(true);
}
fetchFolderDetails(data, authCode, authUser) {
window.gapi.client
.init({
apiKey: this.props.developerKey
})
.then(() =>
window.gapi.client.request({
path: 'https://www.googleapis.com/drive/v2/files/' + data.docs[0].id,
params: {
fields: 'permissions, title, createdDate, shared'
}
})
)
.then(response => {
let googleDriveData = {
folderId: data.docs[0].id,
mimeType: data.docs[0].mimeType,
authCode,
authUser,
folderName: response.result.title,
permissions: response.result.permissions,
shared: response.result.shared,
createdTime: response.result.createdDate
};
this.props.onChange(googleDriveData);
});
}
I expect to see the list of folders after authorizing.
Update
Adding a google drive scope somewhat fixed the issue but still the immediate reauthorizing issue persists.

Raise ServiceWorker Push Notification Event

I'm developing a webApp, and want to send notifications using a ServiceWorker.
I have my sw.js and my main.js. I'm able to register my Service Worker and I'm able to send notifications using a command like:
navigator.serviceWorker.getRegistration().then(function(reg) {
reg.showNotification('Title', {
body: 'body'
});
});
But this is not calling my push event defined in the 'sw.js'.
For reference here is my "sw.js":
self.addEventListener('push', function(event) {
console.log('[Service Worker] Push Received.');
console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
const title = 'title test from push';
const options = {
body: 'body test from push.',
icon: 'images/icon.png'
};
event.waitUntil(self.registration.showNotification(title, options));
});
const title = 'Push Codelab';
const options = {
body: 'Yay it works.',
icon: 'images/icon.png',
badge: 'images/badge.png'
};
self.registration.showNotification(title, options);
As additional information, in Chrome if I go in the Developer tool => Application Tab => Service Workers, and click on "push" button, the correct push event is raised. But, again, I'm not able to trigger it from my main page.

Ionic Cordova can not share video on social sites

I am trying to use the cordova social sharing plugin for sharing video on social sites. So far what I have achieved is, I have successfully captured video using following code -
var options = {
limit: 1,
duration: 15
};
$cordovaCapture.captureVideo(options).then(function (videoData) {
$scope.videoUrl = videoData[0].fullPath;
}, function (err) {
// An error occurred. Show a message to the user
//alert("video error : "+err);
});
I can successfully find the captured video files url but unfortunately I can not share them to the social media sites. I have tried both of the following methods -
$cordovaSocialSharing
.share(message, subject, file, link)
and
$cordovaSocialSharing
.shareViaTwitter(message, image, link)
Now my question is -
Is there any way to share video through this approach?
If not, please let me know if there is any possible way for this.
N.B. : I have already bothered the Google a lot.
Thanks in advance.
my problem was passing a bad filePath, so i found a solution like below :
import {CaptureError, MediaFile, MediaCapture, CaptureImageOptions, Transfer} from "ionic-native";`
declare let cordova: any;
private static options = {
message: '', // not supported on some apps (Facebook, Instagram)
subject: '', // for email
files: [''], // an array of filenames either locally or remotely
url: ''
};
videoOptions: CaptureImageOptions = {limit: 1};
videoData: any;
captureVideo() {
MediaCapture.captureVideo(this.videoOptions)
.then(
(data: MediaFile[]) => {
this.videoData = data[0];
const fileTransfer = new Transfer();
fileTransfer.download(this.videoData.fullPath, cordova.file.applicationStorageDirectory + 'fileDir/filename.mp4').then((entry) => {
this.options.message = " Your message";
this.options.subject = "Your Subject";
this.options.files = [entry.toURL()];
this.options.url = "https://www.google.com.tr/";
SocialSharing.shareWithOptions(this.options);
}, (error) => {
});
},
(err: CaptureError) => {
}
);
}
As you see above, i just copy my video file to applicationStorageDirectory

Chrome push notification - how to open URL adress after click?

I am new to Google Chrome Push notifications and I was just reading some questions and answers here, on stackoverflow and I have ended with this easy push notification javascript.
navigator.serviceWorker.register('sw.js');
function notify() {
Notification.requestPermission(function(result) {
if (result === 'granted') {
navigator.serviceWorker.ready.then(function(registration) {
registration.showNotification('test notification', {
body: 'Hey I am test!',
icon: 'image.png',
});
});
}
});
}
Its just simple notification, but I need open a new window with other webpage after click on notification.
I know it is possible, but I cant find examples using "serviceWorker" syntax.
Please help. Thanks.
I am guessing you are in a Service Worker context, because that's where Push Notifications are received. So you have the self object to add a event listener to, that will react to a click on the notification.
(Place this code in your sw.js file, which is your Service Worker script.)
self.addEventListener('notificationclick', function(event) {
let url = 'https://example.com/some-path/';
event.notification.close(); // Android needs explicit 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);
}
})
);
});
If you want to open website with dynamic URL received from FCM push notification or any other web push notification then
BELOW IS AN EXAMPLE OF SERVICE WORKER USED FOR FCM PUSH NOTIFICATION
messaging.setBackgroundMessageHandler(function(payload) {
console.log('[firebase-messaging-sw.js] Received background message ', payload);
// Customize notification here
var notificationTitle = payload.data.title; //or payload.notification or whatever your payload is
var notificationOptions = {
body: payload.data.body,
icon: payload.data.icon,
data: { url:payload.data.click_action }, //the url which we gonna use later
actions: [{action: "open_url", title: "Read Now"}]
};
return self.registration.showNotification(notificationTitle,
notificationOptions);
});
and handle click event with below code
self.addEventListener('notificationclick', function(event) {
switch(event.action){
case 'open_url':
clients.openWindow(event.notification.data.url); //which we got from above
break;
case 'any_other_action':
clients.openWindow("https://www.example.com");
break;
}
}
, false);
Hope it helps!
(This code refers to firebase messaging) I was also searching for a soluting and the answer was very easy, but there was no doc saying it clearly. You need to put "click_action" = "your url" inside the notification json. Here is an example:
notification: {
title: "Come",
icon: '../../../../assets/logo.png',
vibrate: [300,100,400,100,400,100,400],
body: "some text",
click_action : "your link"
}
Hope it helps.
{
"notification": {
"title": "Hey there",
"body": "Subscribe to might ghost hack youtube channel",
"click_action" : "http://localhost:4200"
},
"to":"YOUR_TOKEN"
}
This worked for me
"#angular/fire": "^6.1.5",
"firebase": "^7.0 || ^8.0"

QuickBlox Chat history

I have saved the chat history by using following code in javascript:
var message = {
body: text,
type: 'chat',
extension: {
nick: chatUser.login,
save_to_history: 1
}
};
Now my problem is how can I get the whole chat history of two users in my chat window?
To get a chat history for particular dialog use this request, You must have use dialog id of private dialog.
var dialogId = "xxxxxxxxxxxxxxxxxxxxxxxxx";
var params = {chat_dialog_id: dialogId, sort_desc: 'date_sent', limit: 100, skip: 0};
QB.chat.message.list(params, function(err, messages) {
if (messages) {
}else{
console.log(err);
}
});

Categories