✨ (install PWA) Add install PWA app

package-lock.json

@@ -1021,6 +1021,15 @@
       "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
       "dev": true
     },
+    "@pwabuilder/pwainstall": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/@pwabuilder/pwainstall/-/pwainstall-0.9.4.tgz",
+      "integrity": "sha512-yJLS4AVMmmvENLlqnaB3d4s+j7MD0k9cmWr9kJuXCBer6b2yVLfDqUlyZjYijJNPxKd6tbbeN9JrecZ8WxKsbg==",
+      "requires": {
+        "infinite-carousel-wc": "^0.4.1",
+        "lit-element": "^2.2.1"
+      }
+    },
     "@soda/friendly-errors-webpack-plugin": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -7511,6 +7520,11 @@
       "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==",
       "dev": true
     },
+    "infinite-carousel-wc": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/infinite-carousel-wc/-/infinite-carousel-wc-0.4.1.tgz",
+      "integrity": "sha512-d0U/zdPXZxMzIFEtMHlQ4iGGwe3BchOi4y5RC3ZMjVW7oXdSOdE0CChTtEBcnjgHvovQXcld31kTFMsMv3emcQ=="
+    },
     "infinity-x": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/infinity-x/-/infinity-x-1.0.2.tgz",
@@ -9490,6 +9504,19 @@
       "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
       "dev": true
     },
+    "lit-element": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-2.2.1.tgz",
+      "integrity": "sha512-ipDcgQ1EpW6Va2Z6dWm79jYdimVepO5GL0eYkZrFvdr0OD/1N260Q9DH+K5HXHFrRoC7dOg+ZpED2XE0TgGdXw==",
+      "requires": {
+        "lit-html": "^1.0.0"
+      }
+    },
+    "lit-html": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-1.1.2.tgz",
+      "integrity": "sha512-FFlUMKHKi+qG1x1iHNZ1hrtc/zHmfYTyrSvs3/wBTvaNtpZjOZGWzU7efGYVpgp6KvWeKF6ql9/KsCq6Z/mEDA=="
+    },
     "load-json-file": {
       "version": "1.1.0",
       "resolved": "http://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",

package.json

@@ -12,6 +12,7 @@
     "@fortawesome/fontawesome-svg-core": "^1.2.25",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/vue-fontawesome": "^0.1.7",
+    "@pwabuilder/pwainstall": "^0.9.4",
     "@xkeshi/vue-qrcode": "^1.0.0",
     "axios": "^0.19.0",
     "bulma": "^0.7.5",

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])
 }