How can I cache the getDownloadUrl() calls on the client with Firebase Firestore?

Question

I store some Firebase Storage paths for images/videos in the backend DB and the mobile client uses these to fetch the download URLs as/when needed for my views:

import {firebase} from '@react-native-firebase/storage';

// e.g. 'images/stars.jpg'
const getDownloadUrlForFilePath = (filePath: string | null): Promise<string> => {
  if (filePath === null) {
    throw 'Path is null!';
  }
  return getDownloadUrlForRef(firebase.storage().ref(filePath));
};

const getDownloadUrlForRef = (ref): Promise<string> => {
  return ref.getDownloadURL();
};

The problem is that I need the same image at many places. Hence I frequently call getDownloadURL() to retrieve the very same download Url. This results in the handset making multiple http requests for the same resource as it appears when I debug the network traffic.

I am not storing the retrieved download URLs in the mobile client anywhere in my current implementation.

I would like to find a way for the app to fetch the download URL only once for the same path and cache it. Is this supported by the Firebase SDK?

Answer 1

The download URL is valid from the moment it is generated until you revoke it (from the Firebase console). So it is indeed safe to store it, and re-use it.

In fact, most applications that use Cloud Storage through Firebase, generate a download URL right after they upload an image, and then store the download URL in a database, along with metadata about the image.

You'd typically:

1. Pass the download URL to clients that need unauthenticated access to the image.
2. Pass the path to clients that need authenticated access to the image, for example as they may need to update the data.

If you only store the download URL (as many apps do), you'll map that download URL back to the corresponding path in the second case by calling the Storage.refFromUrl() method.