Skip to content

Instantly share code, notes, and snippets.

@ireade
Last active April 29, 2021 22:38
Embed
What would you like to do?
Handle broken images with the service worker
self.addEventListener('install', (e) => {
e.waitUntil(
caches.open("precache").then((cache) => cache.add("/broken.png"))
);
});
function isImage(fetchRequest) {
return fetchRequest.method === "GET" && fetchRequest.destination === "image";
}
self.addEventListener('fetch', (e) => {
e.respondWith(
fetch(e.request)
.then((response) => {
if (response.ok) return response;
// User is online, but response was not ok
if (isImage(e.request)) {
// Get broken image placeholder from cache
return caches.match("/broken.png");
}
})
.catch((err) => {
// User is probably offline
if (isImage(e.request)) {
// Get broken image placeholder from cache
return caches.match("/broken.png");
}
}) // end fetch
)
});
@athlonUA
Copy link

👍 Yep, works fine. Full example here https://github.com/athlonUA/sw-fail-images

@fanjunzhi
Copy link

when first timen brower website, image error occur may happen before the 'broken.jpg' cached. sw scheme can coopera with css scheme。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment