[TOC] # web-app-manifest [网络应用清单](https://developer.mozilla.org/zh-CN/docs/Web/Manifest)是一个 JSON 文件，它告诉浏览器您的Web应用程序以及在用户移动设备或桌面上“安装”时它应该如何表现。 Chrome需要提供清单才能显示“添加到主屏幕”提示。 典型的清单文件包括有关应用程序名称，应使用的图标，启动时应启动的start_url等信息。 ## 创建清单 PWA的完整manifest.json文件 ~~~ { "short_name": "Maps", "name": "Google Maps", "icons": [ { "src": "/images/icons-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/images/icons-512.png", "type": "image/png", "sizes": "512x512" } ], "start_url": "/maps/?source=pwa", "background_color": "#3367D6", "display": "standalone", "scope": "/maps/", "theme_color": "#3367D6" } ~~~ > 注意：请参阅[添加到主屏幕标准](https://developers.google.com/web/fundamentals/app-install-banners/#criteria)，了解显示添加到主屏幕提示所需的特定属性。 <br> ## 告诉浏览器您的清单 创建清单后，为包含Web应用程序的所有页面添加 link标签： ~~~ <link rel="manifest" href="/manifest.json"> ~~~ <br> ## 清单属性 ### short_name 和/或 name 您必须至少提供 `short_name`或 `name` 属性。 如果两者都提供，则在用户的主屏幕，启动器或其他可能空间有限的地方使用 `short_name`。 `name` 用于应用安装提示。 ``` "short_name": "Maps", "name": "Google Maps" ``` ### icons 当用户将您的站点添加到其主屏幕时，您可以定义一组供浏览器使用的图标。 这些图标用于主屏幕，应用程序启动器，任务切换器，启动画面等位置。 icons是一个图像对象数组，每个对象应包括src，一个sizes属性和图像类型。 ``` "icons": [ { "src": "/images/icons-192.png", "type": "image/png", "sizes": "192x192" }, { "src": "/images/icons-512.png", "type": "image/png", "sizes": "512x512" } ] ``` > 成功：包括192x192像素图标和512x512像素图标。 Chrome会自动缩放设备的图标。 如果您希望缩放自己的图标并将其调整为像素完美，请以48dp的增量提供图标。 ### start_url `start_url` 告诉浏览器应用程序在启动时应该从哪里开始，并阻止应用程序启动用户在将应用添加到主屏幕时所处的页面。 您的 `start_url` 应该将用户直接引导到您的应用中，而不是产品目标网页。 想一想用户打开您的应用后想要做什么，并将它们放在那里。 ``` "start_url": "/?utm_source=a2hs" ``` > 成功：在start_url的末尾添加一个查询字符串，以跟踪您的应用启动的频率。 ### background_color 首次启动应用程序时，会在启动屏幕上使用background_color属性。 ### display 您可以自定义启动应用时显示的浏览器UI。例如，您可以隐藏地址栏和浏览器边。或者游戏可能想要完全全屏。 ~~~ "display": "standalone" ~~~ **参数** | 值 | 描述 | |---|---| | fullscreen | 在没有任何浏览器UI的情况下打开Web应用程序，占用整个可用的显示区域。 | | standalone | 打开Web应用程序，使其外观和感觉就像一个独立的本机应用程序。 该应用程序在自己的窗口中运行，与浏览器分开，并隐藏标准浏览器UI元素，如URL栏等。 | | minimal-ui | **Chrome不支持** 该模式类似于全屏，但为用户提供了一些访问用于控制导航（即，后退，前进，重新加载等）的最小UI元素集的方法。 | | browser | 标准的浏览器体验。 | > 成功：要显示**“添加到主屏幕提示”**，必须将显示设置为 **`standalone`** 。 ### orientation 您可以强制执行特定的方向，这对于仅在一个方向上工作的应用程序（例如游戏）有利。 有选择地使用它。 用户更喜欢选择方向。 ``` "orientation": "landscape" ``` ### scope 定义此Web应用程序的应用程序上下文的导航范围。 这基本上限制了manifest可以查看的网页。 如果用户在范围之外浏览应用程序，则返回到正常的网页。start_url必须位于scope内。 ~~~ "scope": "/maps/" ~~~ 其他一些提示： * 如果您没有在清单中包含范围，则默认隐含范围是您的Web应用程序清单所服务的目录。 * scope属性可以是相对路径（../），也可以是任何更高级别的路径（/），它可以增加Web应用程序中导航的覆盖范围。 * start_url必须在范围内。 * start_url相对于scope属性中定义的路径。 * 以/开头的start_url将始终是原点的根。 ### theme_color theme_color设置工具栏和任务切换器的颜色。 ``` "theme_color": "#3367D6" ``` > 成功：theme_color应与document head中指定的meta theme颜色匹配。 <br> ## 启动画面 当您的应用首次启动时，浏览器可能需要一段时间才能启动，然后初始内容将开始呈现。Chrome在首次绘制前显示启动画面， 而不是像应用程序那样向用户显示白色屏幕。 Chrome会自动从清单属性创建启动画面，包括： * name * background_color * icons `background_color`应与加载页面的颜色相同，以提供从初始屏幕到应用程序的平滑过渡。 ### 用于启动画面的图标 Chrome会选择与该设备的128dp图标非常匹配的图标。 128dp是启动画面上图像的理想尺寸，意味着不会对图像应用缩放。 同样，在大多数情况下，提供192px和512px图标就足够了，但您可以根据需要提供其他图标。  ## 测试清单 要验证清单是否设置正确，您可以使用Chrome DevTools的 **Application** 面板中的 **Manifest** 选项卡。  如果您想要一种自动化方法来验证您的网络应用清单，请查看Lighthouse。 Lighthouse是一款网络应用审核工具，可作为Chrome扩展程序或NPM模块运行。 您向Lighthouse提供URL，它会针对该页面运行一系列审核，然后在报告中显示结果。 # 参考资料 [网络应用清单](https://developers.google.com/web/fundamentals/web-app-manifest/)