Vue PWA с Firebase облачных сообщений не работает должным образом

Question

я пытаюсь следующий код:

    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: «Не использовался push-набор FCM для хранения / поиска. допустимая строка push-набора. "bad-scope

"Область работника службы должна быть строкой хотя бы с одним символ. "bad-sender-id

"Пожалуйста, убедитесь, что 'messagingSenderId' правильно установлен в параметры переданы в firebase.initializeApp (). "bad-subscription

«Подписка должна быть действительной подпиской PushSubscription.» плохой знак: Токен FCM, используемый для хранения / поиска, не был допустимой строкой токена. " плохой пресным ключ

«Открытый ключ VAPID не является массивом Uint8Array с 65 байтами». BG-обработчик-функция ожидались

«Входные данные для setBackgroundMessageHandler () должны быть функцией.» удалить-Scope не обретенной

"Попытка удаления для области работника сервиса не может быть выполнена так как область не была найдена. "delete-token-not-found

"Попытка удаления токена не может быть выполнена как токен не найден. "failed-delete-vapid-key

"Ключ VAPID не может быть удален." неудавшийся serviceworker регистрация

"Мы не можем зарегистрировать работника службы по умолчанию. {$ browserErrorMessage} "токен неудачного удаления

"Невозможно удалить текущий сохраненный токен." получить-подписки не удалось

"Произошла ошибка при попытке получить любой существующий Push Подписки. "Invalid-gcm-sender-id

"Пожалуйста, измените значение" gcm_sender_id "в манифесте вашего веб-приложения на «103953800507» для использования сообщений Firebase. «Invalid-delete-token

"Вы должны передать действительный токен в deleteToken (), то есть токен из getToken (). "invalid-public-vapid-key

«Открытый ключ VAPID должен быть строкой.» недействительный сохраняемый-маркер

"Невозможно получить доступ к деталям сохраненного токена." нет-FCM-токен-для-переоформить подписку

"Не удалось найти токен FCM и в результате невозможно повторно подписаться. Придется повторно подписывать пользователя при следующем посещении. "No-sw-in-reg

"Несмотря на то, что регистрация работника службы была успешной, было проблема с доступом к самому сервисному работнику. " нет окна-клиент-сообщ

"Была предпринята попытка отправить сообщение несуществующему оконному клиенту." уведомления блокированными

"Уведомления заблокированы." только доступный в-SW

"Этот метод доступен в контексте работника сервиса." только доступный в-окне

"Этот метод доступен в контексте окна." разрешение блокированного

«Необходимые разрешения не были предоставлены и заблокированы.» разрешение по умолчанию

«Вместо этого необходимые разрешения не были предоставлены и отклонены». общественно-пресным ключ-дешифрования-не удалось

"Открытый ключ VAPID не был равен 65 байтов при расшифровке." должна-быть переопределен

"Этот метод должен быть переопределен расширенными классами." SW-р-избыточный

«Служебный работник, используемый для push, был сокращен». SW-регистрация ожидалось

"Регистрация работника службы была ожидаемым входом." Маркер-подписки-не удалось

"Произошла ошибка при подписке пользователя на FCM: {$ message}" не лексема подписка-нет-нажимной установлен

"FCM вернул неверный ответ при получении токена FCM." Маркер-не подписываться-нет-токен

"FCM не вернул токен при подписке пользователя на push." Маркер-отписки-не удалось

"Произошла ошибка при отмене подписки пользователя на FCM: {$ message}" лексема-обновление-не удалось

"Произошла ошибка при обновлении пользователя из FCM: {$ message}" лексема-обновление-нет-токен

"FCM не вернул токен при обновлении пользователя для отправки." неспособный к переоформить подписку

"Произошла ошибка при повторной подписке токена FCM на push обмена сообщениями. Придется повторно подписывать пользователя при следующем посещении. {$ message} "unsupported-browser

"Этот браузер не поддерживает API, необходимый для использования Firebase SDK. "Use-sw-before-get-token

"Вы должны вызвать useServiceWorker () перед вызовом getToken (), чтобы ваш работник службы используется. "

Answer 1

Настройка сервера для получения уведомлений

Добавьте следующие файлы в общую папку:

manifest.json

{
    "gcm_sender_id": "103953800507"
}

firebase-сообщений-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() {
    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);
    // ...
    });
}

Отправить уведомление

UPDATE

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"
      }
   }
}

Токен отправителя

В своем бэкэнде используйте следующий код, где файл «Certificate.json» был получен на панели инструментов Firebase (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 используется в заголовке авторизации для отправки уведомления