Розширення PWA за замовченням додає спливаюче вікно і це не завжди зручно, як на мене. Якщо користувач вперще на форумі то він навряд буде одразу встановлювати застосунок, а спливаючі вікна дратують. У себе, в нижню частину форуму, додав кнопку.
Вона завжди доступна і зникає після того як користувач встановив застосунок.
Треба просто додати цей код через адмін панель(код писав chatGPT). Може комусь буде корисно.
<button id="installButton" style="padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer; display: none;">
Встановити застосунок
</button>
<script>
let deferredPrompt;
// Перехоплюємо подію 'beforeinstallprompt'
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
deferredPrompt = e;
// Показуємо кнопку після того, як подія готова
document.getElementById('installButton').style.display = 'inline-block';
});
// Обробляємо натискання на кнопку для запуску процесу інсталяції
document.getElementById('installButton').addEventListener('click', () => {
if (deferredPrompt) {
deferredPrompt.prompt(); // Показуємо prompt для інсталяції
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('Користувач погодився на встановлення');
} else {
console.log('Користувач відмовився від встановлення');
}
deferredPrompt = null;
});
}
});
// Відстежуємо подію 'appinstalled'
window.addEventListener('appinstalled', () => {
console.log('PWA вже встановлено');
document.getElementById('installButton').style.display = 'none'; // Приховуємо кнопку після встановлення
});
</script></center>
