Vue CLI 3 및 Firebase 서비스 워커 등록

Vue CLI 3 및 Firebase 서비스 워커 등록

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)

단, 2명의 서비스 종업원(다른 1명은 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)

대신 다음과 같은 오류가 발생했습니다.

말씀드린 파일이나 프로젝트 디렉토리가 어떻게 보이는지 헷갈릴 경우 vue-cli 3을 사용하여 PWA를 작성하기만 하면 됩니다.그리고 대부분의 구조물은 손대지 않고 놔뒀어요

그리고 난 그곳에 방화벽 기지를 설치했어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')

서비스 워커는 디폴트로 개발 모드에서 비활성화되어 있기 때문에 개발 중에 실행하면 HTML 오류 페이지가 반환됩니다.이것이 텍스트/html 오류가 발생하는 이유입니다.자세한 설명은 이쪽 링크에서 찾을 수 있습니다.

언급URL : https://stackoverflow.com/questions/50711933/vue-cli-3-and-firebase-service-worker-registration