How do we programmatically ask user to add weweb PWA app into user’s home screen from a button ?
what i already did was adding a custom javascript on button on click but it didnt work on android and iOS
let deferredPrompt;
// Function to handle installation when the button is clicked
function installPWA() {
if (deferredPrompt) {
// Show the install prompt
deferredPrompt.prompt();
// Wait for the user to respond to the prompt
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('User accepted the install prompt');
} else {
console.log('User dismissed the install prompt');
}
// Clear the deferredPrompt variable
deferredPrompt = null;
});
}
}
return installPWA()
In your code, you’re just defining the deferredPrompt, you say that it exists, but you assign no value to it, and what I’m guessing is you’re getting nothing from it, because the first if statement checks for deferredPrompt and either gets null, or undefined. I think you’re missing a piece of the code containing the “deferredPrompt”
yep. usually this snippet of code is meant to show custom ui instead of the default browser’s prompt for installation. deferredPrompt would be set by an event listener for beforeinstallprompt that is triggered if the browser supports it and the app pass the install criteria.
From Yükleme istemi | web.dev
there is no other way to trigger the browser’s installation prompt
There are explainations and code example in the links that I posted. I still have to test it with weweb. Generally speaking you need to add the event listener as showed in the linked pages, check the install criteria and understand that the only thing you can do is display a custom ui, instead of the default one, by intercepting the event. There isn’t a programmatic prompt other that the event triggered by the browser automatically. I would test if first with the default prompt to check that everything else is working as intended and only after adding the code for the custom prompt.
It may take a bit to read and digest the documentation and examples but you can do it
The event is not triggered by custom js, but it is the browser that triggers it automatically when meeting the install criteria. You need custom js to listen to it and populate the variable that is without value in your code.
The linked pages have working examples that you can run in a compatible browser to understand the process and play with it. They also come with a complete dev environment in the browser. It’s very helpful to read and play with, the code is minimal, give it a try.
Listen for the beforeinstallprompt event which is the code below
Save it (you’ll need it later).
Trigger it from your UI.
// This variable will save the event for later use.
let deferredPrompt;
window.addEventListener('beforeinstallprompt', (e) => {
// Prevents the default mini-infobar or install dialog from appearing on mobile
e.preventDefault();
// Save the event because you'll need to trigger it later.
deferredPrompt = e;
// Show your customized install prompt for your PWA
// Your own UI doesn't have to be a single element, you
// can have buttons in different locations, or wait to prompt
// as part of a critical journey.
showInAppInstallPromotion();
});
My question is
where do i even put this code at ? is it on every page via custom code ?
you don’t. the manifest is handled by weweb. You need to look at the code of the js file and adapt it to run in one or more js actions. It can get tricky because the event can be triggered before weweb’s load workflow executes, so you may need to add it as custom code in the header. Anyway i think it can’t be tested in the editor, you need at least to publish in staging.
Generally speaking you want to look at the app.js file. Add the beforeinstallprompt listener that saves the event to the global window variable (the deferredPrompt of your initial script). Put this part in a script tag in the header of the project. Then in a js action you should be able to run your initial script. You need to test this in a published app to see if it works.
I think it was talked about before that Weweb might be able to build in that functionality, I’m not quite sure if it was tabled or if its still in the works though. Hopefully it something they can add for us.
