vndangkhoa/kv-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

FEAT: Improve first-run UX and PWA install

Browse source 
- 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:
Julien Maille 2026-01-18 14:11:37 +01:00
parent 3ff27503d0
commit 9ec2b4cfb2
2 changed files with 23 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
index.html
View file

@ -1513,6 +1513,13 @@
</div>
<button id="show-shortcuts-btn" class="btn-secondary">Show Shortcuts</button>
</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="info">
<span class="label">Cache</span>

23
js/app.js
View file

@ -1004,22 +1004,31 @@ document.addEventListener('DOMContentLoaded', async () => {
window.addEventListener('beforeinstallprompt', (e) => {
e.preventDefault();
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')) {
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', () => {
showKeyboardShortcuts();
});
if (!localStorage.getItem('shortcuts-shown') && window.innerWidth > 768) {
setTimeout(() => {
showKeyboardShortcuts();
localStorage.setItem('shortcuts-shown', 'true');
}, 3000);
}
// Listener for Pocketbase Sync updates
window.addEventListener('library-changed', () => {
const hash = window.location.hash;