Запитання Як зробити кнопку PWA

[Олексій]

Тут на сайті, у мобільному меню є кнопка "встановити застосунок", якщо її натиснути, то встановлюється PWA, а сама кнопка зникає.
У мене flarum там теж можна встановити застосунок, але у мене з'являється віконце поверх екрану і якщо його закрити то більше воно не пропонує нічого. Якщо користувач вперше на сайті, то навряд він захоче одразу щось собі встановлювати, а потім, навіть якщо захоче, то вже незможе, бо кнопки такої немає. Мені здається, що у вас тут значно зручніше.
Як можна це зробити? Можливо є якийсь шматок коду, який можна додати щоб така кнопка з'вилась на моєему сайті?

 

[Ramirez]

Тут на сайті, у мобільному меню є кнопка "встановити застосунок", якщо її натиснути, то встановлюється PWA, а сама кнопка зникає.
У мене flarum там теж можна встановити застосунок, але у мене з'являється віконце поверх екрану і якщо його закрити то більше воно не пропонує нічого. Якщо користувач вперше на сайті, то навряд він захоче одразу щось собі встановлювати, а потім, навіть якщо захоче, то вже незможе, бо кнопки такої немає. Мені здається, що у вас тут значно зручніше.
Як можна це зробити? Можливо є якийсь шматок коду, який можна додати щоб така кнопка з'вилась на моєему сайті?

PWA браузери (наприклад, Chrome) мають подію beforeinstallprompt, яка спрацьовує, коли сайт готовий до встановлення як додаток. Цю подію можна зловити і зберегти, щоб вона спрацювала тоді, коли вам це потрібно.

Ось js скрипи для прикладу як це можна зробити
В даному випадку, цей код буде працювати якщо користувач відмовився від встановлення.
<button id="installButton" style="display:none;">Встановити застосунок</button> <script> let deferredPrompt; [UWSL] window.addEventListener('beforeinstallprompt', (e) => {[/UWSL] e.preventDefault(); deferredPrompt = e;[UWSL] document.getElementById('installButton').style.display = 'block';[/UWSL] [UWSL]document.getElementById('installButton').addEventListener('click', () => {[/UWSL][UWSL] document.getElementById('installButton').style.display = 'none';[/UWSL] deferredPrompt.prompt();[UWSL] deferredPrompt.userChoice.then((choiceResult) => {[/UWSL] if (choiceResult.outcome === 'accepted') { console.log('Користувач погодився на встановлення'); } else { console.log('Користувач відхилив встановлення'); } deferredPrompt = null; [UWSL]);[/UWSL] }); }); </script>

 

[Олексій]

PWA браузери (наприклад, Chrome) мають подію beforeinstallprompt, яка спрацьовує, коли сайт готовий до встановлення як додаток. Цю подію можна зловити і зберегти, щоб вона спрацювала тоді, коли вам це потрібно.

Ось js скрипи для прикладу як це можна зробити
В даному випадку, цей код буде працювати якщо користувач відмовився від встановлення.
<button id="installButton" style="display:none;">Встановити застосунок</button> <script> let deferredPrompt; [UWSL] window.addEventListener('beforeinstallprompt', (e) => {[/UWSL] e.preventDefault(); deferredPrompt = e;[UWSL] document.getElementById('installButton').style.display = 'block';[/UWSL] [UWSL]document.getElementById('installButton').addEventListener('click', () => {[/UWSL][UWSL] document.getElementById('installButton').style.display = 'none';[/UWSL] deferredPrompt.prompt();[UWSL] deferredPrompt.userChoice.then((choiceResult) => {[/UWSL] if (choiceResult.outcome === 'accepted') { console.log('Користувач погодився на встановлення'); } else { console.log('Користувач відхилив встановлення'); } deferredPrompt = null; [UWSL]);[/UWSL] }); }); </script>

Додав код який Ви написали, через адмін панель фларуму, але нічого не змінилося

 

[Олексій]

<!-- HTML та CSS для кнопки установки PWA -->
<style>
/* Додайте стилі для кнопки */
#pwa-install-button {
display: none; /* Сховати кнопку за замовчуванням */

padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
z-index: 1000;
font-size: 16px;
}
</style>

<center><button id="pwa-install-button">Встановити застосунок</button></center>

<!-- JavaScript для обробки установки PWA -->
<script>
document.addEventListener('DOMContentLoaded', function() {
let deferredPrompt;
const installButton = document.getElementById('pwa-install-button');

window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault(); // Запобігає автоматичному показу запиту
deferredPrompt = e;
installButton.style.display = 'block'; // Показати кнопку
});

installButton.addEventListener('click', () => {
if (deferredPrompt) {
deferredPrompt.prompt();
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('Користувач прийняв запит на установку');
} else {
console.log('Користувач відмовився від запиту на установку');
}
deferredPrompt = null;
installButton.style.display = 'none'; // Сховати кнопку після натискання
});
}
});

