✨ (install PWA) Add install PWA app

src/App.vue

@@ -42,6 +42,7 @@
         @click="hideMenu"
       >
         <div class="navbar-end">
+          <install-app />
           <router-link
             class="navbar-item"
             :to="{ name: 'about' }"
@@ -73,13 +74,15 @@ import { Action, Getter } from 'vuex-class'
 import IUser from '@/models/IUser'
 import { COFFEE_LINK } from '@/utils/constants'
 import OnlineView from '@/components/OnlineView.vue'
+import InstallApp from './components/InstallApp.vue'
 
 @Component({
   directives: {
     ClickOutside
   },
   components: {
-    'online-view': OnlineView
+    'online-view': OnlineView,
+    'install-app': InstallApp
   }
 })
 export default class App extends Vue {

src/components/InstallApp.vue

@@ -0,0 +1,29 @@
+<template>
+  <span class="install-app" v-if="showInstall">
+    <a @click="prompt" class="navbar-item">installer</a>
+    <pwa-install></pwa-install>
+  </span>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import accountService from '@/services/AccountService'
+
+@Component
+export default class InstallApp extends Vue {
+  private showInstall: boolean = false
+  public mounted(): void {
+    window.addEventListener('beforeinstallprompt', async () => {
+      const accounts = await accountService.getAll(true)
+      this.showInstall = accounts.length > 0
+    })
+  }
+
+  public prompt(): void {
+    const pwaInstall = document.querySelector('pwa-install') as any
+    if (pwaInstall) {
+      pwaInstall.openPrompt()
+    }
+  }
+}
+</script>

src/main.ts

@@ -9,11 +9,14 @@ import './registerServiceWorker'
 import filters from './utils/filters'
 import './utils/icons'
 import messages from './messages'
+import '@pwabuilder/pwainstall'
 
 Vue.use(VueI18n)
 
 Vue.config.productionTip = false
 
+Vue.config.ignoredElements = ['pwa-install']
+
 for (const filter of Object.keys(filters)) {
   Vue.filter(filter, filters[filter])
 }