Yuto Blog

Yuto Blog

Ruby on Rails でFCMを使う時のメモ

click_actionを反映させる

firebase-messaging-sw.jsトップnotificationclickイベントを追加すればいいらしいです。

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);
      }
    })
  );
});

開いているタブ(作業中のタブ)でもウエブプッシュ通知を受信させる

普段は開いているタブで作業する時、ウエブプッシュ通知が来ません。

firebase.jsonMessageファンクションを以下のように定義すればいいです。

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
              }
            }
          }
        }
      )
    });
  });

ActiveJobでウエブプッシュを処理させる

渡せるパラメータは:
title: 通知タイトル
body: 通知内容
icon: 表示のアイコン
click_action: クリックイベントで遷移するURL(HTTPSのみ)

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

priority: 'high' は役立つかどうかまだ分からないですが、、、。

Created by Yuto at 2022-01-21 17:22
0
Like this article
Le Minh Thien Toan

Tác giả:Yuto Yasunaga

Xin chào các bạn. Mình là kỹ sư IT đang làm việc ở Nhật Bản. Mình tạo blog này để chia sẻ về cuộc sống và những kinh nghiệm trong quá trình học tập và làm việc.
Hy vọng bài viết này sẽ có ích cho bạn.