window.addEventListener('appinstalled', () => {
console.log('PWA була встановлена');
installButton.style.display = 'none'; // Сховати кнопку після установки
});
});
</script>

Щось таке написав чат gpt. Кнопка з'явилась, але сторінка дуже довго завантажуєтся

 

[Ramirez]

<!-- HTML та CSS для кнопки установки PWA -->
<style>
/* Додайте стилі для кнопки */
#pwa-install-button {
display: none; /* Сховати кнопку за замовчуванням */

padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
z-index: 1000;
font-size: 16px;
}
</style>

<center><button id="pwa-install-button">Встановити застосунок</button></center>

<!-- JavaScript для обробки установки PWA -->
<script>
document.addEventListener('DOMContentLoaded', function() {
let deferredPrompt;
const installButton = document.getElementById('pwa-install-button');

window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault(); // Запобігає автоматичному показу запиту
deferredPrompt = e;
installButton.style.display = 'block'; // Показати кнопку
});

installButton.addEventListener('click', () => {
if (deferredPrompt) {
deferredPrompt.prompt();
deferredPrompt.userChoice.then((choiceResult) => {
if (choiceResult.outcome === 'accepted') {
console.log('Користувач прийняв запит на установку');
} else {
console.log('Користувач відмовився від запиту на установку');
}
deferredPrompt = null;
installButton.style.display = 'none'; // Сховати кнопку після натискання
});
}
});

window.addEventListener('appinstalled', () => {
console.log('PWA була встановлена');
installButton.style.display = 'none'; // Сховати кнопку після установки
});
});
</script>

Щось таке написав чат gpt. Кнопка з'явилась, але сторінка дуже довго завантажуєтся

Це стандартный скрипт вони майже мають однакові властивості, тому і написав. На рахунок довго завантажується нічого не можу відповісти . На прикладі мого js, він не має стилю тому ви нічого не побачили на сайті

 

[Олексій]

Це стандартный скрипт вони майже мають однакові властивості, тому і написав. На рахунок довго завантажується нічого не можу відповісти . На прикладі мого js, він не має стилю тому ви нічого не побачили на сайті

Просто я не дуже розуміють на таких штуках максимум що я вмію, це скопіювати і вставити код я не програміст

 

[Ramirez]

Просто я не дуже розуміють на таких штуках максимум що я вмію, це скопіювати і вставити код я не програміст

Я зрозумів. В даному випадку треба замовляти налаштування) а взагалі, це базові знання, треба захотіти

 

[LITVINOV]

Тут на сайті, у мобільному меню є кнопка "встановити застосунок", якщо її натиснути, то встановлюється PWA, а сама кнопка зникає.
У мене flarum там теж можна встановити застосунок, але у мене з'являється віконце поверх екрану і якщо його закрити то більше воно не пропонує нічого. Якщо користувач вперше на сайті, то навряд він захоче одразу щось собі встановлювати, а потім, навіть якщо захоче, то вже незможе, бо кнопки такої немає. Мені здається, що у вас тут значно зручніше.
Як можна це зробити? Можливо є якийсь шматок коду, який можна додати щоб така кнопка з'вилась на моєему сайті?

А чому flarum? Не дуже рекомендую його до використання... Дуже багато проблем приносить, колись робив форум на flarum і нічого толкового не вийшло бо надто сира cms, дивіться в сторону xenforo або ips community

 

[Олексій]

А чому flarum? Не дуже рекомендую його до використання... Дуже багато проблем приносить, колись робив форум на flarum і нічого толкового не вийшло бо надто сира cms, дивіться в сторону або ips community

Flarum томущо він повністю перекладений українською, а ще він безкоштовний
А це форум на xenforo працює? І кнопка, про яку я питав, тут за замовченням є?

 

[LITVINOV]

Flarum томущо він повністю перекладений українською, а ще він безкоштовний
А це форум на xenforo працює? І кнопка, про яку я питав, тут за замовченням є?

Так xenforo, кнопка за замовчуванням трохи інша але це можна змінити швидко та легко плагінами а в фларумі це танці з бубном

Flarum томущо він повністю перекладений українською, а ще він безкоштовний
А це форум на xenforo працює? І кнопка, про яку я питав, тут за замовченням є?

Xenforo та ips також також мають українську локалізацію і є nulled версії які можна використовувати а потім як форум почне приносити прибуток купити ліцензію