simon/ifb-schulapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add PWA support (manifest, service worker, icons)

Browse Source
This commit is contained in:
Simon
2026-04-22 22:28:17 +02:00
parent d9189d558d
commit 6b54e3c813
14 changed files with 161 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.js
+5
View File
@@ -25,6 +25,7 @@ app.use(helmet({
fontSrc: ["'self'", 'https://fonts.gstatic.com'], fontSrc: ["'self'", 'https://fonts.gstatic.com'],
imgSrc: ["'self'", 'data:'], imgSrc: ["'self'", 'data:'],
connectSrc: ["'self'", 'https://api.open-meteo.com'], connectSrc: ["'self'", 'https://api.open-meteo.com'],
workerSrc: ["'self'"],
frameAncestors: ["'none'"], frameAncestors: ["'none'"],
objectSrc: ["'none'"], objectSrc: ["'none'"],
}, },
@@ -32,6 +33,10 @@ app.use(helmet({
})); }));
app.use(express.json()); app.use(express.json());
app.use(cookieParser()); app.use(cookieParser());
app.get('/sw.js', (req, res, next) => {
res.setHeader('Cache-Control', 'no-cache');
next();
});
app.use(express.static(path.join(__dirname, 'public'))); app.use(express.static(path.join(__dirname, 'public')));
app.use('/api', routes); app.use('/api', routes);
app.use('/api/files', filesRouter); app.use('/api/files', filesRouter);
public/admin.html
+8
View File
@@ -3,6 +3,13 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#2563eb">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Klassenportal">
<title>Klassenportal · Admin</title> <title>Klassenportal · Admin</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -122,6 +129,7 @@ tbody td { padding: 10px 14px; vertical-align: middle; }
.lucide { display: inline-block; vertical-align: -0.125em; flex-shrink: 0; width: 1em; height: 1em; stroke-width: 2; } .lucide { display: inline-block; vertical-align: -0.125em; flex-shrink: 0; width: 1em; height: 1em; stroke-width: 2; }
.tab .lucide { width: 14px; height: 14px; } .tab .lucide { width: 14px; height: 14px; }
</style> </style>
<script>if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js');</script>
</head> </head>
<body> <body>
public/app.html
+8
View File
@@ -3,6 +3,13 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#2563eb">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Klassenportal">
<title>Klassenportal · Dashboard</title> <title>Klassenportal · Dashboard</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -1010,6 +1017,7 @@ footer {
.btn-sm .lucide { width: 13px; height: 13px; } .btn-sm .lucide { width: 13px; height: 13px; }
.sidebar-close .lucide { width: 16px; height: 16px; } .sidebar-close .lucide { width: 16px; height: 16px; }
</style> </style>
<script>if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js');</script>
</head> </head>
<body> <body>
public/datenschutz.html
+8
View File
@@ -3,6 +3,13 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#2563eb">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Klassenportal">
<title>Datenschutzerklärung · Klassenportal</title> <title>Datenschutzerklärung · Klassenportal</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
@@ -30,6 +37,7 @@
th { text-align: left; padding: 8px 12px; background: #f8fafc; font-weight: 600; color: #374151; border-bottom: 1px solid #e2e8f0; } th { text-align: left; padding: 8px 12px; background: #f8fafc; font-weight: 600; color: #374151; border-bottom: 1px solid #e2e8f0; }
td { padding: 8px 12px; color: #334155; border-bottom: 1px solid #f1f5f9; vertical-align: top; } td { padding: 8px 12px; color: #334155; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
</style> </style>
<script>if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js');</script>
</head> </head>
<body> <body>
<header> <header>
public/icons/apple-touch-icon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

public/icons/icon-192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

public/icons/icon-512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 KiB

public/icons/icon-maskable-192.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.3 KiB

public/icons/icon-maskable-512.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

public/index.html
+8
View File
@@ -3,6 +3,13 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#2563eb">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Klassenportal">
<title>Klassenportal · Das Klassen-Cockpit</title> <title>Klassenportal · Das Klassen-Cockpit</title>
<meta name="description" content="Privates Klassenportal für Schüler und Lehrer. Stundenplan, Noten, Hausaufgaben, Klassen-Chat und mehr."> <meta name="description" content="Privates Klassenportal für Schüler und Lehrer. Stundenplan, Noten, Hausaufgaben, Klassen-Chat und mehr.">
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/favicon.svg">
@@ -604,6 +611,7 @@ footer {
.brand-sub { display: none; } .brand-sub { display: none; }
} }
</style> </style>
<script>if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js');</script>
</head> </head>
<body> <body>
public/login.html
+8
View File
@@ -3,6 +3,13 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#2563eb">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Klassenportal">
<title>Klassenportal · Anmelden</title> <title>Klassenportal · Anmelden</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -186,6 +193,7 @@ footer a:hover { color: #2563eb; }
.lucide { display: inline-block; vertical-align: -0.125em; flex-shrink: 0; width: 1em; height: 1em; stroke-width: 2; } .lucide { display: inline-block; vertical-align: -0.125em; flex-shrink: 0; width: 1em; height: 1em; stroke-width: 2; }
.notice .lucide { width: 14px; height: 14px; margin-right: 3px; } .notice .lucide { width: 14px; height: 14px; margin-right: 3px; }
</style> </style>
<script>if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js');</script>
</head> </head>
<body> <body>
public/manifest.json
+38
View File
@@ -0,0 +1,38 @@
{
"name": "Klassenportal",
"short_name": "Klassenportal",
"description": "Privates Klassenportal für Schüler und Lehrer",
"start_url": "/",
"scope": "/",
"display": "standalone",
"orientation": "any",
"theme_color": "#2563eb",
"background_color": "#f4f6f9",
"lang": "de",
"icons": [
{
"src": "/icons/icon-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "any"
},
{
"src": "/icons/icon-maskable-192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/icons/icon-maskable-512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
}
]
}
public/reset-password.html
+8
View File
@@ -3,6 +3,13 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="manifest" href="/manifest.json">
<meta name="theme-color" content="#2563eb">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="Klassenportal">
<title>Klassenportal · Passwort zurücksetzen</title> <title>Klassenportal · Passwort zurücksetzen</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg"> <link rel="icon" type="image/svg+xml" href="/favicon.svg">
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
@@ -64,6 +71,7 @@ h1 { font-size: 18px; font-weight: 700; margin-bottom: 6px; letter-spacing: -.2p
footer { text-align: center; padding: 18px; font-size: 12px; color: #9ca3af; } footer { text-align: center; padding: 18px; font-size: 12px; color: #9ca3af; }
footer a { color: #6b7280; text-decoration: none; } footer a { color: #6b7280; text-decoration: none; }
</style> </style>
<script>if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js');</script>
</head> </head>
<body> <body>
<div class="page"> <div class="page">
public/sw.js
+70
View File
@@ -0,0 +1,70 @@
const CACHE = 'klassenportal-v1';
const PRECACHE = [
'/',
'/login.html',
'/app.html',
'/manifest.json',
'/favicon.svg',
'/icons/icon-192.png',
'/icons/icon-512.png',
'/icons/apple-touch-icon.png',
];
self.addEventListener('install', e => {
e.waitUntil(
caches.open(CACHE)
.then(c => c.addAll(PRECACHE))
.then(() => self.skipWaiting())
);
});
self.addEventListener('activate', e => {
e.waitUntil(
caches.keys()
.then(keys => Promise.all(
keys.filter(k => k !== CACHE).map(k => caches.delete(k))
))
.then(() => self.clients.claim())
);
});
self.addEventListener('fetch', e => {
const url = new URL(e.request.url);
// Only handle same-origin GET requests
if (url.origin !== self.location.origin) return;
if (e.request.method !== 'GET') return;
// API calls: always network, never cache
if (url.pathname.startsWith('/api/')) return;
// Page navigations: network-first, fallback to cache
if (e.request.mode === 'navigate') {
e.respondWith(
fetch(e.request)
.then(r => {
const clone = r.clone();
caches.open(CACHE).then(c => c.put(e.request, clone));
return r;
})
.catch(() =>
caches.match(e.request).then(r => r || caches.match('/login.html'))
)
);
return;
}
// Static assets: cache-first, populate on miss
e.respondWith(
caches.match(e.request).then(cached => {
if (cached) return cached;
return fetch(e.request).then(r => {
if (r.ok) {
const clone = r.clone();
caches.open(CACHE).then(c => c.put(e.request, clone));
}
return r;
});
})
);
});