It seems that you should add the notificationclick event to the ** top ** of firebase-messaging-sw.js.
public/firebase-messaging-sw.js
// Notification click
self.addEventListener('notificationclick', function(event) {
let url = event.notification.data.FCM_MSG.data.url;
event.notification.close(); // Android needs explicit close.
event.waitUntil(
clients.matchAll({ includeUncontrolled: true, type: 'window' }).then( windowClients => {
// Check if there is already a window/tab open with the target URL
for (let i = 0; i < windowClients.length; i++) {
let 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);
}
})
);
});
When working with normally open tabs, I don't get web push notifications.
You can define the onMessage function in firebase.js as follows.
firebase.js
// Handle incoming messages while focusing
messaging.onMessage(function(payload) {
const { title, body, icon } = payload.notification
const url = payload.data.url
navigator.serviceWorker.getRegistration('/firebase-cloud-messaging-push-scope').then(registration => {
registration.showNotification(
title,
{
body,
icon,
data: {
FCM_MSG: {
data: {
url
}
}
}
}
)
});
});
The parameters that can be passed are: title: Notification title body: Notification content icon: Display icon click_action: URL that transitions with a click event (HTTPS only)
app/jobs/push_notification_job.rb
class PushNotificationJob < ApplicationJob
queue_as :default
DEFAULT_ICON = 'https://hogehoge.ico'
def perform(token, options = {})
fcm = FCM.new(ENV['FIREBASE_SERVER_KEY'])
options = {
priority: 'high',
notification: {
title: options[:title],
body: options[:body],
icon: options[:icon] || DEFAULT_ICON,
},
data: {
url: options[:url] || '/'
}
}
registration_ids = [token]
fcm.send(registration_ids, options) if registration_ids.any?
end
end
I'm still not sure if priority:'high' is useful, but ...
Recommended Posts