Vue Cli 3 и регистрация работника службы Firebase - PullRequest
Новая
       45

Vue Cli 3 и регистрация работника службы Firebase

0 голосов
/ 06 июня 2018

Я использовал Vue-cli 3 для создания приложения Vue и пытался включить в него FCM.Тем не менее, я работал над этим в течение двух дней, и я до сих пор не могу заставить его работать.

Во-первых, вот мой 

importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase- app.js');
importScripts('https://www.gstatic.com/firebasejs/4.8.1/firebase-messaging.js');
var config = {
  messagingSenderId: "69625964474"
};
firebase.initializeApp(config);
const messaging = firebase.messaging();

messaging.setBackgroundMessageHandler(function (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'
  }

  return self.registration.showNotification(notificationTitle, notificationOptions)
});

`` `

Одним из решений, которое работает как-то, является то, что я переместил этот файл в папку public и зарегистрировал его в App.vue используя 

const registration = await navigator.serviceWorker.register(`${process.env.BASE_URL}firebase-messaging-sw.js`)
messaging.useServiceWorker(registration)

Тем не менее, тогда у меня будет два сервисных работника (один из самого Vue).

Я попытался изменить vue.config.js, вместо этого пытаясь работать с Workboxдобавив следующую конфигурацию: 

module.exports = {
  pwa: {
    name: 'My App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',

    // configure the workbox plugin
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc is required in InjectManifest mode.
      swSrc: 'public/firebase-messaging-sw.js'
      // ...other Workbox options...
    }
  }
}

и затем зарегистрируйте ее снова в App.vue: 

const registration = await navigator.serviceWorker.register(`${process.env.BASE_URL}service-worker.js`)
messaging.useServiceWorker(registration)

Затем я получил следующую ошибку:

enter image description here

Если вас смущают упомянутые мной файлы или то, как выглядит каталог моего проекта, я просто создал PWA с помощью vue-cli 3. И я оставил большинствоструктуры нетронутой.

И я установил FireBase в main.js: 

import firebase from '@firebase/app'

Vue.config.productionTip = false

const config = {
  apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
  authDomain: process.env.VUE_APP_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_DATABASE_URL,
  projectId: process.env.VUE_APP_PROJECT_ID,
  storageBucket: process.env.VUE_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_MESSAGING_SENDER_ID
}

firebase.initializeApp(config)

Затем в App.vue: 

import firebase from '@firebase/app'
import '@firebase/messaging'

const messaging = firebase.messaging()
messaging.usePublicVapidKey('PUBLIC_KEY')

1 Ответ

0 голосов
/ 22 июля 2019

Сервисный работник по умолчанию отключен в режиме разработки, поэтому его запуск в разработке приведет к возвращению страницы с ошибкой HTML, поэтому вы получаете текстовую / html ошибку. Подробное объяснение можно найти здесь ССЫЛКА

...