Check out a free preview of the full Progressive Web Applications and Offline course:
The "Challenge 7: Fallback Image" Lesson is part of the full, Progressive Web Applications and Offline course featured in this preview video. Here's what you'd learn in this lesson:

In this challenge, students implement a fallback image in the event the application encounters a response status for image requests.

Get Unlimited Access Now

Transcript from the "Challenge 7: Fallback Image" Lesson

[00:00:00]
>> Steve Kinney: So what we're gonna implement is a fallback image. In this case, we might wanna say, hey, go to the network, get me a given image, right, maybe The Beatles, maybe Oasis or something along those lines. And if you cannot do that, then I have this image for you.

[00:00:22] And this is a really good use case of, we might use this if we were building a social media app or web insecurity app. We could theoretically have, go get me this user's avatar, but if you can't, here's that silhouette of a person. Right, and so if they are offline, and in a perfect world we would have cached that user's avatar last time we were online, but let's assume in this case that we haven't.

[00:00:46] We could say, go in, see if you can get it. If you can't, fall back to this other image, right? So going back, last time in that glitch that we just looked at, we took a look at anything massive beetles URL, right? In that case, we,
>> Steve Kinney: Said if you match that we're gonna go ahead and fetch the oasis one and send it back to you.

[00:01:14] In this case, what we probably wanna do is when this service worker loads, we likely want to add that fallback image which is located at localhost:3100 /images/genericfallaback,.jpg. Let's store that in our cache, right? As soon as the service work installs. Then, if we make a request and that fetch fails, right, but catch, right, cuz we know that fetches only fail when there's a network error.

[00:01:43] Okay, why don't we respond with going into the cache and getting that generic fallback image?
>> Steve Kinney: Some little helpful hints is you can't really just do it for everything, right? Cuz they requested JavaScript here is the fallback image, that's not really a method for happiness in your application.

[00:02:08] So again, this highlights the fact that we have problematic access, right? We can take a look at the request, we can see what it accepts, right? And images one of the request headers is they accept image/ star/ PNG, JPEG, whatever. And if it's located in the image directory for our assets we now know this is a probably a grocery item cuz that's just the way the application is structured.

[00:02:34] Then that's where we can step in, figure out getting from the cache something along those lines, right? So this is here for you as well. If you have the slides open in a browser tab, just make sure that you refresh them cuz we have updated them since then.

[00:02:49] If you don't see this slide, just refresh and you will see it. But your mission,
>> Steve Kinney: We want to ideally store a fallback image. In the cache, when a network request comes in, if we can't get to the image, we will go to the cache, get the fallback image and send them that instead.

[00:03:12] If you want to test what it's like to have no internet, you could theoretically turn off WiFi. That will work, if you go into the application tab and service worker, right next to that update and reload there is also an offline check box which will, the rest of your internet work.

[00:03:31] But it will just tell Chrome at this moment pretend I don't have internet.