跳转到内容

PWA 配置

PWA(Progressive Web App)让你的博客可以像原生应用一样被安装到用户的设备上,提供更好的访问体验。

启用 PWA 后,访客可以:

  • 将你的博客「安装」到手机主屏幕或电脑桌面
  • 获得类似原生应用的全屏浏览体验
  • 在离线状态下仍能访问已缓存的页面(取决于主题的 Service Worker 实现)
  1. 设置 中找到 PWA 配置区域
  2. 开启 启用 PWA 开关
  3. 配置以下信息:
配置项说明示例
应用名称安装后显示的完整名称我的技术博客
短名称空间不足时显示的缩写技术博客
描述应用的简要描述分享前端开发经验
主题色浏览器地址栏颜色#D4870E
背景色应用启动画面背景#FAFAF8
配置项选项说明
显示模式standalone隐藏浏览器地址栏(推荐)
fullscreen全屏显示
minimal-ui保留最少的浏览器控件
屏幕方向portrait竖屏
landscape横屏
  • 上传一张 512×512 像素的应用图标
  • Gridea Pro 会自动生成多种尺寸
  • 如果不上传,将使用站点头像作为默认图标
  • 支持图标的移除和重新上传
  1. 保存设置

启用 PWA 后,渲染时会自动生成:

  • web.manifest.json — Web App Manifest 文件,定义应用元数据
  • 多尺寸图标 — 从上传的 512×512 图标生成
  • Service Worker 配置 — 由主题的 Service Worker 模板决定缓存策略

PWA 配置保存在站点目录下的 config/pwa_setting.json 文件中。应用图标保存在 images/pwa-icon.png