forked from Timmy_Foundation/the-nexus
e76b3eee89
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
102 lines
3.9 KiB
HTML
102 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<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 ... -->
|
|
|
|
<!-- Top Right: Audio Toggle -->
|
|
<div id="audio-control" class="hud-controls" style="position: absolute; top: 8px; right: 8px;">
|
|
<button id="audio-toggle" class="chat-toggle-btn" aria-label="Toggle ambient sound" style="background-color: var(--color-primary); color: var(--color-bg); padding: 4px 8px; border-radius: 4px; font-size: 12px; cursor: pointer;">
|
|
🔊
|
|
</button>
|
|
<audio id="ambient-sound" src="ambient.mp3" loop></audio>
|
|
</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>
|