FCM JS 客户端 - 提供的 applicationServerKey 无效

Question

我正在尝试使用 Firebase Cloud Messaging 来使用 WebPush，并按照他们的文档设置 JavaScript 客户端。我的代码位于所有设置下方，但是当我调用 getToken 时，我收到一条错误消息：

Failed to execute 'subscribe' on 'PushManager': The provided applicationServerKey is not valid.

我已经四次检查了我的 VAPID 密钥，并且它使用的是 Firebase 控制台 > 项目设置 > 云消息 > Web 推送认证中的公钥。

我已经尝试过使用和不使用点击事件，但没有运气。

我尝试过不同的域，但没有成功。

我已确认已授予通知权限。

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getMessaging, getToken, onMessage } from "firebase/messaging";

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
    apiKey: "AIzaSyDAIduxCnC5T4-QoDEw1vRjnI1_1K0odeg",
    authDomain: "hudsonvillewaterpolo.firebaseapp.com",
    projectId: "hudsonvillewaterpolo",
    storageBucket: "hudsonvillewaterpolo.appspot.com",
    messagingSenderId: "351470653163",
    appId: "1:351470653163:web:1572d4340e67fe6cf9b8ae",
    measurementId: "G-Z86EW7BNVM"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

function doTheThing() {

    getToken(messaging, { vapidKey: "VAPID KEY HERE" }).then(currentToken => {
        if (currentToken) {
            // send the token to your server and update the UI if necessary
            console.log(currentToken)
        } else {
            console.log('No registration token available, request permission to generate one')
        }
    }).catch(err => {
        console.error('Error occurred while retrieving token', err);
    });
}


onMessage(messaging, (payload) => {
    console.log('Message received. ', payload);
    // ...
});

document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('.site-name').addEventListener('click', doTheThing)
})

Answer 1

天哪，按键在显示屏上被截断了！ 🤬

我最终检查了该元素并将其从源中提取出来。

真是浪费时间。