82 lines
2.8 KiB
Markdown
82 lines
2.8 KiB
Markdown
## Full Implementation Plan
|
|
|
|
### Phase 1: Service Worker Implementation
|
|
|
|
**Files to create/modify:**
|
|
- `resources/js/service-worker.js` - Main service worker file
|
|
- `resources/js/app.js` - Register service worker
|
|
- `public/sw.js` - Entry point for SW registration (if needed)
|
|
|
|
**Service Worker Features:**
|
|
1. **Precaching static assets** using workbox precacheAndRoute
|
|
2. **Stale-while-revalidate strategy** for pages with cache name `page-stale-while-revalidate-cache`
|
|
3. **Cache-first strategy** for `/RequestData/File/` blobs with cache name `request-data-cache`
|
|
4. **Background sync** with `BackgroundSyncPlugin`
|
|
5. **Message passing** to clients using `clients.postMessage()`
|
|
|
|
### Phase 2: OPFS Implementation
|
|
|
|
**Files to create:**
|
|
- `resources/js/composables/useOPFS.js` - OPFS file management
|
|
- Update `resources/js/composables/useFileBlobCache.js` to use OPFS
|
|
|
|
**OPFS Features:**
|
|
1. **Save blobs to OPFS** using `navigator.storage.getDirectory().getFileHandle()`
|
|
2. **Load blobs from OPFS** for faster access
|
|
3. **Handle hashkey-to-blob mapping**
|
|
4. **Fallback to server fetch** if blob not in OPFS
|
|
|
|
### Phase 3: Pinia + SSE Sync (Replace Web Workers)
|
|
|
|
**Files to create/modify:**
|
|
- `resources/js/stores/syncState.js` - New store for sync state
|
|
- Update `resources/js/composables/useSyncData.js`
|
|
- Implement Server-Sent Events listener
|
|
|
|
**Features:**
|
|
1. **Server-Sent Events (SSE)** for real-time updates
|
|
2. **Pinia state management** for cache status
|
|
3. **Interval-based polling** as fallback if SSE not available
|
|
4. **Cache update notifications** via Pinia
|
|
|
|
### Phase 4: Hashkey-Based URL Caching
|
|
|
|
**Files to create:**
|
|
- `resources/js/composables/useHashKeyCache.js`
|
|
|
|
**Features:**
|
|
1. **URL format support**: `/page--h:HASHKEY` and `/page--e:PAYLOAD`
|
|
2. **Cache lookup by hashkey** in URL
|
|
3. **Hashkey-to-data mapping** with proper cache invalidation
|
|
|
|
### Phase 5: RequestData Pattern Migration
|
|
|
|
**Files to create:**
|
|
- `resources/js/utils/RequestData.js`
|
|
|
|
**Features:**
|
|
1. **Method chaining**: `.url().type().data().success().error().go()`
|
|
2. **Hashkey support** for caching
|
|
3. **`fromVarCache` option** for cache-first behavior
|
|
|
|
### Implementation Steps:
|
|
|
|
1. **Create service worker file** with workbox strategies
|
|
2. **Register SW in app.js**
|
|
3. **Test basic caching** works
|
|
4. **Implement OPFS composable**
|
|
5. **Update file blob cache** to use OPFS
|
|
6. **Add SSE listener** for real-time updates
|
|
7. **Create hashkey URL pattern** support
|
|
8. **Migrate RequestData pattern** to new fetch wrapper
|
|
|
|
### Estimated Timeline:
|
|
- Phase 1 (Service Worker): 2-3 hours
|
|
- Phase 2 (OPFS): 1-2 hours
|
|
- Phase 3 (Pinia + SSE): 2-3 hours
|
|
- Phase 4 (Hashkey URL): 1 hour
|
|
- Phase 5 (RequestData): 1-2 hours
|
|
|
|
Total: ~8-10 hours of implementation time
|
|
|
|
Are you ready to proceed with the implementation? Please toggle to Act mode and I'll start building these features. |