Home Screen Installation

MainLayout-script.vue

 <template>
 <q-footer elevated reveal class="bg-grey-8" bordered>
      <div class="constrain">
        <q-banner
          inline-actions
          dense
          class="bg-grey-8 text-white"
          v-if="showInsatllbanner"
        >
          <b>Install Blogify? </b>
          <template v-slot:avatar>
            <q-avatar
              color="grey-9"
              text-color="white"
              icon="join_left"
              font-size="22px"
            ></q-avatar>
          </template>
          <template v-slot:action>
            <q-btn flat label="Yes" dense class="q-px-sm" @click="installApp" />
            <q-btn
              flat
              label="Later"
              dense
              class="q-px-sm"
              @click="showInsatllbanner = false"
            />
            <q-btn
              flat
              label="Never"
              dense
              class="q-px-sm"
              @click="neverShowInstallAppBanner"
            />
          </template>
        </q-banner>
      </div>
    </q-footer>
</template>

MainLayout.vue

<script setup>
import { useQuasar } from "quasar";

const showInsatllbanner = ref(false);
const $q = useQuasar();
let deferredPrompt;

onMounted(() => {
  let neverShowInstallBanner = $q.localStorage.getItem(
    "neverShowInstallBanner"
  );
  if (!neverShowInstallBanner) {
    window.addEventListener("beforeinstallprompt", (e) => {
      e.preventDefault();
      deferredPrompt = e;
      showInsatllbanner.value = true;
      setTimeout(() => {
        showInsatllbanner.value = true;
      }, 3000);
    });
  }
});

const installApp = () => {
  // Hide the app provided install promotion
  showInsatllbanner.value = false;

  // Show the install prompt
  deferredPrompt.prompt();
  // Wait for the user to respond to the prompt
  deferredPrompt.userChoice.then((choiceResult) => {
    if (choiceResult.outcome === "accepted") {
      neverShowAppInstallBanner();
    }
  });
};

const neverShowInstallAppBanner = () => {
  showInsatllbanner.value = false;
  $q.localStorage.set("neverShowInstallBanner", true);
};

</script>