Web端集成Firebase Cloud Messaging(FCM)报错及相关疑问咨询

Hey there! Sorry to hear you're hitting snags with FCM on your web app—let's break down your questions and get you sorted out.

1. Can FCM push notifications work over HTTP instead of HTTPS? #

Short answer: Only if you're working on localhost for development.

FCM relies on service workers to handle push notifications, and all modern browsers require service workers to run in a secure context. The only exception is localhost (since it’s considered a trusted local environment). If you’re trying to run your web app on a non-localhost HTTP server, you won’t be able to retrieve an FCM token or receive push notifications at all—this is almost certainly a key factor behind the "An error occurred while retrieving token" issue you’re seeing.

For production deployments, you must host your app over HTTPS. If you’re testing locally, stick to localhost to avoid this roadblock.

2. Tools to verify your FCM server-side functionality #

There are a few straightforward ways to check if your server setup works correctly, independent of your web client:

• Firebase Console Messaging Tool: Head to your Firebase Console, navigate to Cloud Messaging, and use the "Send your first message" flow. You can target a specific device token (grab one from your working Android app or a localhost web test) or a topic. If the message sends and delivers successfully, your server-side configuration (like sender ID and server key) is solid.

• Postman/Curl HTTP Requests: Manually send a push request to FCM’s API to test. Construct a POST request to https://fcm.googleapis.com/fcm/send with these headers:

  • Authorization: key=YOUR_SERVER_KEY (replace with your Firebase project’s server key from Project Settings > Cloud Messaging)
  • Content-Type: application/json
    Use a request body like this (swap the to value with a valid device token):

  {
    "to": "VALID_DEVICE_TOKEN",
    "notification": {
      "title": "Test Notification",
      "body": "This is a test from Postman/curl"
    }
  }
  

  A successful response (with success: 1) confirms your server-side setup works. Errors like "InvalidRegistration" mean you’ll need to double-check your token or server key.

• FCM SDK Test Script: If you’re using a server-side SDK (like Node.js), write a quick script to send a test message. For example, with the Firebase Admin SDK:

  const admin = require('firebase-admin');
  const serviceAccount = require('./path-to-service-account-key.json');
  
  admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
    databaseURL: 'YOUR_DATABASE_URL'
  });
  
  const message = {
    notification: {
      title: 'Test SDK Message',
      body: 'This is a test from the Admin SDK'
    },
    token: 'VALID_DEVICE_TOKEN'
  };
  
  admin.messaging().send(message)
    .then((response) => {
      console.log('Successfully sent message:', response);
    })
    .catch((error) => {
      console.log('Error sending message:', error);
    });
  

  Running this script will immediately tell you if your SDK setup is configured correctly to send messages.

Quick side note about your token retrieval error: If you’re not testing on localhost, switching to HTTPS (even a self-signed cert for testing) might resolve that issue right away.

内容的提问来源于stack exchange，提问作者Nishant Kumar