Add 404 status for fast response to missing images

package.json

@@ -144,6 +144,7 @@
     "vue": "2.7.14",
     "vue2-daterange-picker": "0.6.8",
     "weekstart": "2.0.0",
+    "workbox-cacheable-response": "7.0.0",
     "workbox-core": "7.0.0",
     "workbox-expiration": "7.0.0",
     "workbox-precaching": "7.0.0",

src/entrypoints/service_worker.ts

@@ -3,6 +3,7 @@
 /// <reference path="../types/service-worker.d.ts" />
 /* eslint-env serviceworker */
 import { cacheNames, RouteHandler } from "workbox-core";
+import { CacheableResponsePlugin } from "workbox-cacheable-response";
 import { ExpirationPlugin } from "workbox-expiration";
 import { cleanupOutdatedCaches, precacheAndRoute } from "workbox-precaching";
 import { registerRoute, setCatchHandler } from "workbox-routing";
@@ -42,6 +43,8 @@ const initRouting = () => {
       // CORS must be forced to work for CSS images
       fetchOptions: { mode: "cors", credentials: "omit" },
       plugins: [
+        // Add 404 so we quicly respond to domains with missing images
+        new CacheableResponsePlugin({ statuses: [0, 200, 404] }),
         new ExpirationPlugin({
           maxAgeSeconds: 60 * 60 * 24 * 30,
           purgeOnQuotaError: true,

yarn.lock

@@ -9892,6 +9892,7 @@ __metadata:
     webpackbar: 5.0.2
     weekstart: 2.0.0
     workbox-build: 7.0.0
+    workbox-cacheable-response: 7.0.0
     workbox-core: 7.0.0
     workbox-expiration: 7.0.0
     workbox-precaching: 7.0.0