feat(pwa): make dashboard installable as a progressive web app
All checks were successful
CI / Clippy (push) Successful in 2m24s
CI / Security Audit (push) Has been skipped
CI / Tests (push) Has been skipped
CI / Format (pull_request) Successful in 2s
CI / Format (push) Successful in 3s
CI / Clippy (pull_request) Successful in 2m19s
CI / Security Audit (pull_request) Has been skipped
CI / Tests (pull_request) Has been skipped
CI / Deploy (push) Has been skipped
CI / Deploy (pull_request) Has been skipped

Add web manifest, service worker with cache-first static assets and
network-first navigation, and register from the App component head.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
2026-02-19 20:05:23 +01:00
parent cbb664c7d9
commit 20b3279bb5
3 changed files with 104 additions and 0 deletions

View File

@@ -52,6 +52,7 @@ pub enum Route {
const FAVICON: Asset = asset!("/assets/favicon.ico");
const MAIN_CSS: Asset = asset!("/assets/main.css");
const TAILWIND_CSS: Asset = asset!("/assets/tailwind.css");
const MANIFEST: Asset = asset!("/assets/manifest.json");
/// Google Fonts URL for Inter (body) and Space Grotesk (headings).
const GOOGLE_FONTS: &str = "https://fonts.googleapis.com/css2?\
@@ -64,6 +65,14 @@ const GOOGLE_FONTS: &str = "https://fonts.googleapis.com/css2?\
pub fn App() -> Element {
rsx! {
document::Link { rel: "icon", href: FAVICON }
document::Link { rel: "manifest", href: MANIFEST }
document::Meta { name: "theme-color", content: "#4B3FE0" }
document::Meta { name: "apple-mobile-web-app-capable", content: "yes" }
document::Meta {
name: "apple-mobile-web-app-status-bar-style",
content: "black-translucent",
}
document::Link { rel: "apple-touch-icon", href: FAVICON }
document::Link { rel: "preconnect", href: "https://fonts.googleapis.com" }
document::Link {
rel: "preconnect",
@@ -73,6 +82,17 @@ pub fn App() -> Element {
document::Link { rel: "stylesheet", href: GOOGLE_FONTS }
document::Link { rel: "stylesheet", href: TAILWIND_CSS }
document::Link { rel: "stylesheet", href: MAIN_CSS }
// Register PWA service worker
document::Script {
r#"
if ('serviceWorker' in navigator) {{
navigator.serviceWorker.register('/assets/sw.js')
.catch(function(e) {{ console.warn('SW registration failed:', e); }});
}}
"#
}
div { "data-theme": "certifai-dark", Router::<Route> {} }
}
}