PWA Support

frontend/.gitignore

@@ -25,3 +25,5 @@ logs
 
 # Generated files
 generated/
+# Generated Service Workers
+sw.*

frontend/app.vue

@@ -1,4 +1,5 @@
 <template>
+  <NuxtPwaManifest/>
   <NuxtLayout>
     <NuxtPage />
   </NuxtLayout>

frontend/nuxt.config.ts

@@ -4,6 +4,10 @@ import { GRAPHL_TOKEN_KEY } from "./lib/consts";
 
 
 
+const DESCRIPTION = "CESMII's OEE app provides a glanceable view of a KPI used in many manufacturing environments, and works where ever the OEE Profile is implemented";
+const THEME_COLOR = "#212121";
+const BACKGROUND_COLOR = "#000000";
+
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
@@ -13,7 +17,16 @@ export default defineNuxtConfig({
   app: {
     head: {
       charset: "utf-8",
+      viewport: "width=device-width, initial-scale=1",
       title: "CESMII OEE Dashboard",
+      meta: [
+        { name: "description", content: DESCRIPTION },
+        { name: "theme-color", content: THEME_COLOR },
+      ],
+      link: [
+        { rel: "icon", href: "/favicon.ico", sizes: "48x48" },
+        { rel: "apple-touch-icon", href: "/icon-180-bg-black.png" },
+      ],
     },
   },
   modules: [
@@ -24,7 +37,29 @@ export default defineNuxtConfig({
     },
     "@nuxt/eslint",
     "@nuxtjs/apollo",
+    "@vite-pwa/nuxt",
   ],
+  pwa: {
+    registerType: "autoUpdate",
+    devOptions: {
+      enabled: true,
+    },
+    manifest: {
+      name: "CESMII OEE Dashboard",
+      short_name: "OEEApp",
+      description: DESCRIPTION,
+      theme_color: THEME_COLOR,
+      background_color: BACKGROUND_COLOR,
+
+      icons: [
+        { src: "/icon-512.png", sizes: "512x512", type: "image/png" },
+        { src: "/icon-512.png", sizes: "512x512", type: "image/png", purpose: "any" },
+        { src: "/icon-512-bg-black.png", sizes: "512x512", type: "image/png", purpose: "maskable" },
+        { src: "/icon-192.png", sizes: "192x192", type: "image/png" },
+        { src: "/icon-64.png", sizes: "64x64", type: "image/png" },
+      ],
+    },
+  },
   apollo: {
     autoImports: true,
     clients: {

frontend/package.json

@@ -40,9 +40,11 @@
     "@nuxt/eslint": "^0.3.10",
     "@nuxtjs/apollo": "^5.0.0-alpha.14",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
+    "@vite-pwa/nuxt": "^0.8.0",
     "eslint": "^8.57.0",
     "sass": "^1.77.0",
     "typescript": "^5.4.5",
+    "vite-plugin-pwa": "^0.20.0",
     "vite-plugin-vuetify": "^2.0.3",
     "vuetify": "^3.6.6"
   }

frontend/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /