无需登录 数据私有 本地保存

Web App Manifest生成器 - PWA清单文件配置

9
0
0
0
✓ 已复制到剪贴板

PWA Manifest 生成器

可视化配置 Web App Manifest，实时生成 manifest.json

基本信息
完整的应用名称，安装时显示
主屏幕图标下方显示，建议≤12字符
用于跨域识别同一PWA，可选字段
URL 配置
应用启动时加载的URL，通常为"/"
限定PWA的导航范围，需包含start_url
显示设置
颜色设置
图标管理 (icons)

配置PWA应用图标，至少需要一个192x192和一个512x512的图标

图标路径 (src) 尺寸 (sizes) 类型 (type) 用途 (purpose)
分类与其它
多个分类用英文逗号分隔
business education entertainment finance games health lifestyle music news productivity shopping social sports travel utilities
实时预览
JSON 

                

                    
                    
                

                
修改左侧配置，预览实时更新

            

        

    


    
    

        
常见问题与知识点

        

            

                

                    
                

                

                    

                        Web App Manifest 是一个 JSON 格式的配置文件（通常命名为 manifest.json），它提供了关于 Web 应用的基本信息（如名称、图标、主题颜色等）。它的核心作用是让 Web 应用能够以类似原生应用的方式安装到用户设备上，实现 PWA（渐进式Web应用）的关键一步。通过 manifest，浏览器知道如何展示你的应用——包括启动画面、主屏幕图标、全屏模式等，显著提升用户体验和留存率。
                    

                

            

            

                

                    
                

                

                    

                        通常将 manifest.json 放在网站的根目录下，然后在所有页面的 <head> 中添加：
<link rel="manifest" href="/manifest.json">
也可以放在子目录中，但需要确保 href 路径正确。此外，manifest 中的 scope 和 start_url 应与实际部署路径保持一致，否则可能导致安装失败。
                    

                

            

            

                

                    
                

                

                    

                        standalone（推荐）：应用在独立窗口中运行，隐藏浏览器地址栏和导航按钮，看起来像原生应用。

                        fullscreen：完全全屏，没有任何系统UI，适合游戏或沉浸式体验。

                        minimal-ui：类似standalone但保留最小化的浏览器控件（后退/刷新按钮）。

                        browser：在普通浏览器标签页中打开，没有特殊的PWA体验。

                        对于大多数PWA，推荐使用 standalone，它在用户体验和功能性之间取得了最佳平衡。
                    

                

            

            

                

                    
                

                

                    

                        Google 推荐至少提供 192x192 和 512x512 两个尺寸的图标。完整的推荐尺寸列表包括：72x72、96x96、128x128、144x144、152x152、192x192、384x384、512x512。

                        图标格式建议使用 PNG（支持透明背景），也可以使用 WebP 或 SVG。建议为图标设置 purpose: "any maskable"，其中 maskable 图标会适配Android的圆形/圆角图标裁剪。

                        512x512 的图标会在安装时用于启动画面和系统设置中的显示，务必保证清晰。
                    

                

            

            

                

                    
                

                

                    

                        start_url：用户点击主屏幕图标时打开的页面URL，通常是 / 或 /index.html。

                        scope：定义了PWA的"领地"范围。用户在PWA窗口内只能导航到scope内的页面，超出范围的链接会在外部浏览器中打开。

                        重要规则：start_url 必须在 scope 范围内！例如 scope="/app/" 时，start_url 必须是 "/app/" 下的路径。如果不设置 scope，浏览器会自动使用 manifest.json 所在的目录作为默认scope。
                    

                

            

            

                

                    
                

                

                    

                        theme_color：影响浏览器工具栏、地址栏的颜色（在Android Chrome中），以及PWA窗口的标题栏颜色。它会在应用加载后立即生效。

                        background_color：PWA启动画面（Splash Screen）的背景颜色，在应用完全加载前显示。设置与主页背景相近的颜色可以减少视觉闪烁，提供更平滑的启动体验。

                        两者配合使用可以打造品牌一致的视觉效果，建议选择与品牌主色协调的配色方案。
                    

                

            

            

                

                    
                

                

                    

                        有多种方式验证：

                        1. Chrome DevTools：打开F12 → Application → Manifest 面板，可以直接查看和诊断 Manifest。

                        2. Lighthouse：Chrome内置的审计工具，会对PWA进行评分和建议。

                        3. 在线验证器：如 PWABuilder、Manifest Validator 等在线工具。

                        4. 手动检查：确保JSON格式正确（可用JSONLint验证），所有必填字段完整，图标路径可访问。

                        使用本工具生成的Manifest是标准JSON格式，可直接通过以上任一方式验证。
                    

                

            

            

                

                    
                

                

                    

                        间接有帮助。Manifest本身不是搜索引擎排名因子，但PWA带来的体验提升会间接影响SEO：

                        • 更快的加载速度和离线可用性降低跳出率

                        • 可安装性增加用户回访和停留时间

                        • 移动端体验优化符合Google的移动优先索引策略

                        • 低质量的网站即使有Manifest也不会获得排名优势

                        建议将Manifest与Service Worker配合使用，构建完整的PWA体验，这对于Core Web Vitals指标有积极影响。
                    

                

            

            

                

                    
                

                

                    

                        测试步骤：

                        1. 将网站部署到 HTTPS 环境（localhost也可用于测试）。

                        2. 确保 manifest.json 通过 <link rel="manifest"> 正确引用。

                        3. 在 Chrome 中打开网站，观察地址栏右侧是否出现安装图标（⊕或↓）。

                        4. 打开 DevTools → Application → Manifest，确认所有字段正确识别。

                        5. 在Android设备上使用Chrome访问，应出现"添加到主屏幕"的提示。

                        注意：部分浏览器对PWA的支持程度不同，iOS Safari从11.3开始支持Manifest但体验略有差异。
                    

                

            

            

                

                    
                

                

                    

                        name：完整应用名称，会在安装确认弹窗、启动画面和应用管理设置中显示。建议不超过45个字符。

                        short_name：主屏幕图标下方显示的名称，由于空间有限，建议控制在 12个字符以内。如果未提供short_name，浏览器可能会截断name来显示。

                        例如：name="Google Keep - 笔记和清单"，short_name="Keep"。这样既保持了品牌完整性，又确保了主屏幕显示的美观。
                    

                

            

        

    









 🔧 相关工具