feat: PWA manifest + service worker for offline and install support

Add full Progressive Web App support to The Nexus:
- manifest.json: Web app manifest with Nexus branding, icons, and PWA config
- sw.js: Service worker with cache-first strategy for local assets and
  stale-while-revalidate for CDN resources (Three.js, fonts)
- offline.html: Styled offline fallback page with auto-reconnect
- icons/: SVG icons (standard + maskable) with crystalline Nexus design
- index.html: Add manifest link, theme colors, Apple PWA meta tags,
  and service worker registration script

Features:
- Works offline after first visit
- Installable to home screen on mobile and desktop
- Graceful degradation when offline
- Auto-refresh when connection restored

Fixes #14
This commit is contained in:
kimi
2026-03-23 23:52:07 -04:00
parent 4c4b77669d
commit e76b3eee89
6 changed files with 640 additions and 0 deletions

View File

@@ -5,14 +5,38 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timmy's Nexus</title>
<meta name="description" content="A sovereign 3D world">
<!-- Open Graph -->
<meta property="og:title" content="Timmy's Nexus">
<meta property="og:description" content="A sovereign 3D world">
<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:type" content="website">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Timmy's Nexus">
<meta name="twitter:description" content="A sovereign 3D world">
<meta name="twitter:image" content="https://example.com/og-image.png">
<!-- PWA: Web App Manifest -->
<link rel="manifest" href="/manifest.json">
<!-- PWA: Theme Color -->
<meta name="theme-color" content="#4af0c0">
<meta name="background-color" content="#0a1628">
<!-- PWA: Apple iOS Support -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="The Nexus">
<link rel="apple-touch-icon" href="/icons/nexus-icon.svg">
<!-- PWA: Microsoft Windows -->
<meta name="msapplication-TileColor" content="#0a1628">
<meta name="msapplication-config" content="none">
<!-- Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ... existing content ... -->
@@ -26,5 +50,52 @@
</div>
<!-- ... existing content ... -->
<!-- Application Script -->
<script src="app.js"></script>
<!-- PWA: Service Worker Registration -->
<script>
(function() {
'use strict';
// Only register service worker in production (not in development with file://)
if ('serviceWorker' in navigator && window.location.protocol === 'https:' || window.location.hostname === 'localhost') {
window.addEventListener('load', function() {
navigator.serviceWorker.register('/sw.js')
.then(function(registration) {
console.log('[Nexus] Service Worker registered:', registration.scope);
// Handle updates
registration.addEventListener('updatefound', function() {
const newWorker = registration.installing;
newWorker.addEventListener('statechange', function() {
if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
// New version available
console.log('[Nexus] New version available, refreshing...');
// Optionally show update notification to user
if (confirm('A new version of The Nexus is available. Refresh to update?')) {
window.location.reload();
}
}
});
});
})
.catch(function(error) {
console.log('[Nexus] Service Worker registration failed:', error);
});
});
// Listen for messages from service worker
navigator.serviceWorker.addEventListener('message', function(event) {
if (event.data && event.data.type === 'OFFLINE_READY') {
console.log('[Nexus] App is ready for offline use');
}
});
} else {
console.log('[Nexus] Service Worker not supported or not in secure context');
}
})();
</script>
</body>
</html>