fix icon cache behavior breaking sw updates (#117)

* fix icon cache behavior breaking sw updates

* icon fallback

Author: a-type

app/src/serviceWorker.ts

@@ -40,6 +40,23 @@ const fallbackToOfflineCachePlugin: WorkboxPlugin = {
 	},
 };
 
+const iconPathMatch = /\/assets\/icon-\w+\.js/;
+// Cache icon files as they are fetched. we don't precache all icons
+// since there are hundreds of them and they are not all used in the app.
+// We just cache the ones that are used.
+registerRoute(
+	// Add in any other file extensions or routing criteria as needed.
+	({ url }) => url.origin === import.meta.env.VITE_PUBLIC_API_ORIGIN && iconPathMatch.test(url.pathname),
+	new StaleWhileRevalidate({
+		cacheName: 'icons',
+		plugins: [
+			// Ensure that once this runtime cache reaches a maximum size the
+			// least-recently used files are removed.
+			new ExpirationPlugin({ maxEntries: 200 }),
+		],
+	})
+);
+
 // Cache model files as they are fetched
 const modelPathMatch = /\/furniture\/.+\/model$/;
 registerRoute(

app/vite.config.ts

@@ -111,9 +111,10 @@ export default defineConfig({
 			output: {
 				chunkFileNames(chunkInfo) {
 					// mark dynamically imported icon chunks with a filename prefix so they can be handled differently
-					// by the PWA precache -- there are a lot of them.
+					// by the PWA precache -- there are a lot of them. No hashes so that they remain resolvable across builds
+					// even if they weren't cached, since we are not precaching all of them.
 					if (chunkInfo.moduleIds.some((id) => id.includes('lucide-react/dist/esm/icons/'))) {
-						return 'assets/icon-[name]-[hash].js';
+						return 'assets/icon-[name].js';
 					}
 					return 'assets/[name]-[hash].js';
 				},

packages/sys/src/components/icon/Icon.tsx

@@ -1,13 +1,14 @@
-import { forwardRef, lazy, Suspense, SVGAttributes, useContext } from 'react';
-import { IconName, LucideIconName } from './iconNames.js';
-import { CustomIconName, customIcons } from './customGlyphs/index.js';
-import dynamicIconImports from 'lucide-react/dynamicIconImports.js';
-import clsx from 'clsx';
-import { ICON_CLASS_NAME } from './constants.js';
 import { Slot } from '@radix-ui/react-slot';
-import cls from './Icon.module.css';
+import clsx from 'clsx';
+import dynamicIconImports from 'lucide-react/dynamicIconImports.js';
+import { forwardRef, lazy, Suspense, SVGAttributes, useContext } from 'react';
 import { ButtonContext } from '../button/ButtonContext.js';
+import { ErrorBoundary } from '../errorBoundary/ErrorBoundary.js';
 import { Spinner } from '../spinner/Spinner.js';
+import { ICON_CLASS_NAME } from './constants.js';
+import { CustomIconName, customIcons } from './customGlyphs/index.js';
+import cls from './Icon.module.css';
+import { IconName, LucideIconName } from './iconNames.js';
 
 export type { IconName } from './iconNames.js';
 
@@ -55,9 +56,11 @@ export const Icon = forwardRef<SVGSVGElement, IconProps>(function Icon({ name, c
 	const LucideIcon = lazy(dynamicIconImports[name as LucideIconName]);
 
 	return (
-		<Suspense fallback={<IconFallback />}>
-			<LucideIcon {...rest} absoluteStrokeWidth={absoluteStrokeWidth} className={clsx(ICON_CLASS_NAME, cls.icon, className)} ref={ref} />
-		</Suspense>
+		<ErrorBoundary fallback={<IconFallback ref={ref} />}>
+			<Suspense fallback={<IconFallback ref={ref} />}>
+				<LucideIcon {...rest} absoluteStrokeWidth={absoluteStrokeWidth} className={clsx(ICON_CLASS_NAME, cls.icon, className)} ref={ref} />
+			</Suspense>
+		</ErrorBoundary>
 	);
 });