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 5, 2024 · 0e5e934 · 0e5e934
1 parent 5198029
commit 0e5e934
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -7,7 +7,8 @@
 
     <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="/ui/assets/js/manifest.js"></script>
     <script>const global = globalThis;</script>
   </head>
   <body>

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
diff --git a/public/assets/js/manifest.js b/public/assets/js/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 " + window.location.origin,
+  name: "LXD-UI - " + window.location.origin,
+  icons: [
+    {
+      src: window.location.origin + "/ui/assets/img/canonical-lxd-512.png",
+      type: "image/png",
+      sizes: "512x512",
+    },
+  ],
+  id: "LXDID-"  + window.location.origin,
+  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: "1920x1075",
+    },
+  ],
+});
+
+manifestElement?.setAttribute(
+  "href",
+  "data:application/json;charset=utf-8," + encodeURIComponent(dynamicManifest),
+);