Testing PWA install prompt
This commit is contained in:
parent
aca0d2dc4f
commit
c115121aa7
3 changed files with 127 additions and 1 deletions
57
script.js
57
script.js
|
|
@ -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();
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue