FEAT: Improve first-run UX and PWA install
- Remove automatic keyboard shortcuts popup on startup. - Add 'Install App' button to settings (only visible if installable). - Allow users to manually trigger PWA installation if the initial prompt was dismissed.
This commit is contained in:
parent
3ff27503d0
commit
9ec2b4cfb2
2 changed files with 23 additions and 7 deletions
|
|
@ -1513,6 +1513,13 @@
|
||||||
</div>
|
</div>
|
||||||
<button id="show-shortcuts-btn" class="btn-secondary">Show Shortcuts</button>
|
<button id="show-shortcuts-btn" class="btn-secondary">Show Shortcuts</button>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="setting-item" id="install-app-setting" style="display: none;">
|
||||||
|
<div class="info">
|
||||||
|
<span class="label">Install App</span>
|
||||||
|
<span class="description">Install Monochrome as an app on your device</span>
|
||||||
|
</div>
|
||||||
|
<button id="manual-install-btn" class="btn-primary">Install</button>
|
||||||
|
</div>
|
||||||
<div class="setting-item">
|
<div class="setting-item">
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<span class="label">Cache</span>
|
<span class="label">Cache</span>
|
||||||
|
|
|
||||||
23
js/app.js
23
js/app.js
|
|
@ -1004,22 +1004,31 @@ document.addEventListener('DOMContentLoaded', async () => {
|
||||||
window.addEventListener('beforeinstallprompt', (e) => {
|
window.addEventListener('beforeinstallprompt', (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
deferredPrompt = e;
|
deferredPrompt = e;
|
||||||
|
|
||||||
|
// Show the manual install button in settings
|
||||||
|
const installSetting = document.getElementById('install-app-setting');
|
||||||
|
if (installSetting) installSetting.style.display = 'flex';
|
||||||
|
|
||||||
if (!localStorage.getItem('installPromptDismissed')) {
|
if (!localStorage.getItem('installPromptDismissed')) {
|
||||||
showInstallPrompt(deferredPrompt);
|
showInstallPrompt(deferredPrompt);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
document.getElementById('manual-install-btn')?.addEventListener('click', async () => {
|
||||||
|
if (deferredPrompt) {
|
||||||
|
deferredPrompt.prompt();
|
||||||
|
const { outcome } = await deferredPrompt.userChoice;
|
||||||
|
console.log(`User response to install prompt: ${outcome}`);
|
||||||
|
deferredPrompt = null;
|
||||||
|
const installSetting = document.getElementById('install-app-setting');
|
||||||
|
if (installSetting) installSetting.style.display = 'none';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
document.getElementById('show-shortcuts-btn')?.addEventListener('click', () => {
|
document.getElementById('show-shortcuts-btn')?.addEventListener('click', () => {
|
||||||
showKeyboardShortcuts();
|
showKeyboardShortcuts();
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!localStorage.getItem('shortcuts-shown') && window.innerWidth > 768) {
|
|
||||||
setTimeout(() => {
|
|
||||||
showKeyboardShortcuts();
|
|
||||||
localStorage.setItem('shortcuts-shown', 'true');
|
|
||||||
}, 3000);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Listener for Pocketbase Sync updates
|
// Listener for Pocketbase Sync updates
|
||||||
window.addEventListener('library-changed', () => {
|
window.addEventListener('library-changed', () => {
|
||||||
const hash = window.location.hash;
|
const hash = window.location.hash;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue