firebase-messaging pwa fcm 推送

官网 console.firebase.google.com/u/0/project… 注册账户 注册应用 获取配置信息 npm install firebase

1. pwa 应用打包根目录必须要 firebase-messaging-sw.js 文件 否则会提示缺失文件报错

// firebase-messaging-sw.js  平台复制下来
importScripts('https://www.gstatic.com/firebasejs/8.8.0/firebase-app.js')
importScripts('https://www.gstatic.com/firebasejs/8.8.0/firebase-messaging.js')

const firebaseConfig = {
  apiKey: "*************************",
  authDomain: "*************************",
  projectId: "*************************",
  storageBucket: "*************************",
  messagingSenderId: "*************************",
  appId: "*************************",
  measurementId: "*************************"
}

firebase.initializeApp(firebaseConfig)
const messaging = firebase.messaging()

messaging.onBackgroundMessage(payload => {
	const notificationTitle = payload.notification.title
	const notificationOptions = {
		body: payload.notification.body,
		icon: '@/assets/icons/192.png'
	} // 这是一个调用浏览器系统级别通知的api
	self.registration.showNotification(notificationTitle, notificationOptions)
})

2.创建一个firebase.js

import { initializeApp } from 'firebase/app'

const firebaseConfig = {
  apiKey: "*************************",
  authDomain: "*************************",
  projectId: "*************************",
  storageBucket: "*************************",
  messagingSenderId: "*************************",
  appId: "*************************",
  measurementId: "*************************"
}

const firebaseApp = initializeApp(firebaseConfig)

export default firebaseApp

3.vue 文件里面使用 用户必须点击按钮主动获取通知权限

import firebaseApp from './firebase.js';  // 第2步里面的js
import { getMessaging, onMessage, getToken } from 'firebase/messaging';
const token = ref('')

function requestPermission() {
  if (!('Notification' in window)) {
    alert('当前浏览器不支持通知权限');
    return;
  }

  if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {

    Notification.requestPermission().then(async (permission) => {
      if (permission === 'granted') {
        const messaging = getMessaging(firebaseApp);
        const currentToken = await getToken(messaging, {
           vapidKey: '谷歌后台生成的密钥对'
        })
        if (currentToken) {
          token.value = currentToken
        }
        console.log(token.value);
      } else {
        console.log('Unable to get permission to notify.');
      }
    });
  }
}

<button @click="requestPermission">获取通知权限</button>