From d676d5d2ddf4bc7d1d94b46cd07db31ceb61c664 Mon Sep 17 00:00:00 2001 From: Kenneth Reitz Date: Sun, 30 Nov 2025 01:47:10 -0500 Subject: [PATCH] Add status card to /offline page MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Shows clear status with icon: ready (✅), warning (⚠️), or error (🚫) - Displays helpful troubleshooting tips when service worker fails - Instructions for disabling content blockers, checking browser settings - Shows page count when cached - Color-coded cards: green for OK, yellow for warning, red for error 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- kjvstudy_org/templates/offline.html | 115 +++++++++++++++++++++++++++- 1 file changed, 114 insertions(+), 1 deletion(-) diff --git a/kjvstudy_org/templates/offline.html b/kjvstudy_org/templates/offline.html index e3661dc..9d99154 100644 --- a/kjvstudy_org/templates/offline.html +++ b/kjvstudy_org/templates/offline.html @@ -230,6 +230,63 @@ color: var(--success-color); font-weight: 600; } + .status-card { + display: flex; + align-items: flex-start; + gap: 1rem; + padding: 1.25rem; + border-radius: 8px; + margin-bottom: 1.5rem; + border: 1px solid var(--border-color); + background: var(--bg-color); + } + .status-card.status-ok { + border-color: var(--success-color); + background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); + } + .status-card.status-error { + border-color: var(--error-color); + background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); + } + .status-card.status-warning { + border-color: #f59e0b; + background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); + } + [data-theme="dark"] .status-card.status-ok { + background: linear-gradient(135deg, #14532d 0%, #166534 100%); + } + [data-theme="dark"] .status-card.status-error { + background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%); + } + [data-theme="dark"] .status-card.status-warning { + background: linear-gradient(135deg, #78350f 0%, #92400e 100%); + } + .status-icon { + font-size: 2rem; + line-height: 1; + } + .status-content { + flex: 1; + } + .status-title { + font-weight: 600; + font-size: 1.1rem; + margin-bottom: 0.25rem; + } + .status-detail { + color: var(--text-secondary); + font-size: 0.9rem; + line-height: 1.5; + } + .status-detail code { + background: rgba(0,0,0,0.1); + padding: 0.1rem 0.3rem; + border-radius: 3px; + font-size: 0.85em; + } + [data-theme="dark"] .status-detail code { + background: rgba(255,255,255,0.1); + } .quick-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); @@ -279,6 +336,14 @@

Offline Mode checking...

KJV Study - Available without internet

+
+
⏳
+
+
Checking service worker...
+
Please wait
+
+
+

Enable Offline Access

Download the entire site for offline use: all Bible chapters, individual verse pages with commentary, stories, study guides, and resources. The sitemap will be parsed to find all available pages.

@@ -362,6 +427,19 @@ const cachedLinks = document.getElementById('cached-links'); const cachedCount = document.getElementById('cached-count'); + // Status card elements + const statusCard = document.getElementById('status-card'); + const statusIcon = document.getElementById('status-icon'); + const statusTitle = document.getElementById('status-title'); + const statusDetail = document.getElementById('status-detail'); + + function updateStatusCard(type, icon, title, detail) { + statusCard.className = 'status-card status-' + type; + statusIcon.textContent = icon; + statusTitle.textContent = title; + statusDetail.innerHTML = detail; + } + // Update connection status function updateConnectionStatus() { if (navigator.onLine) { @@ -381,21 +459,56 @@ if ('serviceWorker' in navigator) { try { const registration = await navigator.serviceWorker.getRegistration(); - if (registration) { + if (registration && registration.active) { const state = registration.active ? 'Active' : registration.waiting ? 'Waiting' : registration.installing ? 'Installing' : 'Unknown'; swStatus.innerHTML = '✓ Registered (' + state + ')'; swStatus.innerHTML += '
Scope: ' + registration.scope; + + // Check how many pages are cached + const cacheNames = await caches.keys(); + let totalCached = 0; + for (const cacheName of cacheNames) { + const cache = await caches.open(cacheName); + const keys = await cache.keys(); + totalCached += keys.filter(req => !new URL(req.url).pathname.startsWith('/static/')).length; + } + + if (totalCached > 1000) { + updateStatusCard('ok', '✅', 'Ready for offline use', + totalCached.toLocaleString() + ' pages cached. You can browse the entire site without internet.'); + } else if (totalCached > 0) { + updateStatusCard('warning', '⚠️', 'Partially cached', + totalCached.toLocaleString() + ' pages cached. Click "Download for Offline Use" below to cache the entire site.'); + } else { + updateStatusCard('warning', '📥', 'Service worker ready', + 'Click "Download for Offline Use" below to cache the entire site for offline access.'); + } + } else if (registration) { + swStatus.innerHTML = '✓ Registered (Installing)'; + updateStatusCard('warning', '⏳', 'Service worker installing...', + 'Please wait a moment and refresh the page.'); } else { swStatus.innerHTML = '✗ Not registered'; swStatus.innerHTML += '
Try refreshing the page or check if content blockers are blocking it.'; + updateStatusCard('error', '🚫', 'Service worker not registered', + 'This could be caused by a content blocker or privacy extension. ' + + 'Try:
• Disabling ad blockers for this site
' + + '• Checking browser privacy settings
' + + '• Using a different browser
' + + '• Making sure you\'re on https:// or localhost'); } } catch (err) { swStatus.innerHTML = '✗ Error: ' + err.message + ''; + updateStatusCard('error', '❌', 'Error checking service worker', + 'Error: ' + err.message + '
Try refreshing the page.'); } } else { swStatus.innerHTML = '✗ Not supported in this browser'; + updateStatusCard('error', '🌐', 'Service workers not supported', + 'Your browser doesn\'t support service workers. ' + + 'Try using a modern browser like Chrome, Firefox, Safari, or Edge.'); } }