Skip to main content
All CollectionsAll Things Caching
Prevent images from breaking
Prevent images from breaking

Find out how to use caching strategies, precaching, and fallback URLs to prevent images from breaking on network failures

Kevin Basset avatar
Written by Kevin Basset
Updated over 2 years ago

Problem

So let's say your app lets users upload their own avatars. If you use Firebase Storage, they'll be available at a URL that looks like this:

https://firebasestorage.googleapis.com/v0/b/pwaa-8d87e.appspot.com/o/eWYX0PrgnbmJTIRgmYiH%2FNIGGCsZyEvKwBbC.png?alt=media&token=f933dbf8-c434-4023-b48c-82f0293aba91

Now, let's say a user is browsing your site from a place where internet connectivity is somewhat unstable. If their internet ever fails, or if Firebase is down, this is what will happen:

A broken image. Not great!

Solution

With Progressier, we're going to build a solution. The goal? That the page never shows a broken image. Here is how this will work:

  1. We're going to cache all avatars with a Cache-First strategy. Every time an avatar is downloaded from our server, it will be stored in the browser cache. In every subsequent load, we will get it from the cache rather than the network. Fewer network requests = lower Firebase bill!

  2. Here, the Cache-First strategy is the right one. If a user uploads a different avatar, it will be stored at a different URL. So the URL above will always exclusively display the same content. It's never updated. Otherwise, we should probably use Stale-While-Revalidate or Network First.

  3. If the network fails before the browser had a chance to store the avatar in the cache, we want to display a prettier placeholder instead.

Get started

  1. Log in to your Progressier dashboard, click on Caching Strategies in the menu, Click on New strategy, and name it Images hosted on Firebase.

  2. Open the strategy you just created, and then click Add filter

  3. We're going to apply this strategy exclusively to images with a URL that contains https://firebasestorage.googleapis.com/

  4. After clicking Save, click on the strategy type at the top-right corner and select Cache First. Finally, click Save changes.

  5. Now we're going to precache our fallback image. Precaching happens during the service worker lifecycle. When someone accesses your app for the first time, this image will be retrieved and then saved in the cache — before we might even need it. Click on Resources Rules at the bottom of the page.

  6. Click on the Add URLs to Precache button and enter the URL of the image: https://progressier.com/assets/img/profile-picture.svg

  7. Now we have one last thing to do: set up our Fallback URLs. We're going to instruct the browser to try to get the fallback image if the avatar is not available from the cache or the network. Click on Fallback URLs and Add Fallback URLs.

  8. Here we can add a specific URL, but in this case, we want to create a rule that matches all Firebase URLs. Fortunately, Progressier supports wildcard URLs. We're going to enter https://firebasestorage.googleapis.com/* as the Original URL and https://progressier.com/assets/img/profile-picture.svg as the Fallback URL (the same that we used in the Precaching section).

    For reference, other examples of valid wildcard URLs include:

    • https://*.example.com/*

    • https://example.com/subdirectory/*

    • https://example.com/*/subdirectory

  9. This is what you should see at this point. Close this modal and if you haven't yet, click Save changes at the top of the page.

  10. That's it! You've set up caching so that images never appear broken. This is one of the many improvements you can apply to your app by making good use of caching strategies, precaching and fallback URLs.

Did this answer your question?