Add unobstrusive "Install App" button (#29)

Add the "Install App" button to promote A2HS when the PWA
can be added as an app to the homescreen or desktop.

Available on Chrome 70+ for Windows, Android or Chrome OS.
Available through chrome:flags (PWA, PWA link capturing)
on macOS and Linux - expected to land on Chrome 72.

References:
https://developers.google.com/web/progressive-web-apps/desktop
https://developers.google.com/web/fundamentals/app-install-banners/

Signed-off-by: Yannick Schaus <habpanel@schaus.net>

web/src/layouts/default.vue

@@ -65,6 +65,9 @@
  </q-item>
 
  </q-list>
+ <div class="q-ma-md" v-if="deferredPWAPrompt">
+ <q-btn icon="get_app" color="secondary" @click="installPWA()">Install App</q-btn>
+ </div>
  </q-layout-drawer>
 
  <q-page-container>
@@ -80,11 +83,25 @@ export default {
  name: 'LayoutDefault',
  data () {
  return {
- leftDrawerOpen: true
+ leftDrawerOpen: true,
+ deferredPWAPrompt: null
  }
  },
  methods: {
- openURL
+ openURL,
+ installPWA () {
+ if (!this.deferredPWAPrompt) return
+ this.deferredPWAPrompt.prompt()
+ this.deferredPWAPrompt = null
+ }
+ },
+ created () {
+ window.addEventListener('beforeinstallprompt', (e) => {
+ // Prevent Chrome 67 and earlier from automatically showing the prompt
+ // e.preventDefault()
+ // Stash the event so it can be triggered later.
+ this.deferredPWAPrompt = e
+ })
  }
 }
 </script>