enable PWA

Dockerfile

@@ -27,6 +27,7 @@ RUN \
  apk add --no-cache --virtual=build-dependencies \
 	g++ \
 	make \
+	postgresql-dev \
 	python3-dev \
 	libffi-dev \
 	ruby-dev &&\

frontend/package.json

@@ -16,6 +16,7 @@
     "chartjs-plugin-crosshair": "^1.1.6",
     "core-js": "^3.9.1",
     "moment": "^2.29.1",
+    "register-service-worker": "^1.7.1",
     "vee-validate": "^3.4.5",
     "vue": "^2.6.12",
     "vue-chartjs": "^3.5.1",
@@ -29,6 +30,7 @@
     "@mdi/font": "^5.9.55",
     "@vue/cli-plugin-babel": "~4.4.0",
     "@vue/cli-plugin-eslint": "~4.4.0",
+    "@vue/cli-plugin-pwa": "^4.5.12",
     "@vue/cli-plugin-router": "~4.4.0",
     "@vue/cli-plugin-vuex": "~4.4.0",
     "@vue/cli-service": "~4.4.0",

frontend/public/index.html

@@ -6,6 +6,7 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>Yacht</title>
+    <link rel="manifest" href="manifest.json" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
   </head>

frontend/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "name": "Yacht",
+  "short_name": "Yacht",
+  "start_url": "index.html",
+  "display": "standalone",
+  "theme_color": "#41B883",
+  "background_color": "#000",
+  "icons": [
+    {
+      "src": "img/logo.60ff54d9.svg",
+      "sizes": "48x48 72x72 96x96 128x128 256x256",
+      "type": "image/svg"
+    }
+  ]
+}

frontend/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

frontend/src/App.vue

@@ -1,8 +1,8 @@
 <template>
   <v-app id="yacht">
     <div v-if="isLoggedIn">
-      <Sidebar v-if="$vuetify.breakpoint.mdAndUp"/>
-      <Bottombar v-if="$vuetify.breakpoint.smAndDown"/>
+      <Sidebar v-if="$vuetify.breakpoint.mdAndUp" />
+      <Bottombar v-if="$vuetify.breakpoint.smAndDown" />
       <Appbar />
       <v-main>
         <!-- Provides the application the proper gutter -->
@@ -37,7 +37,7 @@
 import { mapGetters, mapActions } from "vuex";
 import Sidebar from "./components/nav/Sidebar";
 import Appbar from "./components/nav/Appbar";
-import Bottombar from "./components/nav/Bottombar"
+import Bottombar from "./components/nav/Bottombar";
 import LoginForm from "./components/auth/LoginForm";
 import snackbar from "./components/notifications/snackbar";
 export default {

frontend/src/components/applications/ApplicationDetails.vue

@@ -46,7 +46,7 @@
               <v-card-title>
                 {{ app.name }}
                 <v-spacer />
-                  <v-tooltip bottom>
+                <v-tooltip bottom>
                   <template v-slot:activator="{ on, attrs }">
                     <v-btn
                       size="x-small"
@@ -117,12 +117,12 @@
                       </v-list-item-icon>
                       <v-list-item-title>Edit</v-list-item-title>
                     </v-list-item>
-                    <v-list-item 
+                    <v-list-item
                       :href="`/api/apps/${app.name}/support`"
                       target="_blank"
                       color="primary"
                       download
-                      >
+                    >
                       <v-list-item-icon>
                         <v-icon>mdi-help-circle-outline</v-icon>
                       </v-list-item-icon>

frontend/src/components/nav/Bottombar.vue

@@ -1,28 +1,30 @@
 <template>
-  <v-bottom-navigation
-    app
-    color="secondary"
-  >
+  <v-bottom-navigation app color="secondary">
     <span class="mt-2" v-for="(link, i) in links" :key="i">
       <v-btn active-class="primary--text" v-if="!link.subLinks" :to="link.to">
         <span>{{ link.text }}</span>
         <v-icon> {{ link.icon }}</v-icon>
       </v-btn>
       <v-menu top offset-y v-else>
-          <template v-slot:activator="{on, attrs}">
-              <v-btn active-class="primary--text" v-bind="attrs" v-on="on">
-                  <span>{{ link.text }}</span>
-                  <v-icon>{{ link.icon }}</v-icon>
-              </v-btn>
-          </template>
-          <v-list>
-          <v-list-item v-for="sublink in link.subLinks" :key="sublink.text" :to="sublink.to" exact>
-              <v-list-item-icon>
-                  <v-icon>{{ sublink.icon }}</v-icon>
-              </v-list-item-icon>
-              <v-list-item-title>{{ sublink.text }}</v-list-item-title>
-          </v-list-item>    
-          </v-list>
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn active-class="primary--text" v-bind="attrs" v-on="on">
+            <span>{{ link.text }}</span>
+            <v-icon>{{ link.icon }}</v-icon>
+          </v-btn>
+        </template>
+        <v-list>
+          <v-list-item
+            v-for="sublink in link.subLinks"
+            :key="sublink.text"
+            :to="sublink.to"
+            exact
+          >
+            <v-list-item-icon>
+              <v-icon>{{ sublink.icon }}</v-icon>
+            </v-list-item-icon>
+            <v-list-item-title>{{ sublink.text }}</v-list-item-title>
+          </v-list-item>
+        </v-list>
       </v-menu>
     </span>
   </v-bottom-navigation>
@@ -45,13 +47,13 @@ export default {
           {
             text: "Applications",
             to: "/apps",
-            icon: "mdi-application" 
+            icon: "mdi-application"
           },
           {
             text: "Projects",
             to: "/projects",
             icon: "mdi-book-open"
-           },
+          }
         ]
       },
       {

frontend/src/main.js

@@ -11,6 +11,7 @@ import vuetify from "./plugins/vuetify";
 // Form Validation
 import VueUtils from "./plugins/vueutils";
 import "./vee-validate";
+import "./registerServiceWorker";
 // Animations
 require("animate.css/animate.compat.css");
 

frontend/src/registerServiceWorker.js

@@ -0,0 +1,34 @@
+/* eslint-disable no-console */
+
+import { register } from "register-service-worker";
+
+if (process.env.NODE_ENV === "production") {
+  register(`${process.env.BASE_URL}service-worker.js`, {
+    ready() {
+      console.log(
+        "App is being served from cache by a service worker.\n" +
+          "For more details, visit https://goo.gl/AFskqB"
+      );
+    },
+    registered() {
+      console.log("Service worker has been registered.");
+    },
+    cached() {
+      console.log("Content has been cached for offline use.");
+    },
+    updatefound() {
+      console.log("New content is downloading.");
+    },
+    updated() {
+      console.log("New content is available; please refresh.");
+    },
+    offline() {
+      console.log(
+        "No internet connection found. App is running in offline mode."
+      );
+    },
+    error(error) {
+      console.error("Error during service worker registration:", error);
+    }
+  });
+}