Where and How to properly use enablePersistence() method from Firebase, for offline use of the web app?

Question

I made a simple web app with Vue.js and Firestore. I want to cache the web app and display the page even with no internet connection. I am not getting the desired results when I use the enablePersistence() method in the firebase configuration file in my Vue project built with PWA template. I tried to use that method in the lifecycle methods within the app components, still not getting the desired result.

Answer 1

Declaring it in your Firebase configuration file as follows should do the trick:

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';

var config = {
    apiKey: ....,
    authDomain: ....,
    //.....
};

firebase.initializeApp(config);

const db = firebase.firestore();
const auth = firebase.auth();

db.enablePersistence();

export { db, auth };