How to add Icon / bookmark to mobile home screen ?

prashant

I am new to Quasar I want to display website to prompt to create home screen icon. Let me know the step by step I watch Danny video but its more in to caching and PWA. can any body help me please I have few question in my mind.

01 Do I need to install any plugin / extension for it?
02 Does it work with dev mode ?
03 My website is SPA do I need to change any mode ?

I followed following steps but didn’t work out let me know what is wrong. Beside I can’t find step by step guide for it. So I am writing a detail mail for it.
File : quasar.config.js

ssr: {
      pwa: false
    },

    // https://quasar.dev/quasar-cli/developing-pwa/configuring-pwa
    pwa: {
      workboxPluginMode: 'InjectManifest', //
      workboxOptions: {}, // only for NON InjectManifest
      manifest: {
        name: 'bpp',
        short_name: 'bpp',
        description: 'Business Plus Plus Online Trading Portal',
        display: 'standalone',
        orientation: 'portrait',
        background_color: '#ffffff',
        theme_color: '#4B0082',
        icons: [
          {
            src: 'statics/icons/icon-128x128.png',
            sizes: '128x128',
            type: 'image/png'
          },

File : layout.vue

<q-footer elevated>
      <q-toolbar>
        <q-toolbar-title>Footer</q-toolbar-title>
        <q-btn @click="installApp" icon="menu" aria-label="Install" />
      </q-toolbar>
    </q-footer>
    
<script>
var defferedPrompt;
export default {
data() {
    return {
      show: false,
      ShowAppInstallBanner: false
    };
  },
  methods : {
  installApp() {
      this.ShowAppInstallBanner = false;
      defferedPrompt.prompt();
      //Wait for the use to respond prompt
      defferedPrompt.userChoice.then((choiceResult) => {
        if (choiceResult.outcome === 'accepted') {
          this.neverShowAppInstallBanner();
        }
      });
    },
  },
  mounted() {
    let neverShowAppInstallBanner = this.$q.localStorage.getItem(
      'neverShowAppInstallBanner'
    );

    // if (!neverShowAppInstallBanner || neverShowAppInstallBanner == null) {
    window.addEventListener('beforeinstallprompt', (e) => {
      e.preventDefault();
      //Stash the event so it can be trigger later
      defferedPrompt = e;
      //deferredPrompt.prompt();
      console.log('inside ', defferedPrompt);
    });
    this.neverShowAppInstallBanner = true;
    // }
  }

Icon generated using icon genie and also verified it.
Execute using following code.
quasar build --mode pwa

dobbel

You don’t need icon genie the home screen icon in PWA’s
The icon that will be used for the ‘add to home screen’ is configured in the pwa.manifest.icons in the quasar.conf file ( the one in your first code sample)
PWA’s prompt to install to home screen does not work in dev mode. You’ll need to deploy it to a server with an valid domain and ssl.
If you want control over the ‘add to home screen icon’ you need a PWA not SPA ( pretty sure that’s true)

prashant

Yes I deployed on server with https & PWA enabled still get didn’t worked.
Need to add this to my list SSL is also required.

dobbel

you can check with lightbox if you have a valid pwa ( it’s under audit tab in chrome dev tools).

Also for the pwa’s ‘add to home screen functionaliy’ this could be useful:

https://github.com/Bartozzz/vue-pwa-install