Testing PWA install prompt

This commit is contained in:
Dan Baker 2026-02-21 21:28:33 +00:00
parent aca0d2dc4f
commit c115121aa7
3 changed files with 127 additions and 1 deletions

View file

@ -1,6 +1,6 @@
// ── State ────────────────────────────────────────────────────────────────────
let emoji = "💬";
let settings = { username: "", apiKey: "", theme: "auto", mastodonPost: false };
let settings = { username: "", apiKey: "", theme: "auto", mastodonPost: false, showMastodon: true };
// ── DOM ──────────────────────────────────────────────────────────────────────
const $ = (id) => document.getElementById(id);
@ -20,7 +20,9 @@ const sApikey = $("s-apikey");
const eyeBtn = $("eye-btn");
const saveBtn = $("save-btn");
const themeToggle = $("theme-toggle");
const mastodonVisToggle = $("mastodon-vis-toggle");
const mastodonToggle = $("mastodon-toggle");
const mastodonRow = mastodonToggle.closest(".field");
// ── Settings ─────────────────────────────────────────────────────────────────
function applyTheme(theme) {
@ -44,12 +46,25 @@ function updateThemeToggle(theme) {
});
}
function applyMastodonVisibility(show) {
mastodonRow.style.display = show ? "" : "none";
}
function updateMastodonVisToggle(show) {
mastodonVisToggle.querySelectorAll(".theme-btn").forEach((btn) => {
const active = (btn.dataset.mastodonVis === "show") === show;
btn.classList.toggle("active", active);
btn.setAttribute("aria-pressed", active ? "true" : "false");
});
}
function loadSettings() {
try {
const raw = localStorage.getItem("spo-settings");
if (raw) settings = { ...settings, ...JSON.parse(raw) };
} catch {}
applyTheme(settings.theme);
applyMastodonVisibility(settings.showMastodon ?? true);
updateBadge();
mastodonToggle.checked = settings.mastodonPost ?? false;
}
@ -80,6 +95,7 @@ function openModal() {
sUsername.value = settings.username;
sApikey.value = settings.apiKey;
updateThemeToggle(settings.theme);
updateMastodonVisToggle(settings.showMastodon ?? true);
overlay.classList.add("open");
document.body.style.overflow = "hidden";
// Focus first empty field
@ -121,6 +137,15 @@ mastodonToggle.addEventListener("change", () => {
try { localStorage.setItem("spo-settings", JSON.stringify(settings)); } catch {}
});
mastodonVisToggle.addEventListener("click", (e) => {
const btn = e.target.closest(".theme-btn");
if (!btn) return;
const show = btn.dataset.mastodonVis === "show";
settings.showMastodon = show;
applyMastodonVisibility(show);
updateMastodonVisToggle(show);
});
themeToggle.addEventListener("click", (e) => {
const btn = e.target.closest(".theme-btn");
if (!btn) return;
@ -280,6 +305,36 @@ if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("sw.js").catch(() => {});
}
// ── Install banner ────────────────────────────────────────────────────────────
(function () {
const isPWA =
window.matchMedia("(display-mode: standalone)").matches ||
navigator.standalone === true;
if (isPWA) return;
try {
if (localStorage.getItem("spo-install-dismissed")) return;
} catch {}
const ua = navigator.userAgent;
let msg = null;
if (/iPad|iPhone|iPod/.test(ua)) {
msg = 'Tap Share ↑ at the bottom of Safari, then "Add to Home Screen" to install this app.';
} else if (/Android/.test(ua)) {
msg = 'Tap the ⋮ menu in Chrome, then "Add to Home Screen" to install this app.';
}
if (!msg) return;
const banner = $("install-banner");
$("install-banner-text").textContent = msg;
banner.classList.add("visible");
$("install-banner-close").addEventListener("click", () => {
banner.classList.remove("visible");
try { localStorage.setItem("spo-install-dismissed", "1"); } catch {}
});
})();
// ── Init ──────────────────────────────────────────────────────────────────────
loadSettings();