Fix PWA installation support
This commit is contained in:
1 parent
bbdfe97c4e
commit
153f184c38
7 files changed
+41
-7
No files matched your search
@@ -2,6 +2,8 @@
|
||||
@import "tw-animate-css";
|
||||
@import "../vendor/shadcn-tailwind-4.13.0.css";
|
||||
|
||||
.pwa-install{position:fixed;z-index:60;right:1rem;bottom:1rem;display:flex;align-items:center;gap:.75rem;max-width:min(28rem,calc(100vw - 2rem));padding:.8rem .9rem;color:#eff6ff;background:rgba(15,23,42,.94);border:1px solid rgba(147,197,253,.45);border-radius:.85rem;box-shadow:0 12px 30px rgba(15,23,42,.28);font-size:.875rem}.pwa-install button{flex:none;padding:.45rem .7rem;border-radius:.55rem;border:0;background:#60a5fa;color:#0f172a;font-weight:700;cursor:pointer}.pwa-ios{color:#bfdbfe;white-space:nowrap}@media(max-width:520px){.pwa-install{left:.75rem;right:.75rem;bottom:.75rem;flex-wrap:wrap}.pwa-ios{white-space:normal}}
|
||||
|
||||
@utility scrollbar-thin {
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@ export const metadata: Metadata = {
|
||||
icons: {
|
||||
icon: "/favicon.svg",
|
||||
shortcut: "/favicon.svg",
|
||||
apple: "/icon-192.png",
|
||||
},
|
||||
manifest: "/manifest.webmanifest",
|
||||
applicationName: "大学英语六级 · 90天打卡",
|
||||
|
||||
+22
-2
@@ -1,3 +1,23 @@
|
||||
"use client";
|
||||
import { useEffect } from "react";
|
||||
export default function PwaRegister() { useEffect(() => { if ("serviceWorker" in navigator) navigator.serviceWorker.register("/sw.js").catch(() => undefined); }, []); return null; }
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
type InstallPrompt = Event & { prompt: () => Promise<void>; userChoice: Promise<{ outcome: "accepted" | "dismissed" }> };
|
||||
|
||||
export default function PwaRegister() {
|
||||
const [prompt, setPrompt] = useState<InstallPrompt | null>(null);
|
||||
const [isIos, setIsIos] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if ("serviceWorker" in navigator) navigator.serviceWorker.register("/sw.js", { updateViaCache: "none" }).catch(() => undefined);
|
||||
setIsIos(/iphone|ipad|ipod/i.test(navigator.userAgent));
|
||||
const receivePrompt = (event: Event) => { event.preventDefault(); setPrompt(event as InstallPrompt); };
|
||||
window.addEventListener("beforeinstallprompt", receivePrompt);
|
||||
return () => window.removeEventListener("beforeinstallprompt", receivePrompt);
|
||||
}, []);
|
||||
|
||||
if (!prompt && !isIos) return null;
|
||||
return <div className="pwa-install" role="status">
|
||||
<span>把打卡站点安装到桌面,打开更快捷。</span>
|
||||
{prompt ? <button onClick={async () => { await prompt.prompt(); const result = await prompt.userChoice; if (result.outcome === "accepted") setPrompt(null); }}>安装应用</button> : <span className="pwa-ios">Safari 点“分享”→“添加到主屏幕”</span>}
|
||||
</div>;
|
||||
}
|
||||
Loaded 3 of 7 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user