In my config.js file for the app, I have:

firebase.initializeApp(firebaseConfig);

firebase.firestore().settings({ experimentalForceOwningTab: true, cacheSizeBytes: firebase.firestore.CACHE_SIZE_UNLIMITED, merge: true });

firebase.firestore().enablePersistence().catch((err) => {
  if (err.code == 'failed-precondition') {
    console.log(err);
 } else if (err.code == 'unimplemented') {
    console.log(err);
 }
});

In Safari the App loads but does not display any data. If I remove the enablePersistence flag, then I receive the error:

XMLHttpRequest cannot load https://firestore.googleapis.com/google.firestore.v1.Firestore/Listen/channel?XXX due to access control checks.

Then at some point much later or on occasion the data will show but I still get the same XMLHttpRequest error.

It is very inconsistent and am unable to have this more reliable as most of the times it will show no data – even after logging in/out etc

My firebase rules are currently:

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if request.auth != null;
    }
  }
}

I am also receiving the warning:

Firestore (10.12.2): enableIndexedDbPersistence() will be deprecated in the future, you can use `FirestoreSettings.cache` instead.

But am unsure how to fix that also!

Any help would be much appreciated.