No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    How to add Icon / bookmark to mobile home screen ?

    Help
    2
    4
    416
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • prashant
      prashant last edited by

      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

      1 Reply Last reply Reply Quote 0
      • dobbel
        dobbel last edited by dobbel

        1. 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)

        2. 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.

        3. If you want control over the ‘add to home screen icon’ you need a PWA not SPA ( pretty sure that’s true)

        1 Reply Last reply Reply Quote 0
        • prashant
          prashant last edited by 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.

          1 Reply Last reply Reply Quote 0
          • dobbel
            dobbel last edited by 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

            1 Reply Last reply Reply Quote 0
            • First post
              Last post