vite-plugin-firebase-messaging-sw

Vite plugin to generate a Firebase Cloud Messaging (FCM) service worker with env-aware configs and a dev no-store preview route.

✨ Features

• Generates firebase-messaging-sw.js automatically at build time
• Serves SW in dev mode with Cache-Control: no-store
• Accepts Firebase configs directly via plugin options (no external imports)
• Supports passing configs as function → resolve per mode/command
• Optional analytics hooks for impression and open tracking
• Includes build metadata (swVersion, generatedAt, etc.)
• Simple minifier built-in
• Fully customizable via transform(code)

📦 Installation

npm install vite-plugin-firebase-messaging-sw --save-dev
# or
yarn add -D vite-plugin-firebase-messaging-sw
# or
pnpm add -D vite-plugin-firebase-messaging-sw

🚀 Usage

Add the plugin in your vite.config.ts:

import { defineConfig } from "vite";
import { generateFirebaseMessagingSw } from "vite-plugin-firebase-messaging-sw";

export default defineConfig({
  plugins: [
    generateFirebaseMessagingSw({
      filename: "firebase-messaging-sw.js",
      outputDir: "static", // SvelteKit: /static → served at /
      firebase: {
        apiKey: process.env.FIREBASE_API_KEY!,
        authDomain: process.env.FIREBASE_AUTH_DOMAIN!,
        projectId: process.env.FIREBASE_PROJECT_ID!,
        storageBucket: process.env.FIREBASE_STORAGE_BUCKET!,
        messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID!,
        appId: process.env.FIREBASE_APP_ID!,
        measurementId: process.env.FIREBASE_MEASUREMENT_ID, // optional
      },
      analytics: {
        impressionUrl: "https://your-tracker/impression",
        openUrl: "https://your-tracker/open"
      },
      minify: true
    })
  ]
});

Dev mode

• Served at: http://localhost:5173/firebase-messaging-sw.js
• Headers: Cache-Control: no-store, ETag
• Always reflects the latest config

Build mode

• SW file is emitted to dist/ and mirrored into outputDir (e.g. /static or /public)

⚙️ Options

| Option | Type | Default | Description | |-------------------------|-----------------------------------------------|--------------------------------|-------------| | outputDir | string | "static" | Directory to output SW file | | filename | string | "firebase-messaging-sw.js" | File name of service worker | | firebaseCompatVersion | string | "9.22.2" | Firebase compat CDN version | | firebase | FirebaseConfig or (ctx) => FirebaseConfig | required | Firebase project configs | | meta.appEnv | string | mode | Arbitrary env label | | meta.target | string | "web" | Arbitrary target label | | analytics | object | { srcParam:"src", cidParam:"cid", srcValue:"fcm" } | Analytics endpoints + params | | minify | boolean | true in production | Whether to minify SW code | | transform | (code: string) => string | – | Final hook to modify JS |

🔑 FirebaseConfig

You must provide at least these fields:

type FirebaseConfig = {
  apiKey: string;
  authDomain: string;
  projectId: string;
  storageBucket: string;
  messagingSenderId: string;
  appId: string;
  measurementId?: string;
};

🛠️ Example Output

/* Auto-generated at 2025-09-09T13:45:00.000Z */
importScripts("https://www.gstatic.com/firebasejs/9.22.2/firebase-app-compat.js");
importScripts("https://www.gstatic.com/firebasejs/9.22.2/firebase-messaging-compat.js");

(function(){
  // ... firebase init, analytics tracking, background handler
  self.addEventListener("notificationclick", (event) => { /* ... */ });
})();

🤝 Contributing

PRs and issues welcome!
👉 Open an issue

📄 License

MIT © dev.zarghami