如何在窗口上下文中接收来自 Firebase 的通知（以及服务工作者）

Posted 2023-02-22

【中文标题】如何在窗口上下文中接收来自 Firebase 的通知（以及服务工作者）

【英文标题】：How to receive notifications from Firebase in window's context (as well as service worker)

【发布时间】：2020-01-09 14:32:33

【问题描述】：

我在应用程序的公共文件夹中的 firebase-messaging-sw.js 中有一个带有以下内容的反应应用程序：

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

// Initialize the Firebase app in the service worker by passing in the
// messagingSenderId.
firebase.initializeApp(
  'messagingSenderId': '<my-sender-id>'
);

// Retrieve an instance of Firebase Messaging so that it can handle background
// messages.
const messaging = firebase.messaging();

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

在我的 index.js 文件中，我有这个：

import * as serviceWorker from './serviceWorker';

if ('serviceWorker' in navigator) 
  navigator.serviceWorker.register('../firebase-messaging-sw.js')
  .then(function(registration) 
    console.log('Registration successful, scope is:', registration.scope);
    console.log( registration);

    Notification.requestPermission().then((permission) => 
      if (permission === 'granted') 
        console.log('Notification permission granted.');
        // TODO(developer): Retrieve an Instance ID token for use with FCM.

       else 
        console.log('Unable to get permission to notify.');
      
    );


  ).catch(function(err) 
    console.log('Service worker registration failed, error:', err);
  );

如果窗口不活动，我可以发布消息并获得通知。到目前为止，一切顺利。

但是，如果窗口处于活动状态，我还需要收到通知。我尝试将此添加到服务人员：

// Handle incoming messages. Called when:
// - a message is received while the app has focus
// - the user clicks on an app notification created by a service worker
//   `messaging.setBackgroundMessageHandler` handler.
messaging.onMessage((payload) => 
  console.log('Message received. ', payload);
  // ...
);

...但我从 firebase 收到此错误： errors.ts:101 Uncaught FirebaseError: Messaging: This method is available in a Window context. (messaging/only-available-in-window).

上面的javascript似乎需要进入index.js文件，以便在窗口上下文中进行处理（我在此看到的所有问题都只是说“onMessage调用需要在前台应用程序中")。

但是我无法访问服务工作者中声明的消息传递变量。

这样做的正确方法是什么？我当然不应该两次初始化 firebase 吗？

【参考方案1】：

只有setBackgroundMessageHandler()-方法必须在 serviceworker 中调用。

您需要在应用程序 UI 的 javascript 文件中使用 onMessage() 处理程序来对有效负载执行进一步操作。

仔细查看docs。