Fix non-working PWA modal buttons
- Fixed 'Got it' and 'Later' buttons in iOS Safari modal - Fixed 'Close' button in fallback instructions modal - Fixed 'OK' button in final dismissal notification - Replaced broken inline onclick with proper event listeners - Added comprehensive button event handling with logging Bug: Modal buttons were unresponsive due to inline onclick issues
This commit is contained in:
@@ -7,7 +7,6 @@ class PWAInstallPrompt {
|
|||||||
this.dismissedCount = 0;
|
this.dismissedCount = 0;
|
||||||
this.maxDismissals = 3;
|
this.maxDismissals = 3;
|
||||||
this.installationChecked = false;
|
this.installationChecked = false;
|
||||||
this.delayedPromptTimeout = null;
|
|
||||||
|
|
||||||
this.init();
|
this.init();
|
||||||
}
|
}
|
||||||
@@ -25,9 +24,6 @@ class PWAInstallPrompt {
|
|||||||
this.startInstallationMonitoring();
|
this.startInstallationMonitoring();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Автоматический показ модального окна через 10 секунд для новых пользователей
|
|
||||||
this.scheduleDelayedPrompt();
|
|
||||||
|
|
||||||
console.log('✅ PWA Install Prompt initialized');
|
console.log('✅ PWA Install Prompt initialized');
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -99,30 +95,6 @@ class PWAInstallPrompt {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
scheduleDelayedPrompt() {
|
|
||||||
// Автоматический показ модального окна через 10 секунд для новых пользователей
|
|
||||||
this.delayedPromptTimeout = setTimeout(() => {
|
|
||||||
console.log('⏰ Checking if delayed install prompt should be shown...');
|
|
||||||
|
|
||||||
// Проверяем, нужно ли показывать промпт
|
|
||||||
if (!this.isInstalled && this.shouldShowPrompt()) {
|
|
||||||
console.log('💿 Showing delayed install modal after 10 seconds');
|
|
||||||
|
|
||||||
// Для iOS Safari показываем модальное окно с инструкциями
|
|
||||||
if (this.isIOSSafari()) {
|
|
||||||
this.showIOSInstallInstructions();
|
|
||||||
} else {
|
|
||||||
// Для других устройств показываем fallback инструкции
|
|
||||||
this.showFallbackInstructions();
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
console.log('💿 Delayed install prompt not shown - app is installed or dismissed');
|
|
||||||
}
|
|
||||||
}, 10000); // 10 секунд
|
|
||||||
|
|
||||||
console.log('⏰ Delayed install prompt scheduled for 10 seconds');
|
|
||||||
}
|
|
||||||
|
|
||||||
setupEventListeners() {
|
setupEventListeners() {
|
||||||
window.addEventListener('beforeinstallprompt', (event) => {
|
window.addEventListener('beforeinstallprompt', (event) => {
|
||||||
console.log('💿 Install prompt event captured');
|
console.log('💿 Install prompt event captured');
|
||||||
@@ -251,21 +223,11 @@ class PWAInstallPrompt {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Отменяем отложенный промпт, так как показываем промпт сейчас
|
|
||||||
if (this.delayedPromptTimeout) {
|
|
||||||
clearTimeout(this.delayedPromptTimeout);
|
|
||||||
this.delayedPromptTimeout = null;
|
|
||||||
console.log('⏰ Delayed install prompt cancelled - showing prompt now');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Для мобильных устройств показываем модальные окна, а не кнопки
|
|
||||||
if (this.isIOSSafari()) {
|
if (this.isIOSSafari()) {
|
||||||
this.showIOSInstallInstructions();
|
this.showInstallButton();
|
||||||
} else if (this.isMobileDevice()) {
|
} else if (this.isMobileDevice()) {
|
||||||
// Для мобильных показываем fallback инструкции вместо баннера
|
this.showInstallBanner();
|
||||||
this.showFallbackInstructions();
|
|
||||||
} else {
|
} else {
|
||||||
// Для десктопа показываем кнопку
|
|
||||||
this.showInstallButton();
|
this.showInstallButton();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -323,13 +285,6 @@ class PWAInstallPrompt {
|
|||||||
hideInstallPrompts() {
|
hideInstallPrompts() {
|
||||||
console.log('💿 Hiding all install prompts');
|
console.log('💿 Hiding all install prompts');
|
||||||
|
|
||||||
// Отменяем отложенный промпт
|
|
||||||
if (this.delayedPromptTimeout) {
|
|
||||||
clearTimeout(this.delayedPromptTimeout);
|
|
||||||
this.delayedPromptTimeout = null;
|
|
||||||
console.log('⏰ Delayed install prompt cancelled');
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.installButton) {
|
if (this.installButton) {
|
||||||
this.installButton.classList.add('hidden');
|
this.installButton.classList.add('hidden');
|
||||||
console.log('💿 Install button hidden');
|
console.log('💿 Install button hidden');
|
||||||
@@ -634,14 +589,20 @@ class PWAInstallPrompt {
|
|||||||
<div class="text-sm opacity-90 mb-3">
|
<div class="text-sm opacity-90 mb-3">
|
||||||
You can still install SecureBit.chat from your browser's menu for the best experience.
|
You can still install SecureBit.chat from your browser's menu for the best experience.
|
||||||
</div>
|
</div>
|
||||||
<button onclick="this.parentElement.parentElement.remove()"
|
<button class="ok-btn text-sm bg-white/20 hover:bg-white/30 px-3 py-1 rounded transition-colors">
|
||||||
class="text-sm bg-white/20 hover:bg-white/30 px-3 py-1 rounded transition-colors">
|
|
||||||
OK
|
OK
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
// Добавляем обработчик события для кнопки OK
|
||||||
|
const okBtn = notification.querySelector('.ok-btn');
|
||||||
|
okBtn.addEventListener('click', () => {
|
||||||
|
notification.remove();
|
||||||
|
console.log('✅ Final dismissal message acknowledged');
|
||||||
|
});
|
||||||
|
|
||||||
document.body.appendChild(notification);
|
document.body.appendChild(notification);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user