github/TREK
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add PWA support for iOS home screen install

Browse Source 
- Web app manifest (standalone display, NOMAD branding, icons)
- Service worker with Workbox caching (map tiles, API, uploads, CDN)
- SVG app icon + PNG generation script via sharp
- Apple meta tags (web-app-capable, black-translucent status bar)
- Dynamic theme-color for dark/light mode
- Safe area insets for notch devices
This commit is contained in:
Maurice
2026-03-21 22:21:23 +01:00
parent 544ac796d5
commit 557de4cd5a
9 changed files with 4749 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/App.jsx
View File

@@ -78,13 +78,17 @@ export default function App() {
}
}, [isAuthenticated])
// Apply dark mode class to <html>
// Apply dark mode class to <html> + update PWA theme-color
useEffect(() => {
if (settings.dark_mode) {
document.documentElement.classList.add('dark')
} else {
document.documentElement.classList.remove('dark')
}
const meta = document.querySelector('meta[name="theme-color"]')
if (meta) {
meta.setAttribute('content', settings.dark_mode ? '#121215' : '#ffffff')
}
}, [settings.dark_mode])
return (

12
client/src/index.css
View File

@@ -3,7 +3,17 @@
@tailwind utilities;
html { height: 100%; overflow: hidden; }
body { height: 100%; overflow: auto; overscroll-behavior: none; -webkit-overflow-scrolling: touch; }
body {
height: 100%;
overflow: auto;
overscroll-behavior: none;
-webkit-overflow-scrolling: touch;
/* PWA safe areas (notch, home indicator) */
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
.atlas-tooltip {
background: rgba(10, 10, 20, 0.6) !important;