forked from Timmy_Foundation/the-nexus
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:
71
index.html
71
index.html
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user