IndieShow 图标IndieShow 使用文档

PWA 功能

Progressive Web App 功能配置和使用指南

PWA 功能配置

简介

Progressive Web App (PWA) 是一种可以提供类似原生应用程序体验的网络应用程序。IndieShow 通过 site.webmanifest 配置提供了 PWA 支持，让您的网站可以：

  • 📱 安装到用户的主屏幕
  • 🚀 提供快速加载体验
  • 🔄 自动更新内容
  • 📊 改善用户留存率

配置说明

Web App Manifest 配置

IndieShow 使用 public/site.webmanifest 文件来配置 PWA 功能：

site.webmanifest
{
  "name": "IndieShow",
  "short_name": "IndieShow",
  "description": "IndieShow 是一个为独立开发者快速构建产品展示官网的 Nuxt 3 模板，无需代码，告别复杂开发，让您专注产品创造。",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0EA5E9",
  "orientation": "portrait-primary",
  "categories": ["business", "productivity"],
  "lang": "en",
  "dir": "ltr",
  "prefer_related_applications": false,
  "icons": [
    {
      "src": "/icons/manifest/web-app-manifest-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "any maskable"
    },
    {
      "src": "/icons/manifest/web-app-manifest-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any maskable"
    }
  ]
}

配置项说明

配置项说明示例值
name应用完整名称"IndieShow"
short_name应用简称（用于主屏幕）"IndieShow"
description应用描述"IndieShow 是一个为独立开发者..."
start_url启动 URL"/"
display显示模式"standalone"
background_color启动背景色"#ffffff"
theme_color主题色"#0EA5E9"
orientation屏幕方向"portrait-primary"
categories应用类别["business", "productivity"]
lang默认语言"en"
dir文字方向"ltr"

图标配置

PWA 需要提供不同尺寸的图标，IndieShow 使用两种主要尺寸：

  • 192x192 - 用于主屏幕图标
  • 512x512 - 用于启动画面和应用商店

图标文件应放置在 public/icons/manifest/ 目录下：

  • web-app-manifest-192x192.png
  • web-app-manifest-512x512.png

自定义配置

1. 修改应用信息

要自定义您的应用信息，编辑 site.webmanifest 文件：

site.webmanifest
{
  "name": "您的应用名称",
  "short_name": "简称",
  "description": "您的应用描述",
  // ... 其他配置保持不变
}

2. 更换图标

  1. 准备您的应用图标，确保尺寸为 192x192 和 512x512
  2. 将图标文件放入 public/icons/manifest/ 目录
  3. 确保文件名与 site.webmanifest 中的配置匹配

3. 自定义主题色

修改 theme_color 和 background_color 以匹配您的品牌：

site.webmanifest
{
  // ... 其他配置
  "background_color": "#您的背景色",
  "theme_color": "#您的主题色"
}

最佳实践

  1. 图标设计

    • 使用清晰、识别度高的图标
    • 确保在不同背景色下都清晰可见
    • 提供足够大的安全边距

  2. 性能优化

    • 优化图标文件大小
    • 使用 WebP 格式的图标（如果需要）
    • 确保图标加载迅速

  3. 测试验证

    • 在不同设备上测试安装体验
    • 验证离线访问功能
    • 检查图标在不同平台的显示效果

常见问题

相关资源

下一步

主题配置

自定义网站的主题样式和外观

新增页面

学习如何添加新的页面到网站

IDE 配置

配置开发环境获得最佳开发体验

代码规范

配置项目的代码规范和格式化工具

目录