Handle broken images with the service worker

sw.js

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
    )
});

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

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