PWA 配置
This content is not available in your language yet.
PWA(Progressive Web App)让你的博客可以像原生应用一样被安装到用户的设备上,提供更好的访问体验。
什么是 PWA
Section titled “什么是 PWA”启用 PWA 后,访客可以:
- 将你的博客「安装」到手机主屏幕或电脑桌面
- 获得类似原生应用的全屏浏览体验
- 在离线状态下仍能访问已缓存的页面(取决于主题的 Service Worker 实现)
开启 PWA
Section titled “开启 PWA”- 在 设置 中找到 PWA 配置区域
- 开启 启用 PWA 开关
- 配置以下信息:
| 配置项 | 说明 | 示例 |
|---|---|---|
| 应用名称 | 安装后显示的完整名称 | 我的技术博客 |
| 短名称 | 空间不足时显示的缩写 | 技术博客 |
| 描述 | 应用的简要描述 | 分享前端开发经验 |
| 主题色 | 浏览器地址栏颜色 | #D4870E |
| 背景色 | 应用启动画面背景 | #FAFAF8 |
| 配置项 | 选项 | 说明 |
|---|---|---|
| 显示模式 | standalone | 隐藏浏览器地址栏(推荐) |
fullscreen | 全屏显示 | |
minimal-ui | 保留最少的浏览器控件 | |
| 屏幕方向 | portrait | 竖屏 |
landscape | 横屏 |
- 上传一张 512×512 像素的应用图标
- Gridea Pro 会自动生成多种尺寸
- 如果不上传,将使用站点头像作为默认图标
- 支持图标的移除和重新上传
- 保存设置
启用 PWA 后,渲染时会自动生成:
- web.manifest.json — Web App Manifest 文件,定义应用元数据
- 多尺寸图标 — 从上传的 512×512 图标生成
- Service Worker 配置 — 由主题的 Service Worker 模板决定缓存策略
PWA 配置保存在站点目录下的 config/pwa_setting.json 文件中。应用图标保存在 images/pwa-icon.png。