add pwa support, ask mobile users to download app (#643)

docs/guide/architecture.md

@@ -1,10 +1,10 @@
 ---
 tags:
-- architecture
-- frontend
-- backend
-- REST
-- WebSocket
+  - architecture
+  - frontend
+  - backend
+  - REST
+  - WebSocket
 ---
 
 # Software Architecture
@@ -85,6 +85,7 @@ frontend
 | CardSetComponent                     | Card set selection in page "PrepareSession"                                                                                                                                                                                                                    |
 | CopySessionIdPopup                   | Link including a popup with the functionalities: copy code or link to clipboard                                                                                                                                                                                |
 | EstimateTimer                        | Displays the timer and has the logic for the countdown                                                                                                                                                                                                         |
+| DownloadPWAModal                     | Modal to ask mobile users to download the app                                                                                                                                                                                                                  |
 | JiraComponent                        | Component for the "Planning with Jira" tab.                                                                                                                                                                                                                    |
 | JoinPageCard                         | Card for joining a Session in page "JoinPage"                                                                                                                                                                                                                  |
 | LandingPageCard                      | Cards for "New Session"/"Join Session"/"Reconnect to Session" in page "LandingPage"                                                                                                                                                                            |
@@ -143,7 +144,7 @@ backend
 |---------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | WebSocketConfig                 | Configurations (e.g. prefixes, CORS) for Websockets                                                                                                                        |
 | -----------                     |                                                                                                                                                                            |
-| ConfigController                | REST Controller for project configuration                                                                                                                                      |
+| ConfigController                | REST Controller for project configuration                                                                                                                                  |
 | ControllerUtils                 | Helper functions for all controllers                                                                                                                                       |
 | ErrorMessages                   | All error messages which can be thrown in exceptions                                                                                                                       |
 | ProjectManagementController     | REST Controller for project management software (e.g. Jira)                                                                                                                |

frontend/public/manifest.json

@@ -0,0 +1,32 @@
+{
+  "name": "Diveni",
+  "short_name": "Diveni",
+  "theme_color": "#8cc04d",
+  "icons": [
+    {
+      "src": "./img/icons/logo192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "./img/icons/logo512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "./img/icons/logo192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "./img/icons/logo512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#000000"
+}

frontend/src/components/DownloadPWAModal.vue

@@ -0,0 +1,68 @@
+<template>
+  <b-modal
+    v-model="checkIfNotInstalled"
+    class="test"
+    centered
+    title="Download Diveni"
+    @ok="install()"
+    @hide="closeModal()"
+  >
+    {{t('page.landing.install')}}
+  </b-modal>
+</template>
+
+<script lang="ts">
+import {defineComponent, ref} from "vue";
+import {useI18n} from "vue-i18n";
+
+export default defineComponent({
+  name: "DownloadPWAModal",
+  setup() {
+    const deferredPrompt: any = ref();
+    const checkIfNotInstalled = false;
+    window.addEventListener("beforeinstallprompt", (e) => {
+      e.preventDefault();
+      deferredPrompt.value = e;
+    });
+
+    window.addEventListener("appinstalled", () => {
+      deferredPrompt.value = null;
+    });
+    const { t } = useI18n();
+    return {deferredPrompt, checkIfNotInstalled, t};
+  },
+  computed: {
+    isMobile() {
+      return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+        navigator.userAgent
+      );
+    },
+  },
+  created() {
+    const isInStandaloneMode = () =>
+      (window.matchMedia('(display-mode: standalone)').matches) || document.referrer.includes('android-app://');
+    this.checkIfNotInstalled = this.isMobile && !isInStandaloneMode() && !localStorage.getItem('downloadPWA');
+  },
+  methods: {
+    closeModal() {
+      localStorage.setItem('downloadPWA', 'true');
+    },
+    async install() {
+      console.log("Installing...");
+      if (this.deferredPrompt) {
+        this.deferredPrompt.prompt();
+        this.deferredPrompt.userChoice.then((choiceResult: any) => {
+          if (choiceResult.outcome === 'accepted') {
+            console.log('User accepted the Diveni prompt');
+          } else {
+            console.log('User dismissed the Diveni prompt');
+          }
+          this.deferredPrompt = null;
+        });
+      }
+    },
+  },
+});
+</script>
+
+<style scoped lang="scss"></style>

frontend/src/locales/en.json

@@ -150,7 +150,8 @@
             "label": "What's new"
           }
         }
-      }
+      },
+      "install": "Do you want to install Diveni on your Device?"
     },
     "join": {
       "title": "Join the session",

frontend/src/views/LandingPage.vue

@@ -111,6 +111,7 @@
       <h1 class="mt-5">Connectors</h1>
     </b-container>
     <CarouselComponent class="py-5"></CarouselComponent>
+    <DownloadPWAModal/>
   </div>
 </template>
 
@@ -123,9 +124,11 @@ import AnalyticsDataComponent from "../components/AnalyticsDataComponent.vue";
 import { useDiveniStore } from "@/store";
 import { useI18n } from "vue-i18n";
 import CarouselComponent from "@/components/CarouselComponent.vue";
+import DownloadPWAModal from "@/components/DownloadPWAModal.vue";
 export default defineComponent({
   name: "LandingPage",
   components: {
+    DownloadPWAModal,
     LandingPageCard,
     AnalyticsDataComponent,
     CarouselComponent,

frontend/vue.config.js

@@ -1,15 +1,10 @@
 module.exports = {
   pwa: {
-    manifestOptions: {
-      icons: [],
-    },
-    iconPaths: {
-      favicon32: "./favicon.ico",
-      favicon16: "./favicon.ico",
-      appleTouchIcon: "./icons/apple-touch-icon.png",
-      maskIcon: "./favicon.ico",
-      msTileImage: "./favicon.ico",
-    },
+    name: 'Diveni',
+    themeColor: '#8cc04d',
+    msTileColor: '#000000',
+    appleMobileWebAppCapable: 'yes',
+    appleMobileWebAppStatusBarStyle: 'black',
   },
   configureWebpack: {
     optimization: {