feat: add PWA support - manifest, service worker, offline page, icons
This commit is contained in:
BIN
public/assets/img/icon-192.png
Normal file
BIN
public/assets/img/icon-192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
BIN
public/assets/img/icon-512.png
Normal file
BIN
public/assets/img/icon-512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
26
public/manifest.json
Normal file
26
public/manifest.json
Normal file
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "ServerManager",
|
||||
"short_name": "SM",
|
||||
"description": "Linux Server Management Platform",
|
||||
"start_url": "/dashboard",
|
||||
"display": "standalone",
|
||||
"background_color": "#0f1117",
|
||||
"theme_color": "#6366f1",
|
||||
"categories": ["productivity", "utilities"],
|
||||
"lang": "en",
|
||||
"orientation": "any",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/assets/img/icon-192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
},
|
||||
{
|
||||
"src": "/assets/img/icon-512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "any maskable"
|
||||
}
|
||||
]
|
||||
}
|
||||
71
public/sw.js
Normal file
71
public/sw.js
Normal file
@@ -0,0 +1,71 @@
|
||||
const CACHE = 'sm-v1';
|
||||
const STATIC_ASSETS = [
|
||||
'/assets/css/style.css',
|
||||
'/assets/js/app.js',
|
||||
'/assets/js/main.js',
|
||||
'/assets/img/server.svg',
|
||||
'/assets/img/icon-192.png',
|
||||
'/assets/img/icon-512.png',
|
||||
'/manifest.json',
|
||||
'/offline',
|
||||
];
|
||||
|
||||
self.addEventListener('install', function(e) {
|
||||
e.waitUntil(
|
||||
caches.open(CACHE).then(function(cache) {
|
||||
return cache.addAll(STATIC_ASSETS);
|
||||
}).then(function() {
|
||||
return self.skipWaiting();
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('activate', function(e) {
|
||||
e.waitUntil(
|
||||
caches.keys().then(function(keys) {
|
||||
return Promise.all(
|
||||
keys.filter(function(k) { return k !== CACHE; }).map(function(k) { return caches.delete(k); })
|
||||
);
|
||||
}).then(function() {
|
||||
return self.clients.claim();
|
||||
})
|
||||
);
|
||||
});
|
||||
|
||||
self.addEventListener('fetch', function(e) {
|
||||
var url = new URL(e.request.url);
|
||||
|
||||
if (url.pathname.startsWith('/api/')) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (
|
||||
url.pathname.startsWith('/assets/') ||
|
||||
url.pathname === '/manifest.json'
|
||||
) {
|
||||
e.respondWith(
|
||||
caches.open(CACHE).then(function(cache) {
|
||||
return cache.match(e.request).then(function(cached) {
|
||||
var fetchPromise = fetch(e.request).then(function(response) {
|
||||
cache.put(e.request, response.clone());
|
||||
return response;
|
||||
});
|
||||
return cached || fetchPromise;
|
||||
});
|
||||
})
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
e.respondWith(
|
||||
fetch(e.request).catch(function() {
|
||||
return caches.match(e.request).then(function(cached) {
|
||||
if (cached) return cached;
|
||||
if (e.request.mode === 'navigate') {
|
||||
return caches.match('/offline');
|
||||
}
|
||||
return new Response('Offline', { status: 503 });
|
||||
});
|
||||
})
|
||||
);
|
||||
});
|
||||
@@ -27,6 +27,11 @@ $router->get('/notifications', [DashboardController::class, 'notifications'], [A
|
||||
$router->get('/privacy', [DashboardController::class, 'privacy']);
|
||||
$router->get('/terms', [DashboardController::class, 'terms']);
|
||||
|
||||
$router->get('/offline', function () {
|
||||
$view = \ServerManager\Core\App::getInstance()->getView();
|
||||
$view->display('errors.offline', ['title' => 'Offline']);
|
||||
});
|
||||
|
||||
$router->get('/login', [AuthController::class, 'loginForm']);
|
||||
$router->post('/login', [AuthController::class, 'login'], [CSRFMiddleware::class, RateLimitMiddleware::class]);
|
||||
$router->get('/register', [AuthController::class, 'registerForm']);
|
||||
|
||||
21
views/errors/offline.php
Normal file
21
views/errors/offline.php
Normal file
@@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Offline — ServerManager</title>
|
||||
<link rel="stylesheet" href="/assets/css/style.css?v=<?= asset_version() ?>">
|
||||
</head>
|
||||
<body class="error-page">
|
||||
<div class="error-card">
|
||||
<div class="error-code" style="font-size:4rem">📡</div>
|
||||
<h1 class="error-message">You're Offline</h1>
|
||||
<p class="error-description">ServerManager needs an internet connection to manage your servers.<br>Check your connection and try again.</p>
|
||||
<div class="error-actions">
|
||||
<a href="/dashboard" class="btn btn-primary">
|
||||
<i class="fas fa-sync"></i> Retry
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -5,6 +5,8 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title><?= htmlspecialchars($title ?? 'ServerManager') ?></title>
|
||||
<link rel="icon" type="image/svg+xml" href="/assets/img/server.svg">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<meta name="theme-color" content="#0f1117">
|
||||
<link rel="stylesheet" href="/assets/css/style.css?v=<?= asset_version() ?>">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
</head>
|
||||
|
||||
@@ -21,6 +21,11 @@ if (!isset($user) || $user === null) {
|
||||
<meta name="csrf-token" content="<?= $this->csrfToken() ?>">
|
||||
<link rel="stylesheet" href="/assets/css/style.css?v=<?= asset_version() ?>">
|
||||
<link rel="icon" type="image/svg+xml" href="/assets/img/server.svg">
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<meta name="theme-color" content="#0f1117">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<link rel="apple-touch-icon" href="/assets/img/icon-192.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700&display=swap" rel="stylesheet">
|
||||
@@ -225,5 +230,10 @@ if (!isset($user) || $user === null) {
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
<script src="/assets/js/main.js?v=<?= asset_version() ?>"></script>
|
||||
<script>
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.register('/sw.js');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user