robin/Dramlog-Prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: enable SW on localhost and optimize pre-cache sequence for faster feedback

Browse Source
This commit is contained in:
robin
2025-12-21 00:18:38 +01:00
parent 716afce2ae
commit f0cb661d91
3 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
public/sw.js
View File

@@ -1,4 +1,4 @@
const CACHE_NAME = 'whisky-vault-v10-bunker'; // Professional Bunker v10 const CACHE_NAME = 'whisky-vault-v11-offline'; // Professional Offline-Modus v11
// CONFIG: Core Pages & Static Assets // CONFIG: Core Pages & Static Assets
const CORE_PAGES = [ const CORE_PAGES = [
@@ -23,13 +23,13 @@ async function broadcast(message) {
} }
// Helper: Fetch with Timeout & AbortController // Helper: Fetch with Timeout & AbortController
async function fetchWithTimeout(url, timeoutMs = 15000) { async function fetchWithTimeout(url, timeoutMs = 25000) {
const controller = new AbortController(); const controller = new AbortController();
const id = setTimeout(() => controller.abort(), timeoutMs); const id = setTimeout(() => controller.abort(), timeoutMs);
try { try {
const response = await fetch(url, { const response = await fetch(url, {
signal: controller.signal, signal: controller.signal,
cache: 'no-store' // Ensure we get fresh bits for the bunker cache: 'no-store' // Ensure we get fresh bits
}); });
clearTimeout(id); clearTimeout(id);
return response; return response;
@@ -39,15 +39,16 @@ async function fetchWithTimeout(url, timeoutMs = 15000) {
} }
} }
// 🏗️ INSTALL: Build the Bunker // 🏗️ INSTALL: Build the Offline-Modus
self.addEventListener('install', (event) => { self.addEventListener('install', (event) => {
// Immediate takeover // Immediate takeover
self.skipWaiting(); self.skipWaiting();
event.waitUntil( event.waitUntil(
caches.open(CACHE_NAME).then(async (cache) => { caches.open(CACHE_NAME).then(async (cache) => {
console.log('🏗️ PWA: Building Bunker v10...'); console.log('🏗️ PWA: Building Offline-Modus v11...');
const items = [...CORE_PAGES, ...STATIC_ASSETS]; // Load small static assets first for instant progress bar feedback
const items = [...STATIC_ASSETS, ...CORE_PAGES];
const total = items.length; const total = items.length;
let loaded = 0; let loaded = 0;
@@ -94,9 +95,9 @@ self.addEventListener('activate', (event) => {
// 💬 MESSAGE: Handle status checks // 💬 MESSAGE: Handle status checks
self.addEventListener('message', (event) => { self.addEventListener('message', (event) => {
if (event.data?.type === 'CHECK_BUNKER_STATUS') { if (event.data?.type === 'CHECK_OFFLINE_STATUS') {
event.source.postMessage({ event.source.postMessage({
type: 'BUNKER_STATUS', type: 'OFFLINE_STATUS',
isReady: true, isReady: true,
version: CACHE_NAME version: CACHE_NAME
}); });

6
src/components/OfflineIndicator.tsx
View File

@@ -20,7 +20,7 @@ export default function OfflineIndicator() {
if (event.data?.type === 'PRECACHE_PROGRESS') { if (event.data?.type === 'PRECACHE_PROGRESS') {
setProgress(event.data.progress); setProgress(event.data.progress);
} }
if (event.data?.type === 'PRECACHE_COMPLETE' || event.data?.type === 'BUNKER_STATUS') { if (event.data?.type === 'PRECACHE_COMPLETE' || event.data?.type === 'OFFLINE_STATUS') {
setIsReady(true); setIsReady(true);
localStorage.setItem('whisky_bunker_ready', 'true'); localStorage.setItem('whisky_bunker_ready', 'true');
} }
@@ -32,7 +32,7 @@ export default function OfflineIndicator() {
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
navigator.serviceWorker.addEventListener('message', handleMessage); navigator.serviceWorker.addEventListener('message', handleMessage);
if (navigator.serviceWorker.controller) { if (navigator.serviceWorker.controller) {
navigator.serviceWorker.controller.postMessage({ type: 'CHECK_BUNKER_STATUS' }); navigator.serviceWorker.controller.postMessage({ type: 'CHECK_OFFLINE_STATUS' });
} }
} }
@@ -72,7 +72,7 @@ export default function OfflineIndicator() {
<div className="flex items-center gap-1.5 px-2.5 py-1 bg-amber-600/10 border border-amber-600/20 rounded-full"> <div className="flex items-center gap-1.5 px-2.5 py-1 bg-amber-600/10 border border-amber-600/20 rounded-full">
<Loader2 size={10} className="text-amber-600 animate-spin" /> <Loader2 size={10} className="text-amber-600 animate-spin" />
<span className="text-[9px] font-black uppercase tracking-widest text-amber-600"> <span className="text-[9px] font-black uppercase tracking-widest text-amber-600">
{progress > 0 ? `Lade Offline-Daten... ${progress}%` : 'Initialisiere...'} {progress > 0 ? `Lade Offline-Daten... ${progress}%` : 'Offline-Modus wird vorbereitet...'}
</span> </span>
</div> </div>
); );

2
src/components/PWARegistration.tsx
View File

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
export default function PWARegistration() { export default function PWARegistration() {
useEffect(() => { useEffect(() => {
if ('serviceWorker' in navigator && window.location.hostname !== 'localhost') { if ('serviceWorker' in navigator) {
window.addEventListener('load', () => { window.addEventListener('load', () => {
navigator.serviceWorker navigator.serviceWorker
.register('/sw.js') .register('/sw.js')