新着のトークをキャッチしたらPWAでプッシュ通知を出す

Question

概要

PWAのチャットアプリを実装しています。
新着トークが来た時にServiceWorkerを使ってプッシュ通知を送りたいです。

システム概要：チャットアプリ
使用言語・技術：React, Amplify
補足：チャット機能は実装済み、現在プッシュ通知機能を追加中

実現したいこと

結論から申しますと、serviceWorkerに変数を渡したいです。

TalkRoomにアクセスしたらserviceWorkerに登録し、serviceWorkerでトークのsubscribeを張って、更新があるたびにプッシュ通知を送る、という動きを考えています。

serviceWorkerRegistration.sync.register()では変数を渡せないようです。
変数を渡せる関数を探してみたのですが、自力で見つけられなかったため、助言をいただきたいです。

TalkRoom.jsx

// importは割愛

export default function TalkRoom(props) {
// 割愛

  useEffect(() => {
    const sendPushTest = (permission, serviceWorkerRegistration) => {
      if (permission === 'granted' && global.syncIsAble)
        setInterval(() => {
// ここでserviceWorkerに変数を渡したい
          serviceWorkerRegistration.sync.register('pushTest', { hogehoge: hugahuga })
        }, 10000)
    }

// 以下割愛

serviceWorker.js

// 割愛

addEventListener('sync', (event, data) => {
  if (event.tag === 'pushTest') {
    DataStore.observeQuery(
      Talk,
      t => t.roomID('eq', data.id)
    ).subscribe((res => {
      const title = res.title
      const options = {
        body: res.body,
        icon: 'images/notification-icon.png',
        badge: 'images/notification-badge.png',
      }
      event.waitUntil(self.registration.showNotification(title, options))
    }))
  }
})

前提

10秒ごとにプッシュ通知を送るところまでは正常に動作することを確認済みです。

TalkRoom.jsx

// importは割愛

export default function TalkRoom(props) {
  const { me, roomUsers, roomName } = props
  const [talks, setTalks] = useState([])

  useEffect(() => {
    const sendPushTest = (permission, serviceWorkerRegistration) => {
      if (permission === 'granted' && global.syncIsAble)
        setInterval(() => {
          serviceWorkerRegistration.sync.register('pushTest')
        }, 10000)
    }

    navigator.serviceWorker.ready.then((registration) => {
      if (global.pushIsAble) {
        if (Notification.permission === 'default')
          Notification.requestPermission().then((res) => {
            sendPushTest(res, registration)
          })
        else
          sendPushTest(Notification.permission, registration)
      }
    })
  })

  useEffect(() => {
    DataStore.observeQuery(
      Talk,
      t => t.roomID('eq', me.roomID)
    ).subscribe((res => {
// setTalksを実行
    }))
  }, [])

  return (
// トークの表示
  )
}

serviceWorker.js

// install, active等発火時の処理は割愛

addEventListener('sync', (event) => {
  if (event.tag === 'pushTest') {
    const title = 'test'
    const options = {
      body: 'serviceWorker Sync テスト中',
      icon: 'images/notification-icon.png',
      badge: 'images/notification-badge.png',
    }

    event.waitUntil(self.registration.showNotification(title, options))
  }
})

Answer 1

pushAPI + FCMの利用で解決しました。