Vue pwa与firebase云消息传递无法正常工作

时间：2018-04-30 07:49:16

标签： firebase vue.js push-notification service-worker progressive-web-apps

我正在尝试以下代码：

    navigator.serviceWorker.register('service-worker.js')
      .then((registration) => {
        const messaging = firebase.messaging().useServiceworker(registration)
        console.log(messaging)
        messaging.requestPermission().then(function () {
          console.log('Notification permission granted.')
          messaging.getToken().then(function (currentToken) {
            if (currentToken) {
              console.log(currentToken)
            }
          })
        })
      })

我的清单：

{
  "name": "Herot-Eyes",
  "short_name": "herot-eyes",
  "gcm_sender_id": "103953800507",
  "icons": [
    {
      "src": "/static/img/icons/herot-eyes-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/herot-eyes-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/static/img/icons/apple-touch-icon-180x180.png",
      "sizes": "180x180",
      "type": "image/png"
    }
  ],
  "start_url": "/",
  "display": "fullscreen",
  "orientation": "portrait",
  "background_color": "#000000",
  "theme_color": "#2196f3"
}
出了什么问题？我的console.log（消息）正在返回一个出厂错误，如下：

  

bad-push-set：“用于存储/查找的FCM推送集不是   一个有效的推送集字符串。“bad-scope

     

“服务工作者范围必须是至少包含一个字符串的字符串   字符。“bad-sender-id

     

“请确保正确设置'messagingSenderId'   传递给firebase.initializeApp（）的选项。“bad-subscription

     

“订阅必须是有效的PushSubscription。”坏标记：“   用于存储/查找的FCM令牌不是有效的令牌字符串。“   坏拼着键

     

“公共VAPID密钥不是65字节的Uint8Array。”   BG-处理程序函数预期

     

“setBackgroundMessageHandler（）的输入必须是一个函数。”   删除范围的未找到

     

“无法执行服务工作者范围的删除尝试   因为未找到范围。“delete-token-not-found

     

“无法将令牌删除尝试作为令牌执行   没找到。“failed-delete-vapid-key

     

“无法删除VAPID密钥。”   失败-serviceworker注册

     

“我们无法注册默认服务工作者。   {$ browserErrorMessage}“failed-to-delete-token

     

“无法删除当前保存的令牌。” GET-订阅失败。

     

“尝试获取任何现有Push时出错   订阅。“wrong-gcm-sender-id

     

“请将您的网络应用清单的'gcm_sender_id'值更改为   '103953800507'使用Firebase消息传递。“invalid-delete-token

     

“您必须将有效令牌传递给deleteToken（），即来自的令牌   getToken（）。“invalid-public-vapid-key

     

“公共VAPID密钥必须是字符串。”无效保存的令牌

     

“无法访问已保存令牌的详细信息。”   无FCM-令牌换重新订阅

     

“无法找到FCM令牌，因此无法重新订阅。   将在下次访问时重新订阅用户。“no-sw-in-reg

     

“即使服务人员注册成功，也有   访问服务工作者本身的问题。“   无窗口的客户端与MSG

     

“试图向不存在的窗口客户端发送消息。”   通知封端

     

“通知已被屏蔽。”仅可用式-SW

     

“此方法在服务工作者上下文中可用。”   仅可用式窗口

     

“此方法在Window上下文中可用。”允许封闭的

     

“未授予和阻止所需的权限。”   许可的默认

     

“所有权限未被授予和解雇。”   公共拼着密钥解密失败的

     

“解密后，公共VAPID密钥不等于65个字节。”   应待重写

     

“此方法应该被扩展类覆盖。”   SW-REG-冗余

     

“用于推送的服务工作者变得多余。”   SW-登记预期

     

“服务人员注册是预期的输入。”   令牌订阅失败的

     

“订阅用户到FCM时遇到问题：{$ message}”   令牌订阅-NO-推设置

     

“FCM在获取FCM令牌时返回了无效响应。”   令牌订阅-NO-令牌

     

“订阅用户推送时，FCM没有返回任何令牌。”   令牌退订失败的

     

“从FCM取消订阅用户时遇到问题：{$ message}”   令牌更新失败的

     

