如何在Quasar Framework（Vue.js 2）中集成Service Worker处理Firebase离线推送通知

我完全懂你现在的迷茫——刚接触Service Worker，还要把Quasar、Capacitor、Firebase这几个东西凑在一起处理后台推送，不同文档的实现方式还不一样，很容易摸不着头绪。我给你梳理一套针对性的步骤，一步步来就能搞定：

Quasar已经帮你搭好了Service Worker的基础注册框架，你要做的就是：

• 把Firebase消息服务和这个注册好的Service Worker关联起来
• 扩展Service Worker的逻辑，专门处理App关闭/后台状态下的推送通知
• 适配Capacitor的原生环境，确保Android/iOS端都能正常接收

首先确保你已经安装了Firebase SDK，没装的话先跑命令：

npm install firebase

然后在src目录下新建firebase.js，填入你的Firebase项目配置（从Firebase控制台复制就行）：

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

const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的SENDER_ID",
  appId: "你的APP_ID"
}

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

打开Quasar生成的register-service-worker.js，在里面加入Firebase Messaging的初始化和权限请求逻辑，关联已注册的Service Worker：

import { register } from 'register-service-worker'
import { messaging } from './firebase' // 引入刚才的Firebase配置

register(process.env.SERVICE_WORKER_FILE, {
  ready (registration) {
    console.log('Service worker is active.')
    // 把Firebase消息服务和当前Service Worker绑定
    messaging.useServiceWorker(registration)
    
    // 请求用户授权推送通知
    messaging.requestPermission()
      .then(() => {
        console.log('通知权限已获取')
        return messaging.getToken()
      })
      .then(token => {
        console.log('FCM Token:', token)
        // 这里可以把Token传给你的后端，用来定向推送
      })
      .catch(err => {
        console.error('权限被拒绝或获取Token失败:', err)
      })
  },
  // 下面这些原有事件保留不动
  registered (/* registration */) {
    console.log('Service worker has been registered.')
  },
  cached (/* registration */) {
    console.log('Content has been cached for offline use.')
  },
  updatefound (/* registration */) {
    console.log('New content is downloading.')
  },
  updated (/* registration */) {
    console.log('New content is available; please refresh.')
  },
  offline () {
    console.log('No internet connection found. App is running in offline mode.')
  },
  error (err) {
    console.error('Error during service worker registration:', err)
  }
})

Quasar默认的Service Worker只做缓存，你需要新建一个专门处理Firebase消息的Service Worker文件。在src目录下新建firebase-messaging-sw.js：

// 导入Firebase的兼容版脚本（因为Service Worker里用ES模块有些限制）
importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js')
importScripts('https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js')

// 同样填入你的Firebase配置
const firebaseConfig = {
  apiKey: "你的API_KEY",
  authDomain: "你的AUTH_DOMAIN",
  projectId: "你的PROJECT_ID",
  storageBucket: "你的STORAGE_BUCKET",
  messagingSenderId: "你的SENDER_ID",
  appId: "你的APP_ID"
}

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

// 处理App关闭/后台时的推送消息
messaging.onBackgroundMessage(payload => {
  console.log('收到后台推送:', payload)
  const notificationTitle = payload.notification.title
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/icons/icon-192x192.png' // 换成你项目里的图标路径
  }

  // 显示系统通知
  self.registration.showNotification(notificationTitle, notificationOptions)
})

然后修改quasar.conf.js的PWA配置，告诉Quasar用我们自定义的Service Worker：

pwa: {
  // 其他原有配置保持不变
  workboxPluginMode: 'InjectManifest', // 切换成自定义Service Worker模式
  workboxOptions: {
    swSrc: 'src/firebase-messaging-sw.js', // 指定我们的自定义文件
    // 如果你不想丢Quasar默认的缓存功能，可以把默认的Service Worker代码复制到这个文件里合并逻辑
  }
}

因为你要打包成Android和iOS App，这一步不能少：

• Android端：从Firebase控制台下载google-services.json，放到android/app目录下；推荐用@capacitor-firebase/messaging插件简化原生配置，它会帮你处理原生推送权限和消息接收。
• iOS端：下载GoogleService-Info.plist放到ios/App/App目录下，打开Xcode开启推送通知权限，配置好APNs证书。
• 注意：Capacitor的WebView里Service Worker正常工作，但原生推送优先级更高，所以同时配置Capacitor Firebase插件能确保两端都稳定。

• 后台推送没反应：检查firebase-messaging-sw.js是否正确注册，浏览器控制台有没有报错；推送消息的payload必须包含notification字段才会触发后台处理。
• 权限请求失败：确认浏览器/原生App的通知权限已开启。
• Token获取失败：检查Firebase配置是否正确，Service Worker的scope是否为./（Quasar默认就是这个，一般没问题）。

内容的提问来源于stack exchange，提问作者MyNameIsLinuxx