Добавление FCM в vue PWA - PullRequest
Новая
       3

Добавление FCM в vue PWA

0 голосов
/ 21 января 2020

Я пытаюсь добавить Firebase Massaging в мое приложение VueJS PWA, но получаю следующую ошибку:

@ ./src/main.js 6: 0-28 28: 13-16 @ multi (webpack) -dev-сервер / клиент? http://192.168.1.7: 8080 / sock js -node (webpack) /hot/dev-server.js ./ src / main. js

манифест. json в папке Publi c выглядит следующим образом: 

   "start_url": ".",
    "display": "standalone",
    "background_color": "#000000",
    "theme_color": "#210499",
    "gcm_sender_id": "103953800507"

firebase -messaging-sw. js в папке publi c выглядит так: 

   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: "452219633362"
   };
   firebase.initializeApp(config);

   let messaging = firebase.messaging();

Приложение. vue file Выглядит как: 

created() {
    var config = {
      apiKey: "My apiKey",
      authDomain: "My firebase domain",
      databaseURL: "database URL",
      projectId: "Project ID",
      storageBucket: "storage Bucket",
      messagingSenderId: "Sender id "
    };
    firebase.initializeApp(config);
    let 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);
      // ...
    });
  }

main. js выглядит так: 

   import Vue from "vue";
    import App from "./App.vue";
    import firebase from "firebase";
    import "../public/firebase-messaging-sw"

    Vue.config.productionTip = false;
     var config = {
          apiKey: "My apiKey",
          authDomain: "My firebase 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)
     })
    new Vue({
      render: h => h(App)
    }).$mount("#app");

Я не могу указать, что я сделал не так. Я использовал Vue -Кли версии 3. Может кто-нибудь помочь мне с этой ошибкой?

...