带NextJs的FCM

如何解决带NextJs的FCM

我正在尝试将FCM与next.js集成。但是它显示以下错误。有人可以帮我处理next.config.js文件吗？

FirebaseError: Messaging: We are unable to register the default service worker. Failed to register a ServiceWorker for scope ('http://localhost:3000/firebase-cloud-messaging-push-scope') with script ('http://localhost:3000/firebase-messaging-sw.js'): A bad HTTP response code (404) was received when fetching the script. (messaging/failed-service-worker-registration).
    at WindowController.eval (webpack-internal:///./node_modules/@firebase/messaging/dist/index.esm.js:1053:45)
    at step (webpack-internal:///./node_modules/tslib/tslib.es6.js:124:23)
    at Object.eval [as throw] (webpack-internal:///./node_modules/tslib/tslib.es6.js:105:53)
    at rejected (webpack-internal:///./node_modules/tslib/tslib.es6.js:96:65)

解决方法

next.config.js 不需要配置，只需要在Public文件夹中添加serviceWorker名字为firebase-messaging-sw.js

他们在文档中提到了以下内容：

消息服务需要 firebase-messaging-sw.js 文件。除非您已经有 firebase-messaging-sw.js 文件，否则请在检索令牌之前创建一个具有该名称的空文件并将其放在域的根目录中。您可以稍后在客户端配置过程中向文件添加有意义的内容。

访问：Access the registration token

你的 serviceWorker 应该是这样的：

importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js');
importScripts('https://www.gstatic.com/firebasejs/8.2.1/firebase-messaging.js');
 
firebase.initializeApp({
  apiKey: 'api-key',authDomain: 'project-id.firebaseapp.com',databaseURL: 'https://project-id.firebaseio.com',projectId: 'project-id',storageBucket: 'project-id.appspot.com',messagingSenderId: 'sender-id',appId: 'app-id',measurementId: 'G-measurement-id',});

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



messaging.onBackgroundMessage(function(payload) {
  console.log('[firebase-messaging-sw.js] Received background message ',payload);
  // Customize notification here
  const notificationTitle = 'Background Message Title';
  const notificationOptions = {
    body: 'Background Message body.',icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle,notificationOptions);
});

记住在你的 initializeApp 上使用 ENV