消息/不正确的 gcm-sender-id 火基 PWA

Question

我做了一个PWA，我现在正在寻找添加通知。我想使用云消息传递 (Firebase)，但我遇到了一些问题。 我遵循了一个教程，我在我的清单.json中添加了这一行：

"gcm_sender_id": "My sender ID". 

在我的索引中.html我添加了

<script src = "https://www.gstatic.com/firebasejs/4.1.1/firebase-app.js">
</ script>
<script src = "https://www.gstatic.com/firebasejs/4.1.1/firebase-messaging.js"> <script>
var config = {
apiKey: "My api",
authDomain: "example.firebaseapp.com",
databaseURL: "https://example.firebaseio.com",
projectId: "example",
storageBucket: "example.appspot.com",
messagingSenderId: "My sender ID"
};
firebase.initializeApp (config);
const messaging = firebase.messaging ();
messaging
.requestPermission ()
then (function () {
console.log ("Notification permission granted.");
return messaging.getToken ();
})
.then (function (token) {
console.log ("token is:" + token);
})
.catch (function (err) {
console.log ("Unable to get permission to notify.", err);
});
</ Script>

这样，我得到以下错误：

消息传递：请将您的网络应用清单"gcm_sender_id"值更改为"103953800507"，以便使用 Firebase 消息传递。(消息/不正确的gcm-sender-id)

我搜索了一下，在 github (https://github.com/realtime-framework/WebPushNotifications) 上，他们说要通过控制台中写入的内容更改发件人 ID

所以我修改了我的清单.json，出现以下错误

获取脚本时收到错误的 HTTP 响应代码 (404)。 无法加载资源：净值：： ERR_INVALID_RESPONSE/firebase-messaging-sw.js

消息传递：我们无法注册默认服务辅助角色。注册服务工作进程失败：获取脚本时收到错误的 HTTP 响应代码 (404)。(消息传递/失败的服务工作者注册)。

我找不到我必须做的事情，我承认有点迷茫。

Answer 1

对于像我一样遇到此问题的任何人，这就是我放入文件中的内容

self.addEventListener('push', function(event) {
console.log('[Service Worker] Push Received.');
//console.log(`[Service Worker] Push had this data: "${event.data.text()}"`);
const title = 'Push Codelab';
const options = {
body: 'Yay it works.',
icon: 'images/icon.png',
badge: 'images/badge.png'
};
event.waitUntil(self.registration.showNotification(title, options));
});

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

var firebaseConfig = {
apiKey: "****",
authDomain: "****",
projectId: "****",
storageBucket: "****",
messagingSenderId: "****",
appId: "****",
measurementId: "****"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
//firebase.analytics();
if (firebase.messaging.isSupported()) {
firebase.messaging();
console.log('FB Messaging Supported');
}

const messaging = firebase.messaging();
messaging.onBackgroundMessage((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);
});

将 **** 替换为 Firebase 信息中心中您自己的数据

Answer 2

现在，您必须将另一个名为"firebase-messaging-sw.js"的文件添加到根目录中，它可以是空文件。 它可能会修复错误。 但是，您稍后需要更新此文件，您将在 Firebase 消息实现的后续步骤中了解该文件。