优化 pwa 文案
This commit is contained in:
parent
a255b23be3
commit
2cf1fae21d
@ -16,7 +16,7 @@ const displayFont = Noto_Serif_SC({
|
|||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
metadataBase: new URL("https://digital-human.xn--876a.net"),
|
metadataBase: new URL("https://digital-human.xn--876a.net"),
|
||||||
title: "安智伴 - 家人连线台",
|
title: "安智伴 家人连线台",
|
||||||
description: "随时了解长辈的近况,查看留言、使用动态,给长辈写问候。",
|
description: "随时了解长辈的近况,查看留言、使用动态,给长辈写问候。",
|
||||||
manifest: "/manifest.webmanifest",
|
manifest: "/manifest.webmanifest",
|
||||||
icons: {
|
icons: {
|
||||||
@ -44,7 +44,7 @@ export const metadata: Metadata = {
|
|||||||
appleWebApp: {
|
appleWebApp: {
|
||||||
capable: true,
|
capable: true,
|
||||||
statusBarStyle: "default",
|
statusBarStyle: "default",
|
||||||
title: "安智伴 - 家人连线台",
|
title: "安智伴 家人连线台",
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -2,8 +2,8 @@ import type { MetadataRoute } from "next";
|
|||||||
|
|
||||||
export default function manifest(): MetadataRoute.Manifest {
|
export default function manifest(): MetadataRoute.Manifest {
|
||||||
return {
|
return {
|
||||||
name: "安智伴 - 家人连线台",
|
name: "安智伴 家人连线台",
|
||||||
short_name: "安智伴 - 家人连线台",
|
short_name: "安智伴 家人连线台",
|
||||||
description: "随时了解长辈的近况,查看留言、使用动态,给长辈写问候。",
|
description: "随时了解长辈的近况,查看留言、使用动态,给长辈写问候。",
|
||||||
start_url: "/",
|
start_url: "/",
|
||||||
display: "standalone",
|
display: "standalone",
|
||||||
|
|||||||
@ -73,6 +73,13 @@ export function PwaControls() {
|
|||||||
const [notificationState, setNotificationState] =
|
const [notificationState, setNotificationState] =
|
||||||
useState<NotificationState>("checking");
|
useState<NotificationState>("checking");
|
||||||
const [notice, setNotice] = useState<string | null>(null);
|
const [notice, setNotice] = useState<string | null>(null);
|
||||||
|
const isInstalled = hasInstalledHint || isStandalone;
|
||||||
|
const notificationLabel =
|
||||||
|
notificationState === "enabled"
|
||||||
|
? "消息提醒已开启"
|
||||||
|
: notificationState === "blocked"
|
||||||
|
? "通知权限已被拒绝"
|
||||||
|
: "消息提醒未开启";
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
let active = true;
|
let active = true;
|
||||||
@ -309,32 +316,45 @@ export function PwaControls() {
|
|||||||
return (
|
return (
|
||||||
<section className="rounded-[28px] border border-white/80 bg-white/88 p-5 shadow-[0_22px_55px_rgba(53,84,141,0.12)]">
|
<section className="rounded-[28px] border border-white/80 bg-white/88 p-5 shadow-[0_22px_55px_rgba(53,84,141,0.12)]">
|
||||||
<p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
|
<p className="text-sm font-medium tracking-[0.18em] text-[var(--copper)] uppercase">
|
||||||
快捷设置
|
{isInstalled ? "桌面版" : "快捷设置"}
|
||||||
</p>
|
</p>
|
||||||
<h2 className="mt-2 font-[family-name:var(--font-display)] text-2xl text-[var(--ink)]">
|
<h2 className="mt-2 font-[family-name:var(--font-display)] text-2xl text-[var(--ink)]">
|
||||||
安装到桌面,随时收到长辈的消息
|
{isInstalled
|
||||||
|
? isStandalone
|
||||||
|
? "已从桌面版打开"
|
||||||
|
: "这台设备已添加到主屏幕"
|
||||||
|
: "安装到桌面,随时收到长辈的消息"}
|
||||||
</h2>
|
</h2>
|
||||||
<p className="mt-3 text-sm leading-7 text-[var(--muted)]">
|
<p className="mt-3 text-sm leading-7 text-[var(--muted)]">
|
||||||
安装后打开更快,开启提醒后,长辈每次留言都能立刻收到通知。
|
{isInstalled
|
||||||
|
? notificationState === "enabled"
|
||||||
|
? "新留言会直接推送到这台设备。"
|
||||||
|
: "如需新留言提醒,可在下方开启通知。"
|
||||||
|
: "安装后打开更快,开启提醒后,长辈每次留言都能立刻收到通知。"}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="mt-4 flex flex-wrap gap-3 text-sm text-[var(--muted)]">
|
<div className="mt-4 flex flex-wrap gap-3 text-sm text-[var(--muted)]">
|
||||||
|
{isInstalled ? (
|
||||||
|
<span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
|
||||||
|
{isStandalone ? "桌面版运行中" : "已添加到主屏幕"}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
<span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
|
<span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
|
||||||
{isStandalone ? "当前正以桌面应用方式运行" : "当前正以浏览器方式运行"}
|
{isStandalone ? "当前正以桌面应用方式运行" : "当前正以浏览器方式运行"}
|
||||||
</span>
|
</span>
|
||||||
<span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
|
<span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
|
||||||
{hasInstalledHint ? "这台设备已有主屏幕安装记录" : "暂未检测到主屏幕安装记录"}
|
{hasInstalledHint ? "这台设备已有主屏幕安装记录" : "暂未检测到主屏幕安装记录"}
|
||||||
</span>
|
</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
<span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
|
<span className="rounded-full border border-[var(--line)] bg-[var(--paper-soft)] px-4 py-2">
|
||||||
{notificationState === "enabled"
|
{notificationLabel}
|
||||||
? "消息提醒已开启"
|
|
||||||
: notificationState === "blocked"
|
|
||||||
? "通知权限已被拒绝"
|
|
||||||
: "消息提醒未开启"}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="mt-5 flex flex-wrap gap-3">
|
<div className="mt-5 flex flex-wrap gap-3">
|
||||||
|
{!isInstalled ? (
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
@ -343,14 +363,9 @@ export function PwaControls() {
|
|||||||
disabled={installing || isStandalone}
|
disabled={installing || isStandalone}
|
||||||
className="inline-flex h-12 items-center justify-center rounded-full bg-[var(--ink)] px-5 text-sm font-semibold text-white transition hover:bg-[var(--ink-soft)] disabled:cursor-not-allowed disabled:opacity-60"
|
className="inline-flex h-12 items-center justify-center rounded-full bg-[var(--ink)] px-5 text-sm font-semibold text-white transition hover:bg-[var(--ink-soft)] disabled:cursor-not-allowed disabled:opacity-60"
|
||||||
>
|
>
|
||||||
{isStandalone
|
{installing ? "正在呼起安装" : "安装到桌面"}
|
||||||
? "已从桌面版打开"
|
|
||||||
: installing
|
|
||||||
? "正在呼起安装"
|
|
||||||
: hasInstalledHint
|
|
||||||
? "查看安装说明"
|
|
||||||
: "安装到桌面"}
|
|
||||||
</button>
|
</button>
|
||||||
|
) : null}
|
||||||
|
|
||||||
{notificationState === "enabled" ? (
|
{notificationState === "enabled" ? (
|
||||||
<button
|
<button
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
self.addEventListener("push", (event) => {
|
self.addEventListener("push", (event) => {
|
||||||
let data = {
|
let data = {
|
||||||
title: "安智伴 - 家人连线台",
|
title: "安智伴 家人连线台",
|
||||||
body: "收到一条新的家人留言。",
|
body: "收到一条新的家人留言。",
|
||||||
url: "/",
|
url: "/",
|
||||||
icon: "/pwa/icon-192x192.png",
|
icon: "/pwa/icon-192x192.png",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user