cache offline page

apps/frontend/package.json

@@ -33,6 +33,6 @@
         "postcss": "^8.5.3",
         "prettier-plugin-tailwindcss": "^0.6.11",
         "tailwindcss": "^3.4.17",
-        "vite": "^6.2.3"
+        "vite": "^6.2.4"
     }
 }

apps/frontend/public/service-worker.js

@@ -93,7 +93,20 @@ addEventListener('fetch', (event) => {
                 return cachedResponse
             }
 
-            return await handleFetch(event.request, cache)
+            try {
+                return await handleFetch(event.request, cache)
+            } catch (error) {
+                console.error(
+                    `Failed to fetch from network for ${event.request.url}:`,
+                    error
+                )
+
+                return new Response(undefined, {
+                    status: 503,
+                    statusText: 'Service Unavailable',
+                    headers: { 'Content-Type': 'text/html' },
+                })
+            }
         })()
     )
 })

apps/frontend/scripts/generate-resource-list.js

@@ -22,11 +22,8 @@ const assetPaths = Object.values(manifest).flatMap((entry) => [
 ])
 
 const favicons = ['icon.svg', 'icon-512.png', 'icon-192.png', '/favicon.ico']
-
 const resourcesToCache = [...routesToCache, ...assetPaths, ...favicons]
-
 const resourceList = `const RESOURCE_LIST = ${JSON.stringify(resourcesToCache, null, 2)};`
-
 fs.writeFileSync(outputPath, resourceList)
 
 console.log('Resource list generated:', outputPath)

apps/frontend/src/App.tsx

@@ -11,7 +11,7 @@ import './index.css'
 const router = createRouter({
     scrollRestoration: true,
     defaultHashScrollIntoView: { behavior: 'smooth' },
-    defaultNotFoundComponent: DefaultNotFound,
+    defaultNotFoundComponent: () => <DefaultNotFound />,
     routeTree,
 })
 

apps/frontend/src/components/DefaultNotFound.tsx

@@ -1,6 +1,12 @@
 import { useRouter, Link } from '@tanstack/react-router'
 
-export default function DefaultNotFound() {
+type DefaultNotFoundProps = {
+    message?: string
+}
+
+export default function DefaultNotFound({
+    message = 'page not found',
+}: DefaultNotFoundProps) {
     const router = useRouter()
 
     const faces = [
@@ -59,7 +65,7 @@ export default function DefaultNotFound() {
                 </pre>
 
                 <h1 className="text-center text-3xl font-semibold md:text-4xl lg:text-5xl">
-                    page not found
+                    {message}
                 </h1>
             </div>
 

apps/frontend/src/routes/blog.$blogId.lazy.tsx

@@ -30,8 +30,8 @@ function BlogPost() {
             </h2>
         )
 
-    if (error) return <DefaultNotFound />
-    if (!post) return <DefaultNotFound />
+    if (error) return <DefaultNotFound message="error loading post" />
+    if (!post) return <DefaultNotFound message="post not found" />
 
     return (
         <main className="flex flex-col">

apps/frontend/src/routes/blog.index.lazy.tsx

@@ -18,8 +18,9 @@ function Blog() {
                 Loading...
             </h2>
         )
-    if (error) return <DefaultNotFound />
-    if (!data || !data.length) return <DefaultNotFound />
+    if (error) return <DefaultNotFound message="error loading blog" />
+    if (!data || !data.length)
+        return <DefaultNotFound message="blog not found" />
 
     const firstPost = data[0]
 

apps/frontend/src/routes/blog.search.tsx

@@ -47,8 +47,8 @@ function BlogSearch() {
                 Loading...
             </h2>
         )
-    if (error) return <DefaultNotFound />
-    if (!posts) return <DefaultNotFound />
+    if (error) return <DefaultNotFound message="error searching" />
+    if (!posts) return <DefaultNotFound message="no posts found" />
 
     return (
         <main

packages/api/src/server/start-server.ts

@@ -7,6 +7,7 @@ const allowedOrigins =
               'https://devlinrocha.com',
               'https://www.devlinrocha.com',
               'https://staging.devlinrocha.com',
+              'https://staging.devlinrocha.pages.dev',
               'https://www.staging.devlinrocha.com',
           ]
         : ['http://localhost:4173', 'http://localhost:5173']