Enhance service worker and improve performance with prefetching

app/components/navigation/nav-main.tsx

@@ -88,7 +88,7 @@ export function NavMain() {
                     className="cursor-pointer data-current:bg-sidebar-accent data-current:text-sidebar-accent-foreground"
                     asChild
                 >
-                    <NavLink to="/">
+                    <NavLink to="/" prefetch="render">
                         <GaugeIcon aria-hidden className="mr-2" />
                         <span>Home</span>
                     </NavLink>
@@ -100,7 +100,7 @@ export function NavMain() {
                     className="cursor-pointer data-current:bg-sidebar-accent data-current:text-sidebar-accent-foreground"
                     asChild
                 >
-                    <NavLink to="/about">
+                    <NavLink to="/about" prefetch="render" end>
                         <NotebookIcon aria-hidden className="mr-2" />
                         <span>About</span>
                     </NavLink>
@@ -135,7 +135,12 @@ export function NavMain() {
                                                 className="inline-flex cursor-pointer items-center gap-x-2 data-current:bg-sidebar-accent data-current:px-2 data-current:font-medium data-current:text-sidebar-accent-foreground"
                                                 key={subItem.title}
                                             >
-                                                <NavLink to={subItem.url} aria-current={isActive ? 'page' : undefined}>
+                                                <NavLink
+                                                    to={subItem.url}
+                                                    aria-current={isActive ? 'page' : undefined}
+                                                    prefetch="render"
+                                                    end
+                                                >
                                                     <span>{subItem.title}</span>
                                                 </NavLink>
                                             </DropdownMenuItem>
@@ -176,6 +181,9 @@ export function NavMain() {
                                                             to={subItem.url}
                                                             {...(isActive && { 'data-current': '' })}
                                                             className="inline-flex items-center gap-x-2"
+                                                            aria-current={isActive ? 'page' : undefined}
+                                                            prefetch="render"
+                                                            end
                                                         >
                                                             <span>{subItem.title}</span>
                                                         </NavLink>

app/routes/calculators/index.tsx

@@ -75,6 +75,7 @@ export default function Page() {
                                     to={calc.href}
                                     aria-describedby={descId}
                                     className="block overflow-hidden rounded-md bg-background p-4 transition-shadow duration-150 hover:shadow-md focus:ring-2 focus:ring-ring focus:outline-none"
+                                    prefetch="viewport"
                                 >
                                     <h3 className="text-lg font-medium">{calc.title}</h3>
                                     <p id={descId} className="mt-2 text-sm text-muted-foreground">

app/routes/converters/index.tsx

@@ -77,6 +77,7 @@ export default function Index() {
                                     to={uc.href}
                                     aria-describedby={descId}
                                     className="block overflow-hidden rounded-md border bg-background p-4 transition-shadow duration-150 hover:shadow-md focus:ring-2 focus:ring-ring focus:outline-none"
+                                    prefetch="viewport"
                                 >
                                     <h3 className="text-lg font-medium">{uc.title}</h3>
                                     <p id={descId} className="mt-2 text-sm text-muted-foreground">

app/routes/programming/index.tsx

@@ -57,6 +57,7 @@ export default function Page() {
                                     to={p.href}
                                     aria-describedby={descId}
                                     className="block overflow-hidden rounded-md bg-background p-4 transition-shadow duration-150 hover:shadow-md focus:ring-2 focus:ring-ring focus:outline-none"
+                                    prefetch="viewport"
                                 >
                                     <h3 className="text-lg font-medium">{p.title}</h3>
                                     <p id={descId} className="mt-2 text-sm text-muted-foreground">

app/routes/utilities/index.tsx

@@ -78,6 +78,7 @@ export default function Page() {
                                     to={u.href}
                                     aria-describedby={descId}
                                     className="block overflow-hidden rounded-md bg-background p-4 transition-shadow duration-150 hover:shadow-md focus:ring-2 focus:ring-ring focus:outline-none"
+                                    prefetch="viewport"
                                 >
                                     <h3 className="text-lg font-medium">{u.title}</h3>
                                     <p id={descId} className="mt-2 text-sm text-muted-foreground">

app/sw.ts

@@ -1,5 +1,5 @@
 import type { PrecacheEntry, SerwistGlobalConfig } from 'serwist';
-import { CacheFirst, ExpirationPlugin, NetworkFirst, Serwist } from 'serwist';
+import { CacheFirst, ExpirationPlugin, NetworkFirst, Serwist, StaleWhileRevalidate } from 'serwist';
 
 // This declares the value of `injectionPoint` to TypeScript.
 // `injectionPoint` is the string that will be replaced by the
@@ -12,35 +12,75 @@ declare global {
 }
 
 declare const self: ServiceWorkerGlobalScope;
+const isDev = process.env['NODE_ENV'] !== 'production';
 
 const serwist = new Serwist({
     precacheEntries: self.__SW_MANIFEST,
+    precacheOptions: { cleanupOutdatedCaches: true },
     skipWaiting: true,
     clientsClaim: true,
     navigationPreload: true,
+    disableDevLogs: !isDev,
     runtimeCaching: [
         {
             matcher: ({ request }) => request.mode === 'navigate',
-
             handler: new NetworkFirst({
                 cacheName: 'pages',
             }),
         },
-
         {
             matcher: ({ request }) => request.destination === 'image',
-
             handler: new CacheFirst({
                 cacheName: 'images',
                 plugins: [
                     new ExpirationPlugin({
                         maxEntries: 200,
-                        maxAgeSeconds: 60 * 60 * 24 * 30,
+                        maxAgeSeconds: 60 * 60 * 24 * 30, // 30 days
+                    }),
+                ],
+            }),
+        },
+        {
+            matcher: ({ request }) => /\.json$/i.test(request.url) || request.url.endsWith('.json'),
+            handler: new StaleWhileRevalidate({
+                cacheName: 'public-json',
+                plugins: [
+                    new ExpirationPlugin({
+                        maxEntries: 128,
+                        maxAgeSeconds: 30 * 24 * 60 * 60, // 30 days
+                        maxAgeFrom: 'last-used',
                     }),
                 ],
             }),
         },
     ],
 });
 
+if (isDev) {
+    self.addEventListener('install', (event) => {
+        console.log('Event install (dev only)', event);
+        self.skipWaiting();
+    });
+
+    self.addEventListener('activate', (event) => {
+        event.waitUntil(self.clients.claim());
+    });
+
+    self.addEventListener('fetch', (event) => console.log('Fetch event (dev only)', event));
+}
+
+self.addEventListener('install', (event) => {
+    event.waitUntil(
+        (async () => {
+            const routes: string[] = await fetch('/routes.json').then((r) => r.json());
+
+            const requestPromises = routes.map((route) =>
+                Promise.resolve(serwist.handleRequest({ request: new Request(route), event })),
+            );
+
+            await Promise.allSettled(requestPromises);
+        })(),
+    );
+});
+
 serwist.addEventListeners();