必须在html的中用引入根目录下的manifest.json文件，该文件需包含name、short_name、start_url、display和icons（192×192与512×512 png）等必需字段，且服务器须返回content-type: application/manifest+json。
配置 Web App Manifest 是让网页具备 PWA 能力的关键一步，核心是提供一个符合规范的 JSON 文件，并在 HTML 中正确引用它。
创建 manifest.json 文件
在项目根目录（或 Next.js 的 app/ 目录下）新建 manifest.json（或 manifest.ts），内容需包含以下必要字段：
- name：应用全称，用于安装横幅和系统提示
- short_name：简短名称，用于主屏幕图标下方文字（建议不超过12字符）
- start_url：用户点击图标后打开的相对路径，如 / 或 /index.html
- display：设为 "standalone"（推荐）或 "fullscreen"，隐藏浏览器地址栏，获得原生感
- theme_color 和 background_color：分别控制顶部状态栏和启动画面背景色
- icons：至少提供两个尺寸——192×192（Android 主屏幕）和 512×512（Chrome 安装横幅），格式为 PNG，路径需可公开访问
在 HTML 中正确引入
确保在所有页面的 中加入引用标签，并搭配 viewport 和 theme-color 元标签提升兼容性：
Java JDK 25
下载
Java JDK 25 来自 OpenJDK 官方归档，版本为 JDK 25，本条下载地址已指向官方 Windows x64 zip 安装包直链，适合调试旧项目或兼容旧版 Java 运行环境。
- 添加 （路径必须与文件实际位置一致）
- 设置
- 可选但推荐：，与 manifest 中 theme_color 保持一致
图标准备与路径注意事项
图标文件应放在 public/（Vite/Next.js）或网站根目录（传统项目）下，路径需与 manifest 中 src 字段完全匹配：
- 例如 manifest 中写 "src": "/icon-192x192.png"，则文件必须可通过 https://yourdomain.com/icon-192x192.png 直接访问
- 建议使用 RealFaviconGenerator 一键生成全套图标（含 Apple Touch Icon、Windows 图标等）
- 避免使用相对路径如 "./icons/xxx.png"，优先用根路径 "/icons/xxx.png"
验证与调试技巧
配置完成后，在 Chrome DevTools 的 Application > Manifest 标签页可查看解析结果：
- 若显示 “Manifest not found”，检查路径是否拼写错误、服务器是否返回 404 或 MIME 类型是否为 application/manifest+json
- 若图标不显示，右键点击 src 地址尝试单独打开，确认图片可访问且尺寸准确
- 使用 Lighthouse 工具审计 PWA 合规性，它会明确提示 manifest 缺失或字段不合规项
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
