Trouble implementing Firebase Notifications & Service Worker in Google AI Studio (no file system access)

Google AI Studio
1

Hi everyone, I’m currently building a web-app in Google AI Studio and I’ve run into a serious issue while trying to implement Firebase Cloud Messaging (push notifications).

What I’m trying to do:

  • Register a Service Worker (firebase-messaging-sw.js) to handle push notifications.

  • Host my React app built with Vite inside Google AI Studio.

  • Use Firebase / Google Cloud for the backend.

The problems I’m facing:

  1. Service Worker file

    In a normal setup I’d put firebase-messaging-sw.js at the root of my hosting environment. But in AI Studio I don’t have direct access to the root directory or a traditional file system. This leads to 404 errors or “Failed to register Service Worker” in the console.

  2. Notifications not triggering

    Because of the Service Worker problem, FCM push notifications aren’t delivered. I’ve already configured my Firebase project, Cloud Functions, and CORS settings correctly — it’s specifically the Service Worker location that’s blocking me.

  3. No direct file management

    In AI Studio I can only upload individual files or edit code inside the browser IDE. I can’t easily copy build artifacts like in a normal hosting environment, and there’s no obvious way to set the Service Worker at the root level.

I need browser push notifications. Does someone has an idea how to implement it in ai studio without file access?

THX

Martin

1 Like
3

HI @Martinhooo ,

The core issue is the Service Worker scope: FCM requires the firebase-messaging-sw.js file to be at the root of your deployed app’s domain (/).

Since your app uses Vite, the solution is to place the Service Worker file in the public folder of your project. Vite is designed to copy all files from the public folder directly to the root of the final build output (dist), which satisfies the FCM requirement.

  • Action 1: In the AI Studio IDE, create a folder named public at the project root (if it doesn’t exist).

  • Action 2: Move your firebase-messaging-sw.js file into this new public folder.

  • Action 3: Verify your Service Worker registration code uses the root path: navigator.serviceWorker.register(‘/firebase-messaging-sw.js’).

  • Action 4: Redeploy your application using the AI Studio’s “Deploy” button (to Cloud Run) or by exporting the code and deploying to Firebase Hosting for a stable, root-level serving environment.