service-worker: fix caching of app icons

The application icons, like favicon.ico were not being cached properly
and were missing when the app was used offline.

Changing the strategy to CacheFirst and changing the test to include
all images fixes the problem.

src/service-worker.ts

@@ -1,3 +1,6 @@
+// SPDX-License-Identifier: MIT
+// Copyright (c) 2022 The Pybricks Authors
+
 /// <reference lib="webworker" />
 /* eslint-disable no-restricted-globals */
 
@@ -11,10 +14,9 @@
 // istanbul ignore file
 
 import { clientsClaim } from 'workbox-core';
-import { ExpirationPlugin } from 'workbox-expiration';
 import { createHandlerBoundToURL, precacheAndRoute } from 'workbox-precaching';
 import { registerRoute } from 'workbox-routing';
-import { StaleWhileRevalidate } from 'workbox-strategies';
+import { CacheFirst } from 'workbox-strategies';
 
 declare const self: ServiceWorkerGlobalScope;
 
@@ -59,15 +61,10 @@ registerRoute(
 // precache, in this case same-origin .png requests like those from in public/
 registerRoute(
     // Add in any other file extensions or routing criteria as needed.
-    ({ url }) => url.origin === self.location.origin && url.pathname.endsWith('.png'),
+    ({ request }) => request.destination === 'image',
     // Customize this strategy as needed, e.g., by changing to CacheFirst.
-    new StaleWhileRevalidate({
+    new CacheFirst({
         cacheName: 'images',
-        plugins: [
-            // Ensure that once this runtime cache reaches a maximum size the
-            // least-recently used images are removed.
-            new ExpirationPlugin({ maxEntries: 50 }),
-        ],
     }),
 );