Trying to implement Vue PWA Install

zeppelinexpress

All I want is have a button to call pwa installer on browsers, but how I am new using quasar/vue, so I’m having some difficulty.
https://github.com/Bartozzz/vue-pwa-install <- here is clear documentation… but I don’t know how I do in quasar, what is this line deferredPrompt: BeforeInstallPromptEvent | void;

I need a button <q-btn @click=“install()”> Install pwa </q-btn>
and a method install() like the documentation

dobbel

@zeppelinexpress

installation instructions( use yarn for Quasar local dependencies, use npm for global libraries, for now use node v12.x):

yarn add vue-pwa-install

then read the Quasar doc about boot files.

https://quasar.dev/quasar-cli/boot-files#When-to-use-boot-files

create a boot file to register the pwa install component:

// src/boot/vuePwaInstall.js
import VuePwaInstallPlugin from "vue-pwa-install";
Vue.use(VuePwaInstallPlugin);

add the boot file to quasar.conf in the boot section:

// quasar.conf.js
boot: [
       'vuePwaInstall'
    ],

Now you can use the pwa install component inside a Quasar app. I would use this code inside a Quasar page/component to get going.

https://github.com/Bartozzz/vue-pwa-install#inside-a-component

Tip 1: read the entire Quasar doc at least once.

Tip 2: Also this is semi-advanced quasar/pwa/web-api stuff. Not an ideal starting point for new Vue/Quasar devs.

Tip 3: Here’s a Quasar Pwa Udemy course that will help a lot when creating a pwa app in Quasar:
https://www.udemy.com/course/pwa-with-vuejs-quasar-firebase/

zeppelinexpress

thanks @dobbel

zeppelinexpress

@dobbel
I tried to copy from docs, but this line:
deferredPrompt: BeforeInstallPromptEvent | void;
and this line:
this.$on(“canInstall”, (event: BeforeInstallPromptEvent) => {
shows syntax error…
where I paste “deferredPrompt: BeforeInstallPromptEvent | void;”?

dobbel

@zeppelinexpress

It’s a typescript example. Convert it to normal ES6 JS.

charlieknoll

I have a site using Quasar/PWA, here’s the source code:

https://github.com/charlieknoll/photo-frame-pwa

and here are some dev tips:

https://github.com/charlieknoll/photo-frame-pwa/blob/master/src/markdown/readme-dev.md

zeppelinexpress

thank you guys! @dobbel @charlieknoll I have not seen that was typescript, I don’t know typescript, so I was not able to mirror the docs… and another problem it was because I was using firefox, don’t know why in chrome works perfectly! thanks anyway, sorry for the beginners questions, that code was weird to me and I don’t pay attention to see that was typescript … @charlieknoll I’m reading your source code! thank you… your tips are awesome

dobbel

@zeppelinexpress

pwa’s are not installable on firefox

No More Posting New Topics!

Trying to implement Vue PWA Install