Not work in Ionic/Vue

[damianlluch]

Hello! Thank you for sharing these resources.

I tried in my Ionic / Vue project with its code in the mounted function () and it doesn't work. The button has the display property in none always

`mounted() {
const $button = document.querySelector('#installButton')

		pwaInstallHandler.addListener((canInstall) => {
			$button.style.display = canInstall ? 'inline-block' : 'none'
		})

		$button.addEventListener('click', () => {
			pwaInstallHandler.install().then((isInstalled) => {
				console.log(
						isInstalled
								? 'User accepted installation prompt'
								: 'User rejected installation prompt'
				)
			})
		})`

any suggestions?

[FilipChalupa]

@damianlluch, the code is sort of unreadable. Can you try to share it once again?

I don't use Ionic/Vue so I may not know platform specific issues like a lifecycle.

Here is a React with hooks example:

export const Install: React.FunctionComponent = () => {
	const [canInstall, setCanInstall] = React.useState(false)

	React.useEffect(() => {
		pwaInstallHandler.addListener(setCanInstall)
		return () => {
			pwaInstallHandler.removeListener(setCanInstall)
		}
	}, [])

	if (!canInstall) {
		return null
	}

	return <Button onClick={() => pwaInstallHandler.install()}>Install</Button>
}

[FilipChalupa]

You must meet requirements for installable PWA otherwise the button won't show.

Do you have webmanifest, serviceWorker? Which browser do you test on? E.g. Safari and Firefox won't show button ever since they don't support custom install buttons.

Link to similar issue: #1 (comment)

[FilipChalupa]

I've just made a short summary about it. https://github.com/FilipChalupa/pwa-install-handler#notes

Please let me know if there is anything I can make it easier to grasp.

[damianlluch]

Hi! Thanks for your answers.

I have the setup code in my mounted() function (lyfe cycle)

import pwaInstallHandler from 'pwa-install-handler'
......

mounted() {
pwaInstallHandler.addListener((canInstall) => {
console.log(canInstall);
document.querySelector('#installButton').style.display = canInstall ? 'inline-block' : 'none'
});
.......
},

methods: {
....
buttonInstall() {
document.querySelector('#installButton').addEventListener('click', () => {
pwaInstallHandler.install().then((isInstalled) => {
console.log(
isInstalled
? 'User accepted installation prompt'
: 'User rejected installation prompt'
)
})
})
},
}

always print false...

[FilipChalupa]

@damianlluch, do you meet the PWA requirements? Which browser do you use?

Desktop Chrome shows a little plus sign when your app is installable. Only then you can show your custom install button.

[damianlluch]

Lighthouse Report Viewer.pdf

[damianlluch]

I tried with Chrome, Firefox and Safari

[FilipChalupa]

Firefox and Safari don't support custom install button. So expect canInstall to be always false in them. That's ok, just don't show install button.

For Chrome you must have registered service worker which handles fetch. Maybe you don't have it? Looking at lighthouse I'm not sure.

How to register service worker: https://developers.google.com/web/fundamentals/primers/service-workers#register_a_service_worker

The simplest pass through service worker:

self.addEventListener('fetch', function(event){
    event.respondWith(
        fetch(event.request)
    );
});

^ It doesn't do much but Chrome/Chromium requires any fetch handler.

[FilipChalupa]

Aha. The https://devweb.fbase.tv/ is live.

Well, now I see that you have the service worker empty. Try to add the code in previous comment.

[damianlluch]

Hey, thanks...

I get always the same problem.

display: none

[FilipChalupa]

I've just checked the https://devweb.fbase.tv/ and your service worker seems empty.

That's why devtools reports a warning.

[damianlluch]

Thank you, I understood in the end how this topic. Your words have helped me.