“从FCM更新用户时出现问题：{$ message}”   令牌更新无令牌

     

“更新要推送的用户时，FCM未返回任何令牌。”   无法对重新订阅

     

“重新订阅FCM令牌以进行推送时出错   消息。将在下次访问时重新订阅用户。   {$ message}“不支持的浏览器

     

“此浏览器不支持使用firebase所需的API   SDK。“use-sw-before-get-token

     

“您必须在调用getToken（）之前调用useServiceWorker（）以确保   你的服务人员被使用了。“

1 个答案:

答案 0 :(得分：4)

配置为服务器以接收通知

将以下文件添加到公用文件夹：

manifest.json 

{
    "gcm_sender_id": "103953800507"
}

firebase-messaging-sw.js 

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

var config = {
  messagingSenderId: <Sender ID>
};
firebase.initializeApp(config);

let messaging = firebase.messaging();

在您的main.js文件中添加以下代码

var config = {
  apiKey: <API_KEY>,
  authDomain: <DOMAIN>,
  databaseURL: <DATABASE_URL>,
  projectId: <PROJECT_ID>,
  storageBucket: <STORAGE_BUCKET>,
  messagingSenderId: <SENDER_ID>
};
firebase.initializeApp(config);

Vue.prototype.$messaging = firebase.messaging()

navigator.serviceWorker.register('/firebase-messaging-sw.js')
  .then((registration) => {
    Vue.prototype.$messaging.useServiceWorker(registration)
  }).catch(err => {
    console.log(err)
  })

接收通知

然后在您的App.vue中，将此代码添加到created（）函数中

created() {
    var config = {
        apiKey: <API_KEY>,
        authDomain: <DOMAIN>,
        databaseURL: <DATABASE_URL>,
        projectId: <PROJECT_ID>,
        storageBucket: <STORAGE_BUCKET>,
        messagingSenderId: <SENDER_ID>
    };
    firebase.initializeApp(config);
    const messaging = firebase.messaging();

    messaging
    .requestPermission()
    .then(() => firebase.messaging().getToken())
    .then((token) => {
        console.log(token) // Receiver Token to use in the notification
    })
    .catch(function(err) {
        console.log("Unable to get permission to notify.", err);
    });

    messaging.onMessage(function(payload) {
    console.log("Message received. ", payload);
    // ...
    });
}

发送通知

更新

const admin = require("firebase-admin")

var serviceAccount = require("./certificate.json");

admin.initializeApp({
    credential: admin.credential.cert(serviceAccount),
});
const Messaging = admin.messaging()

var payload = {
    webpush: {
        notification: {
            title: "Notification title",
            body: "Notification info",
            icon: 'http://i.imgur.com/image.png',
            click_action: "http://yoursite.com/redirectPage" 
        },
    },
    topic: "Doente_" + patient.Username
};

return Messaging.send(payload)

旧版本

然后，在邮递员中，您执行以下请求

POST /v1/projects/interact-f1032/messages:send HTTP/1.1
Host: fcm.googleapis.com
Authorization: Bearer <SENDER_TOKEN>
Content-Type: application/json

{
  "message":{
    "token" : The token that was in the console log,
    "notification" : {
      "body" : "This is an FCM notification message!",
      "title" : "FCM Message"
      }
   }
}

发件人令牌

在您的后端中，使用以下代码，在Firebase仪表板中获得文件“ certificate.json”（https://firebase.google.com/docs/cloud-messaging/js/client-生成密钥对）

const {google} = require('googleapis');

function getAccessToken() {
  return new Promise(function(resolve, reject) {
    var key = require('./certificate.json');
    var jwtClient = new google.auth.JWT(
      key.client_email,
      null,
      key.private_key,
      ["https://www.googleapis.com/auth/firebase", 
      "https://www.googleapis.com/auth/cloud-platform"],
      null
    );
    jwtClient.authorize(function(err, tokens) {
      if (err) {
        reject(err);
        return;
      }
      resolve(tokens.access_token);
    });
  });
}

getAccessToken().then(senderToken => console.log(senderToken))

senderToken用于Authorization标头上以发送通知

相关问题
最新问题