Safari gets stuck when using cache

[cherylEnkidu]

Operating System

MacOS Sonoma 14.4

Browser Version

Safari 17.4

Firebase SDK Version

10.8.0

Firebase SDK Product:

Firestore

Describe your project's tooling

NA

Describe the problem

Context: #7940
Internal tracking ticket: b/330146982, b/330181199

A developer, @jmw11x reports Safari getting stuck when using cache.

After initial investigation, the root cause is data stored in cache on Safari lost at some point. The problem is related to Safari indexdb issue. The Firestore SDK team hasn't find work around so far.

Steps and code to reproduce issue

The issue can be consistently reproduced on Safari using developer's repo App : https://github.com/jmw11x/FirebaseFirestore-Case-10271607/tree/main

[pJimenezProadata]

Are there any news on this issue? We are using this library on an Ionic Capacitor app for iOS and the problem still persists. Thank you!!

[cherylEnkidu]

@pJimenezProadata

Unfortunately the team doesn't have a workaround so far.

[tobylewis]

This has cost me days and significant frustration.

Firebase seems to get stuck right at the beginning. Clearing caches from the Safari developer menu, or clear history, immediately unblocks any pending queries etc.

As a workaround I set a timeout before calling onSnapshot() and clear it in the callback.

let fix:any = setTimeout(() => {
    localStorage.setItem('safari-reset', String(Date.now()))
    window.location.reload()
}, 5000) // 5 second timeout
onSnapshot((snaps)=>{
    if (fix) {
        clearTimeout(fix)
        fix = false
    }
    // process snaps
}

If firebase is not responding then the timeout fires setting a flag and reloading the page.

When initialising firebase after reload I use the memoryLocalCache() instead of persistentMultipleTabManager() if it has failed in the last five minutes.

let localCache: any = persistentLocalCache({ tabManager: persistentMultipleTabManager() })
if (Number(localStorage.getItem('safari-reset')) > (Date.now() - 300000)) { // five minutes
    localCache = memoryLocalCache()
}
initializeFirestore(app, { localCache })

Not ideal but gets the app working on safari. I actually show the user a confirmation dialog before doing the reload so they know why it is reloading and to prevent infinite looping if something else has gone pear shaped.

[cherylEnkidu]

Hi @tobylewis,

Thank you so much for providing your workaround to help other developers! Could you please help our team verify if you just use persistentMultipleTabManager() and not ask the page the force reload, will that solve the problem?

[tobylewis]

Hi @cherylEnkidu
I use persistentMultipleTabManager() as default because I want the data persisted all the time. The problem is that sometimes the request seems to get stuck in the cache retreival and never pings the server nor returns a result to my call. So when fails (using a setTimout() I detect a long delay after making firestore query) I downgrade to memoryLocalCache().

It's my understanding I can only only set the localCache with initializeFirestore() and this can only be called before any other firestore commands. Therefore I need to reload the page in order to call this again.

[cherylEnkidu]

Hi @tobylewis ,

Thank you for you detailed and quick explanation.

The problem you are running into seems to be different from this open ticket. In the ticket's case, cache on Safari lost at some point but it won't make request pending. Could you please open a new ticket to provide us a repo / log? Also could you please help us check your issue only happened with Safari but not other browsers?