146 lines
5.1 KiB
Plaintext
146 lines
5.1 KiB
Plaintext
Hier ist die instruktive Anleitung für deine IDE (Cursor, Antigravity, etc.). Du kannst diesen Text direkt als Prompt oder Kontext-Datei (`OFFLINE_STRATEGY.md`) in deine IDE kopieren.
|
|
|
|
Es enthält die **Pre-Caching Strategie** (für den Start im Keller) und den **Navigation Fallback** (gegen den White Screen).
|
|
|
|
---
|
|
|
|
# 🛡️ PWA "Ironclad" Offline Strategy Implementation
|
|
|
|
**Context:** The application fails to load when started completely offline ("Keller-Szenario") or crashes during navigation when the network is flaky.
|
|
**Goal:** Implement aggressive Pre-Caching for core routes and a robust Navigation Fallback in `public/sw.js`.
|
|
**Framework:** Next.js (App Router) + Workbox.
|
|
|
|
## 🚨 Critical Requirements
|
|
|
|
1. **Preserve Existing Logic:** Do not remove the `skipWaiting()` or `clients.claim()` logic if already present.
|
|
2. **App Router Compatibility:** Ensure `_next/data` requests do not cause crashes.
|
|
3. **Dexie Integration:** Rely on the existing `useLiveQuery` hooks for data. The Service Worker only needs to deliver the **App Shell**.
|
|
|
|
---
|
|
|
|
## 📝 Implementation Instructions for `public/sw.js`
|
|
|
|
Please refactor or append the Service Worker logic to include the following **three mechanics**:
|
|
|
|
### 1. Define Core Pages (The "Keller" List)
|
|
|
|
Define a list of static routes that *must* work immediately upon installation, even without a network connection.
|
|
|
|
```javascript
|
|
// CONFIG: Core pages to pre-cache immediately on install
|
|
const CORE_PAGES = [
|
|
'/', // Dashboard / Home
|
|
'/tasting/new', // Critical: Add Tasting Screen
|
|
'/scan', // Critical: Scan Screen
|
|
'/offline' // Optional: Dedicated offline fallback
|
|
];
|
|
|
|
```
|
|
|
|
### 2. The "Warm Cache" Install Event
|
|
|
|
Add an `install` event listener that aggressively fetches these pages into the cache *before* the user needs them.
|
|
|
|
```javascript
|
|
self.addEventListener('install', (event) => {
|
|
event.waitUntil(
|
|
caches.open('pages').then((cache) => {
|
|
console.log('⚡ PWA: Pre-caching core pages for offline usage...');
|
|
// { cache: 'reload' } forces a network fetch, ignoring browser http cache
|
|
return cache.addAll(CORE_PAGES);
|
|
})
|
|
);
|
|
self.skipWaiting();
|
|
});
|
|
|
|
```
|
|
|
|
### 3. The Navigation Safety Net (The "Anti-Crash" Logic)
|
|
|
|
Implement a `NavigationRoute` that attempts the network first (with a short timeout), falls back to the cache, and—**critically**—falls back to the Root (`/`) if the specific deep-link is missing from the cache.
|
|
|
|
*Rationale:* In Next.js (SPA), loading `/` from cache is sufficient to bootstrap the React app. The client-side router will then handle the URL, and Dexie will provide the data.
|
|
|
|
```javascript
|
|
import { registerRoute, NavigationRoute } from 'workbox-routing';
|
|
import { NetworkFirst } from 'workbox-strategies';
|
|
import { CacheableResponsePlugin } from 'workbox-cacheable-response';
|
|
|
|
// Strategy: Network (3s timeout) -> Cache -> Fallback to Root
|
|
const navigationHandler = async (params) => {
|
|
try {
|
|
// 1. Try Network First (Fail fast if poor connection)
|
|
const strategy = new NetworkFirst({
|
|
cacheName: 'pages',
|
|
networkTimeoutSeconds: 3,
|
|
plugins: [
|
|
new CacheableResponsePlugin({ statuses: [0, 200] }),
|
|
],
|
|
});
|
|
return await strategy.handle(params);
|
|
|
|
} catch (error) {
|
|
// 2. Network failed. Try getting the specific page from cache.
|
|
const cache = await caches.open('pages');
|
|
// params.request.url contains the full URL user is trying to reach
|
|
let response = await cache.match(params.request);
|
|
|
|
if (response) return response;
|
|
|
|
// 3. CRITICAL FALLBACK: Load the App Shell (Root)
|
|
// Even if the user requested /tasting/new, serving / allows Next.js to start.
|
|
// Once React hydrates, it sees the URL is /tasting/new and renders the correct page
|
|
// using data from Dexie.
|
|
const fallbackResponse = await cache.match('/');
|
|
if (fallbackResponse) {
|
|
console.log('⚠️ PWA: Serving Root App Shell for offline navigation.');
|
|
return fallbackResponse;
|
|
}
|
|
|
|
// 4. Absolute last resort
|
|
return new Response('Offline mode unavailable', { status: 504 });
|
|
}
|
|
};
|
|
|
|
// Apply this handler to all Navigation requests
|
|
registerRoute(new NavigationRoute(navigationHandler));
|
|
|
|
```
|
|
|
|
### 4. Handling Next.js Data (RSC)
|
|
|
|
Prevent crashes when `_next/data/...` fetches fail.
|
|
|
|
```javascript
|
|
// Swallow errors for RSC data to prevent "Application Error" screens
|
|
registerRoute(
|
|
({ url }) => url.pathname.startsWith('/_next/data/'),
|
|
new NetworkFirst({
|
|
cacheName: 'next-data',
|
|
networkTimeoutSeconds: 2,
|
|
plugins: [
|
|
{
|
|
// If offline and not in cache, return empty JSON to keep React alive
|
|
handlerDidError: async () => new Response(JSON.stringify({}), {
|
|
headers: { 'Content-Type': 'application/json' }
|
|
})
|
|
}
|
|
]
|
|
})
|
|
);
|
|
|
|
```
|
|
|
|
---
|
|
|
|
## ✅ Verification Checklist
|
|
|
|
After applying these changes:
|
|
|
|
1. **Clear Storage:** Unregister old Service Workers and clear Storage in DevTools.
|
|
2. **Install:** Load the app once online. Verify `pages` cache contains `/tasting/new`.
|
|
3. **Test:**
|
|
* Go Offline (Airplane Mode).
|
|
* Reload the page.
|
|
* Navigate to `/tasting/new`.
|
|
* **Expectation:** App loads, UI renders, data comes from Dexie. No "No Internet" dino. |