Operating System

Windows 11

Environment (if applicable)

Chrome 130, Vue.js 2, Service Worker enabled (registerServiceWorker.js)

Firebase SDK Version

12.3.0

Firebase SDK Product(s)

Firestore

Project Tooling

Vue CLI, npm, Service Worker (registerServiceWorker.js), Firebase Hosting

Detailed Problem Description

Firestore fails to connect with ERR_CONNECTION_TIMED_OUT when service worker is active. Firebase Auth works perfectly, but Firestore queries consistently fail.

What I was trying to achieve

User login with Firebase Auth, then query Firestore users collection to fetch user data and validate session.

What actually happened

• Firebase Auth succeeds (user authenticated)
• Firestore queries timeout with WebChannelConnection RPC 'Listen' stream transport error
• Error: "Could not reach Cloud Firestore backend. Connection failed 1 times"
• Network tab shows: firestore.googleapis.com requests fail with ERR_CONNECTION_TIMED_OUT

Error Messages

@firebase/firestore: Firestore (12.3.0): WebChannelConnection RPC 'Listen' stream 0x3891a537 transport errored
Could not reach Cloud Firestore backend. Connection failed 1 times. Most recent error: FirebaseError: [code=unavailable]
firestore.googleapis.com/.../Listen/channel - ERR_CONNECTION_TIMED_OUT

Observed Behavior

• App served from cache by service worker
• Firebase offline persistence initialized
• Firestore connection attempts timeout
• User sees "No user found with userID: [valid_uid]" despite valid authentication
• Problem persists across page reloads
• Only happens in production with service worker active

Environment Details

• Service worker registered via registerServiceWorker.js
• Firestore offline persistence enabled: initializeFirestore(app, { localCache: persistentLocalCache() })
• Users have stable internet connection (other services work)
• Issue occurs in ~80% of login attempts

Steps and code to reproduce issue

1. Setup Firebase config with offline persistence:

import { initializeApp } from 'firebase/app';
import { initializeFirestore, persistentLocalCache } from 'firebase/firestore';

const firebaseApp = initializeApp(config);
const db = initializeFirestore(firebaseApp, {
  localCache: persistentLocalCache()
});

2. Enable service worker (registerServiceWorker.js from Vue CLI)

3. Deploy to Firebase Hosting with service worker enabled

4. Attempt Firestore query after Auth:

import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
import { getFirestore, collection, getDocs, query, where } from "firebase/firestore";

const auth = getAuth();
const db = getFirestore();

// Auth works
const userCredential = await signInWithEmailAndPassword(auth, email, password);

// Firestore fails with timeout
const userQuery = query(collection(db, 'users'), where('userID', '==', user.uid));
const querySnapshot = await getDocs(userQuery); // Timeout here

5. Check console - WebChannelConnection RPC transport error appears
6. Check Network tab - firestore.googleapis.com requests timeout

Expected Behavior

Firestore should work alongside service worker like Firebase Auth does.

Workarounds Attempted

• Added retry logic with exponential backoff (helps sometimes)
• Manual enableNetwork(db) calls
• Increased timeout values
• None provide consistent solution

Related Issues

• WebChannelConnection RPC 'Listen' stream 0x17d185b2 transport errored #8889, firebase/firestore: Firestore (10.12.2): WebChannelConnection RPC 'Write' stream 0x8ad3221f transport errored #8281, Firestore WebChannelConnection 'Write' stream transport errored on Expo React Native – write fails in production #8864, @firebase/firestore: Firestore (9.16.0): Connection WebChannel transport errored #6993, Hanging query for Firestore #7860, Angular ServiceWorker interferes with Firestore's network requests ("Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds" log warning). #901