Skip to content

Instantly share code, notes, and snippets.

@ireade
Last active May 28, 2024 19:17
Show Gist options
  • Save ireade/128adedc16bf1bd1de98397d437c339d to your computer and use it in GitHub Desktop.
Save ireade/128adedc16bf1bd1de98397d437c339d to your computer and use it in GitHub Desktop.
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
)
});
@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