Service Worker interferes with Firestore WebChannelConnection causing ERR_CONNECTION_TIMED_OUT

[Cameron1time]

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

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[MarkDuckworth]

Hi @Cameron1time,

Can you provide us with either of the following:

1. A minimal reproducible example
2. Debug logs from the Firestore SDK import {setLogLevel} from '@firebase/firestore; setLogLevel('debug');`

Having either one of these, or both, will help us get a better understanding of what you are experiencing and help us find a solution more quickly.

Also note that Vue.js 2 reached end of life in Dec 2023. Consider upgrading to the current version of Vue if possible.

[Cameron1time]

Hi Mark, Please see below: [2025-10-30T15:18:15.766Z] @firebase/firestore: Firestore (12.3.0): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds. This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend. [2025-10-30T15:18:26.801Z] @firebase/firestore: Firestore (12.3.0): WebChannelConnection RPC 'Listen' stream 0x5e99efb4 transport errored. Error fetching user data: FirebaseError: Failed to get document because the client is offline. Network errors: - firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?VER=8&database=projects%2Fengineering-76732%2Fdatabases%2F(default)&RID=27873&CVER=22&X-HTTP-Session-Id=gsessionid&zx=bj798po6uyoj&t=1 Failed to load resource: net::ERR_CONNECTION_TIMED_OUT Additional error: Uncaught FirebaseError: experimentalForceLongPolling and experimentalAutoDetectLongPolling cannot be used together. Configuration: - Firebase version: 12.3.0 - Using experimentalForceLongPolling due to firewall/antivirus (ESET) blocking standard connections - Calling enableNetwork/disableNetwork in retry logic - Project: engineering-76732 My internet connection is stable and has no problems, I have done multiple checks. Best Regards, *Cameron *

…

On Thu, 30 Oct 2025 at 17:20, Mark Duckworth ***@***.***> wrote: *MarkDuckworth* left a comment (firebase/firebase-js-sdk#9358) <#9358 (comment)> Hi @Cameron1time <https://github.com/Cameron1time>, Can you provide us with either of the following: 1. A minimal reproducible example <https://stackoverflow.com/help/minimal-reproducible-example> 2. Debug logs from the Firestore SDK import {setLogLevel} from ***@***.***/firestore; setLogLevel('debug');` Having either one of these, or both, will help us get a better understanding of what you are experiencing and help us find a solution more quickly. Also note that Vue.js 2 reached end of life in Dec 2023. Consider upgrading to the current version of Vue if possible. — Reply to this email directly, view it on GitHub <#9358 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BL2L6I7GPYHLT2UGOLTZKTL32IUDTAVCNFSM6AAAAACKUOSR5OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTINRYGU3DMMBZGA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[looptheloop88]

Thanks for sharing the debug logs, @Cameron1time. We appreciate it.

I tried reproducing the issue using the latest SDK version 12.5.0, but the sign-in or authentication flow was successful and the app retrieved data from Firestore without any problems. For testing purposes, I used the Firestore security rule: allow read, write: if request.auth != null. I tested this with both service worker-enabled and non-enabled apps.

Since I was unable to replicate the issue, there might be a difference in our project setups or I might be misunderstanding something. Could you please share a minimal, but complete sample project that I can use to reproduce the issue? Thank you!