Skip to main content
本指南将带您使用 模板,该模板使用 Next.js、Serwist(离线能力) 和 Privy 嵌入式钱包 在 Monad 上构建渐进式 Web 应用(PWA)。
该模板还有一个 no-privy 分支,您可以切换到该分支以在不使用 Privy 的情况下开始。您可以使用以下命令切换分支:

​
前置条件

  1. 创建您的 Privy 应用:
Create your app选择 “Web” 作为平台。然后点击 “Create app”。Name your app在下一个页面,请确保保存您的 App ID。
  1. 设置登录方式:
Set up login methods
  1. 禁用外部钱包:
Disable external wallets
  1. 向下滚动并启用 “Automatically create embedded wallets on login” 并选择 “EVM Wallets”:
Create wallets automatically
您可以启用 “Test Accounts” 用于测试目的:Test accounts

​
设置

  1. 克隆仓库:
  2. cd 进入项目目录:
  3. 安装依赖:
  4. 在根目录创建 .env.local 文件:
  5. 开始向 .env.local 文件添加环境变量:
    如果您丢失了 Privy App ID,可以在 Privy 仪表盘中找到。
  6. 为 Web 推送通知生成 VAPID 密钥:
    将生成的密钥复制到您的 .env.local 文件中(替换步骤 5 中的占位值)。
  7. 运行应用: 开发模式:
    应用将在 http://localhost:3000 上可用。 生产模式: 完整的 PWA 功能(包括安装提示):

​
模板文件夹结构

​
更改应用名称

​
通知设置

要接收此应用的推送通知,您需要在浏览器和/或系统设置中启用通知:

​
浏览器设置

  1. 点击地址栏中的锁形图标 🔒
  2. 将 “Notifications” 设置为 “Allow”
  3. 或前往 Settings → Privacy and security → Site Settings → Notifications
  1. 点击地址栏中的盾牌图标 🛡️
  2. 如有需要,为此站点关闭 “Enhanced Tracking Protection”
  3. 在出现提示时允许通知
  4. 或前往 Settings → Privacy & Security → Permissions → Notifications
  1. 前往 Safari → Settings → Websites → Notifications
  2. 找到您的站点并将其设置为 “Allow”

​
系统设置

  1. System Preferences → Notifications & Focus
  2. 找到您的浏览器并确保通知已启用
  3. 在浏览器设置中勾选 “Allow notifications from websites”
  1. Settings → System → Notifications & actions
  2. 确保您的浏览器可以发送通知
  3. 检查浏览器通知设置
  1. Settings → Notifications → [您的浏览器]
  2. 启用 “Allow Notifications”
  3. 同时在浏览器设置中启用
  1. Settings → Apps → [您的浏览器] → Notifications
  2. 启用通知
  3. 检查浏览器通知权限

​
需要后端集成

SendNotification.tsx 需要后端实现:
  • 在用户订阅时 保存订阅数据(参见代码中的 TODO 注释)
  • 在用户取消订阅时 删除订阅数据
  • 实现 /notification 端点 以发送实际的推送通知
  • 使用 web-push 库 或类似方案进行服务器端通知投递

​
自定义通知内容

要自定义推送通知内容,请编辑 app/notification/route.ts ,并修改 sendNotification 调用中的 title、message、icon 及其他属性。

​
修改应用图标和启动画面

​
应用图标

将 public/icons/ 目录下的图标文件替换为您的自定义图标:
  • icon-512x512.png - 主应用图标(512×512px)
  • android-chrome-192x192.png - Android 图标(192×192px)
  • apple-touch-icon.png - iOS 主屏幕图标(180×180px)
同时更新 favicon:
  • public/favicon.ico - 浏览器 favicon
  • app/favicon.ico - Next.js 应用 favicon

​
启动画面

启动画面根据您的应用图标和在以下位置定义的主题颜色自动生成: public/manifest.json。要自定义:
  1. 在以下位置更新 theme_color 和 background_color: public/manifest.json
  2. 确保您的主图标(icon-512x512.png)代表您的品牌
  3. 运行 npm run build 以应用更改
使用 PWA Asset Generator 等工具从单张源图片生成所有所需的图标尺寸。

​
部署到 Vercel

​
使用 Vercel 仪表盘

  1. 连接您的仓库:
    • 将您的代码推送到 GitHub
    • 访问 vercel.com 并导入您的仓库
  2. 配置环境变量:
    • 在您的 Vercel 项目仪表盘,前往 Settings → Environment Variables
    • 添加与您的 .env.local 相同的变量:
  3. 部署:Vercel 将自动构建并部署您的应用
  4. 更新 Privy 设置:在您的 Privy 仪表盘中,将您的 Vercel 域名(例如 your-app.vercel.app)添加到允许的来源
PWA 功能(安装提示、离线支持、推送通知)会在 HTTPS 域名上(如 Vercel 部署)自动生效。

​
使用 Vercel CLI

或者,使用 Vercel CLI 部署:
  1. 安装 Vercel CLI:
  2. 登录 Vercel:
  3. 部署:
    按照提示配置您的项目。
  4. 添加环境变量:
    您也可以前往 Vercel 仪表盘在那里添加环境变量。
  5. 使用环境变量重新部署:

​
了解更多