J’ai simplement ajouté le bouton en créant un composant de thème.
Il suffit de créer un nouveau composant de thème…
Ajoutez le code JavaScript suivant, par exemple dans l’en-tête :
<script>
let deferredPrompt; // Permet d'afficher l'invite d'installation
const installButton = document.getElementById("install_button");
window.addEventListener("beforeinstallprompt", e => {
console.log("beforeinstallprompt déclenché");
// Empêcher Chrome 76 et versions antérieures d'afficher automatiquement une invite
e.preventDefault();
// Stocker l'événement pour pouvoir le déclencher plus tard.
deferredPrompt = e;
// Afficher le bouton d'installation
installButton.hidden = false;
installButton.addEventListener("click", installApp);
});
function installApp() {
// Afficher l'invite
deferredPrompt.prompt();
installButton.disabled = true;
// Attendre que l'utilisateur réponde à l'invite
deferredPrompt.userChoice.then(choiceResult => {
if (choiceResult.outcome === "accepted") {
console.log("Configuration PWA acceptée");
installButton.hidden = true;
} else {
console.log("Configuration PWA rejetée");
}
installButton.disabled = false;
deferredPrompt = null;
});
}
window.addEventListener("appinstalled", evt => {
console.log("appinstalled déclenché", evt);
});
</script>
Et placez le code HTML suivant à l’endroit où vous souhaitez afficher le bouton d’installation :
<button id="install_button" hidden>Installer</button>
Il est masqué par défaut et n’apparaîtra que si la PWA n’est pas installée.
Je l’ai testé sur Chrome.