feat: add home screen icons for iOS and Android

src/application/routes/app/mod.rs

@@ -73,6 +73,9 @@ pub(super) fn router() -> axum::Router<AppState> {
         .route("/static/favicon-light.svg", get(favicon_light))
         .route("/static/favicon-dark.svg", get(favicon_dark))
         .route("/static/og-image.png", get(og_image))
+        .route("/static/app-icon-192.png", get(app_icon_192))
+        .route("/static/app-icon-512.png", get(app_icon_512))
+        .route("/static/site.webmanifest", get(site_webmanifest))
         .route("/health", get(health))
 }
 
@@ -210,6 +213,36 @@ async fn og_image() -> impl IntoResponse {
     )
 }
 
+async fn app_icon_192() -> impl IntoResponse {
+    (
+        [
+            ("content-type", "image/png"),
+            ("cache-control", "public, max-age=604800"),
+        ],
+        include_bytes!("../../../../static/app-icon-192.png").as_slice(),
+    )
+}
+
+async fn app_icon_512() -> impl IntoResponse {
+    (
+        [
+            ("content-type", "image/png"),
+            ("cache-control", "public, max-age=604800"),
+        ],
+        include_bytes!("../../../../static/app-icon-512.png").as_slice(),
+    )
+}
+
+async fn site_webmanifest() -> impl IntoResponse {
+    (
+        [
+            ("content-type", "application/manifest+json; charset=utf-8"),
+            ("cache-control", "public, max-age=604800"),
+        ],
+        include_str!("../../../../static/site.webmanifest"),
+    )
+}
+
 async fn health() -> impl IntoResponse {
     ([("content-type", "application/json")], r#"{"status":"ok"}"#)
 }

static/site.webmanifest

@@ -0,0 +1,12 @@
+{
+  "name": "Brewlog",
+  "short_name": "Brewlog",
+  "icons": [
+    { "src": "/static/app-icon-192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/static/app-icon-512.png", "sizes": "512x512", "type": "image/png" }
+  ],
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#fafaf9",
+  "theme_color": "#c2410c"
+}

templates/base.html

@@ -35,6 +35,10 @@
       type="image/svg+xml"
       href="/static/favicon-light.svg"
     />
+    <link rel="apple-touch-icon" href="/static/app-icon-192.png" />
+    <link rel="manifest" href="/static/site.webmanifest" />
+    <meta name="apple-mobile-web-app-title" content="Brewlog" />
+    <meta name="theme-color" content="#c2410c" />
     <script>
       (() => {
         const stored = localStorage.getItem("theme");