跳到内容
DevLab

📱 Web App Manifest 生成器

通过表单创建 PWA 所需的 manifest.json。包含 name / start_url / display / theme_color、多尺寸 icons 表、shortcuts、share_target、protocol_handlers,同时输出 HTML link 标签。

完全免费 无需注册 浏览器内完成 5 种语言 深色模式

🔒 关于隐私

基本信息

图标 (尺寸和 src)

勾选的尺寸将包含在 icons 数组中。

应用快捷方式 (最多 4)


    
    






    
📖 常见的坑


        
用表单生成 PWA 所需的 manifest.json。除 name / start_url / display / theme_color 之外，还支持多尺寸 icons、shortcuts、share_target、protocol_handlers，并同时输出 HTML 的 link 标签。处理全部在浏览器内完成。但仅有 manifest 是无法安装应用的——要被判定为可安装，必须同时具备 HTTPS、Service Worker、必填字段以及规定尺寸的图标。「放了 manifest 却不出现安装按钮」，原因往往在 manifest 之外。

    
        

        

            
                

                    情形
                    会发生什么
                    怎么处理
                

            
            
                                

                    可安装的条件靠 manifest 一个是满足不了的
                    浏览器要主动提示安装，必须同时满足多个条件：HTTPS（或 localhost）、已注册且带 fetch 事件处理的 Service Worker、name 或 short_name、start_url、display 为 standalone / fullscreen / minimal-ui 之一，以及 192px 与 512px 的图标。缺一项则不会报错，只是按钮永远不出现——不告诉你缺了什么，才是最难的地方。此外，iOS 上的 Safari 会忽略 manifest 的很多内容——添加到主屏幕时的图标取自 apple-touch-icon，显示模式由 apple-mobile-web-app-capable 决定。
                    不要靠猜，请打开 Chrome DevTools 的 Application > Manifest。它会用具体的句子列出尚未满足的条件——看不看这个界面，解决时间能差好几个小时。Lighthouse 的 PWA 审计也会机械地执行同样的判定。Service Worker 仅仅「已注册」是不够的——必须确实存在 fetch 事件处理器，空的 sw.js 并不满足条件。若同时面向 iOS，请在 manifest 之外另行往 HTML 里加上 apple-touch-icon（180×180）与 apple-mobile-web-app-title——只整备 manifest，在 iOS 上不会有任何反映。
                

                                

                    start_url 与 scope 的相对解析
                    这两者是相对于 manifest 文件所在位置解析的，而不是相对站点根目录。manifest 放在 /static/manifest.json 时，写 "start_url": "index.html"，启动 URL 就变成 /static/index.html——若它不存在，就会出现「装是装上了，打开却是 404」的状态。scope 的影响更广，它决定哪些 URL 会留在应用窗口内——点到范围之外的链接就会被弹回浏览器。省略 scope 时的默认值同样是 manifest 的位置，所以放在 /static/ 又什么都不写，整个站点主体就都落在范围之外了。而且如果 start_url 落在 scope 之外，应用根本不会被判定为可安装。
                    两者都请写成带前导斜杠的绝对路径——"start_url": "/"、"scope": "/"。仅此一条，相对解析的问题就全部消失了。若只有站点的一部分是 PWA，请用 "scope": "/app/" 明确范围，并确认 start_url 落在该范围之内。给 start_url 加上查询参数，可以让分析工具区分出「从已安装应用启动」——例如 "/?source=pwa"。manifest 本身放在哪里都可以，但 <link rel="manifest"> 的 href 必须与实际路径一致——manifest 返回 404 时，浏览器只是默默忽略，什么也不显示。
                

                                

                    图标在 Android 上被裁掉（maskable）
                    Android 的启动器会把图标裁切成圆形或圆角方形。因此，只准备 "purpose": "any" 的图标，四个角就会被切掉——如果 logo 画满了整个方框，边缘的字就会消失。为避免这一点的声明是 "purpose": "maskable"，可遮罩图标应以中央约 40% 作为安全区来设计，其外部按「可能被裁掉」来预设。然而只准备 maskable 同样是错的——在不做遮罩的环境里（桌面任务栏、启动闪屏），它会显示成一个四周留白很大的小 logo。只提供其中一种，必定会在某处出问题，这正是该规范的要点。
                    请把两种图标作为各自独立的条目都登记上。即便同为 512×512，也要把满幅的那份写成 "purpose": "any"，把留白的那份写成 "purpose": "maskable"并列——你也可以在单个条目上写 "any maskable"，但那样图案就必须同时满足两边的要求。验证可以在 Chrome DevTools 的 Application > Manifest 中进行——它会显示施加遮罩后的预览，当场就能看到裁切效果。尺寸至少准备 192 与 512 两种，并使用 PNG 而非 SVG——SVG 的支持程度因环境而异。
                

                            
        

    

    
        
manifest 是会被缓存的。改动它不会立刻反映到已经安装了应用的设备上——换了图标或名称却还是旧的，多半就是这个原因。何时刷新由浏览器决定，因此开发期间请从 DevTools 的 Application > Manifest 触发更新，并通过卸载再安装来确认。另外，manifest.json 请以 Content-Type: application/manifest+json 提供——服务器若返回 text/plain，有些浏览器不会加载它。设计上还有一点：display: "standalone" 会去掉浏览器界面，返回按钮与地址栏也一并消失——如果应用内没有提供返回手段，用户就会走进死胡同。指向外部站点的链接位于 scope 之外，会跳到浏览器，但未必回得来。最后，做成了 PWA 并不等于会被安装——关键在于你是否给出了引导安装的路径，以及与之相称的好处（离线可用、通知、启动更快）。

    









    
📖 使用方法

    
    
                
  1. 
            1
            
    
                
    填写基本信息
    
                
    输入 name、short_name、start_url、display、theme_color 等。
    
            
    
        
    2. 
                
  2. 
            2
            
    
                
    配置图标和快捷方式
    
                
    勾选要使用的尺寸,设置前缀和扩展名,可添加最多 4 个快捷方式。
    
            
    
        
    3. 
                
  3. 
            3
            
    
                
    生成并部署
    
                
    点击生成 JSON,保存 manifest.json,并把 HTML 片段粘贴到 head 中。
    
            
    
        
    4. 
            






    
❓ 常见问题

    

                

            
                被识别为 PWA 的最低要求是什么?
                
            
            
需要 name、start_url、display、192x192 与 512x512 图标、HTTPS 与 service worker。

        

                

            
                需要 maskable 图标吗?
                
            
            
强烈推荐用于 Android 自适应图标。重要图案放在中心 80% 区域内。

        

                

            
                manifest 更新未生效
                
            
            
浏览器会强缓存。请缩短 Cache-Control 或使用查询字符串。

        

            






    

        
🔗 相关工具

        
    






    

        
            🐛 此工具出现问题了吗？
            
        

        

            免费、无需注册。仅提供复现步骤也有帮助。报告将直接发送给运营者并用于改进。
        


        

                        

            

                
                
            


            

                
                
                

                    ※ 为复现问题,浏览器信息 (UA / 屏幕 / 语言 / URL) 将自动发送