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 <nkeiruka.whenu@canonical.com>
canonical · Jun 4, 2024 · 99e7e00 · 99e7e00
1 parent 130bb42
commit 99e7e00
Show file tree

Hide file tree

Showing 6 changed files with 67 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -1,19 +1,27 @@
 <!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">
+  <script src="manifest.js"></script>
 
-    <div id="app"></div>
-    <script type="module" src="/src/index.tsx"></script>
 
-  </body>
-</html>
+  <script>const global = globalThis;
+
+  </script>
+</head>
+
+<body>
+
+  <div id="app"></div>
+  <script type="module" src="/src/index.tsx"></script>
+
+</body>
+
+</html>
diff --git a/manifest.js b/manifest.js
@@ -0,0 +1,47 @@
+var screenshot = window.location.origin + "/ui/assets/img/";
+
+const manifestElement = document.getElementById("manifest");
+const dynamicManifest = JSON.stringify({
+  short_name: "LXD",
+  name: "LXD-UI",
+  icons: [
+    {
+      src: window.location.origin + "/ui/assets/img/canonical-lxd-512.png",
+      type: "image/png",
+      sizes: "512x512",
+    },
+  ],
+  id: "LXDID",
+  start_url: window.location.origin,
+  background_color: "#E95420",
+  display: "standalone",
+  scope: window.location.origin,
+  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",
+    },
+  ],
+});
+
+manifestElement?.setAttribute(
+  "href",
+  "data:application/json;charset=utf-8," + encodeURIComponent(dynamicManifest),
+);
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