Add button for home screen add instructions
This commit is contained in:
@@ -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");
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user