Implementation of LXD PWA with a dynamic start_url"

- Added Screenshot images to /public/assets/img/ for use in teh manifest variable in index.html. Signed-off-by: Nkeiruka <[email protected]>
canonical · Jun 3, 2024 · bd4065b · bd4065b
1 parent 130bb42
commit bd4065b
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -1,19 +1,80 @@
 <!doctype html>
 
 <html lang="en" dir="ltr">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <title>LXD UI</title>
-    <link rel="shortcut icon" href="/assets/img/favicon-32x32.png" type="image/x-icon">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
 
-    <script>const global = globalThis;</script>
-  </head>
-  <body>
+  <title>LXD UI</title>
+  <link rel="shortcut icon" href="/assets/img/favicon-32x32.png" type="image/x-icon">
+  <link rel="manifest" href="/manifest.json" id="manifest">
 
-    <div id="app"></div>
-    <script type="module" src="/src/index.tsx"></script>
+  <script>const global = globalThis;
+
+  </script>
+</head>
+
+<body>
+
+  <div id="app"></div>
+  <script type="module" src="/src/index.tsx"></script>
+
+</body>
 
-  </body>
 </html>
+
+<script>
+
+  var screenshot = window.location.origin + "/assets/img/";
+
+  const manifestElement = document.getElementById("manifest");
+  const dynamicManifest = JSON.stringify({
+    "short_name": "LXD",
+    "name": "LXD-UI",
+    "icons": [
+      {
+        "src": window.location.origin + "/assets/img/canonical-lxd-512.png",
+        "type": "image/png",
+        "sizes": "512x512"
+      }
+    ],
+    "id": "LXDID",
+    "start_url": window.location.origin,
+    "background_color": "#E95420",
+    "display": "standalone",
+    "scope": "/",
+    "theme_color": "#262626",
+    "shortcuts": [],
+    "description": "LXD provides a unified user experience for managing system containers and virtual machines.",
+    "screenshots": [
+      {
+        "src": screenshot + "LXD-screenshot.png",
+        "type": "image/png",
+        "sizes": "954x953",
+        "form_factor": "wide"
+      },
+      {
+        "src": screenshot + "LXD-screenshot2.png",
+        "type": "image/png",
+        "sizes": "954x953",
+        "form_factor": "wide"
+      },
+      {
+        "src": screenshot + "LXD-screenshot3.png",
+        "type": "image/png",
+        "sizes": "1914x1079",
+      },
+      // {
+      //   "src": screenshot+"LXD-screenshot.png",
+      //   "type": "image/png",
+      //   "sizes": "954x953"
+      // }
+    ]
+  })
+
+  manifestElement?.setAttribute(
+    "href",
+    "data:application/json;charset=utf-8," + encodeURIComponent(dynamicManifest)
+  );
+</script>
diff --git a/public/assets/img/LXD-screenshot.png b/public/assets/img/LXD-screenshot.png
diff --git a/public/assets/img/LXD-screenshot2.png b/public/assets/img/LXD-screenshot2.png
diff --git a/public/assets/img/LXD-screenshot3.png b/public/assets/img/LXD-screenshot3.png
diff --git a/public/assets/img/canonical-lxd-512.png b/public/assets/img/canonical-lxd-512.png