Add button for home screen add instructions

This commit is contained in:
Ettore
2026-05-22 23:50:05 +02:00
parent eeea8dfad8
commit 6f90bd2891
6 changed files with 69 additions and 33 deletions

View File

@@ -342,33 +342,43 @@ if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("/sw.js").catch(() => {});
}
// ── PWA install banner ────────────────────────────────────────────────────────
// ── Add to Home Screen ────────────────────────────────────────────────────────
const _isInstalled = window.matchMedia("(display-mode: standalone)").matches || !!navigator.standalone;
const _installAppBtn = document.getElementById("install-app-btn");
const _installBanner = document.getElementById("install-banner");
const INSTALL_DISMISSED_KEY = "lg_install_dismissed";
let _deferredInstallPrompt = null;
window.addEventListener("beforeinstallprompt", (e) => {
e.preventDefault();
if (sessionStorage.getItem(INSTALL_DISMISSED_KEY)) return;
_deferredInstallPrompt = e;
document.getElementById("install-banner").classList.remove("hidden");
});
if (_isInstalled) {
// Already installed — hide both
_installAppBtn.style.display = "none";
} else if (typeof window.AddToHomeScreen === "function") {
const _addToHomeScreenInstance = window.AddToHomeScreen({
appName: "Lagomare Gates",
appIconUrl: "/static/images/mobile_icon.png",
assetUrl: "https://cdn.jsdelivr.net/npm/pwa-add-to-homescreen@4/dist/assets/img/",
maxModalDisplayCount: -1,
displayOptions: { showMobile: true, showDesktop: true },
allowClose: true,
showArrow: true,
});
document.getElementById("install-btn").addEventListener("click", async () => {
const banner = document.getElementById("install-banner");
banner.classList.add("hidden");
if (!_deferredInstallPrompt) return;
_deferredInstallPrompt.prompt();
await _deferredInstallPrompt.userChoice;
_deferredInstallPrompt = null;
});
// Header button — always triggers the library UI
_installAppBtn.addEventListener("click", () => {
_addToHomeScreenInstance.show("en");
});
document.getElementById("install-dismiss").addEventListener("click", () => {
document.getElementById("install-banner").classList.add("hidden");
sessionStorage.setItem(INSTALL_DISMISSED_KEY, "1");
_deferredInstallPrompt = null;
});
// Auto-show banner once per session
if (!sessionStorage.getItem(INSTALL_DISMISSED_KEY)) {
_installBanner.classList.remove("hidden");
}
window.addEventListener("appinstalled", () => {
document.getElementById("install-banner").classList.add("hidden");
_deferredInstallPrompt = null;
});
document.getElementById("install-btn").addEventListener("click", () => {
_installBanner.classList.add("hidden");
_addToHomeScreenInstance.show("en");
});
document.getElementById("install-dismiss").addEventListener("click", () => {
_installBanner.classList.add("hidden");
sessionStorage.setItem(INSTALL_DISMISSED_KEY, "1");
});
}