reactjs - 服务人员无法控制客户端

Question

互联网上关于这个主题的资源非常模糊，在我获得完整的文档之前无法使用。

我有下面的服务工作者在函数内接收firebase推送通知setBackgroundMessageHandler：

importScripts('https://www.gstatic.com/firebasejs/7.24.0/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/7.24.0/firebase-messaging.js');

const firebaseConfig = {
    apiKey: "***",
    authDomain: "****",
    databaseURL: "https://gratis-3ce5a.firebaseio.com",
    projectId: "gratis-3ce5a",
    storageBucket: "gratis-3ce5a.appspot.com",
    messagingSenderId: "***",
    appId: "***",
    measurementId: "G-PNXHN4YXYF"
};

firebase.initializeApp(firebaseConfig);
const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ', payload);

  const notificationTitle = payload.data.title;
  const notificationOptions = {
    body: payload.data.body,
    icon: '/firebase-logo.png'
  };

 self.clients.matchAll({
    includeUncontrolled: 'true'
  }).then(function(clients){
    clients[0].postMessage({data: notificationTitle});
  })
});

以下是我想在其中接收消息的组件：

import { useState } from 'react';
import React from 'react';
import {  onMessageListener } from './firebaseInit';

export const Messaging=()=>{
    const [message, setMessage]=useState('');
    navigator.serviceWorker.onmessage = (event) => {
      console.log(event.data);
    };
    
    return(
        <h1>{message}</h1>
    );
}

下面是serviceWorker.js文件：

export const registerServiceWorker = () => {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker
      .register('firebase-messaging-sw.js')
      .then(function (registration) {
        // eslint-disable-next-line no-console
        console.log('[SW]: SCOPE: ', registration.scope);
        return registration.scope;
      })
      .catch(function (err) {
        return err;
      });
  }
};

我在 中成功接收消息setBackgroundMessageHandler，但消息未到达功能性反应组件。

这是我第一次接触服务人员。我不知道他们如何与反应组件进行通信。请帮我找出我的代码中的问题并纠正它。

编辑 我已经找到了问题的根源，并注意到服务人员无法控制客户端。虽然我已经成功地向客户端发布消息，但仍然想知道服务人员不控制客户端的原因。

标签： reactjsfirebaseservice-worker