PWA深入理解之Manifest

最新推荐文章于 2024-08-23 08:02:38 发布

沃师傅

最新推荐文章于 2024-08-23 08:02:38 发布

阅读量1.6k

点赞数

分类专栏：前端技术文章标签： PWA 前端 WEB

前端技术专栏收录该内容

8 篇文章 0 订阅

订阅专栏

3. Manifest

Manifest 是一种简单的 JSON 数据风格的配置文件，通过对其相应的属性进行配置，可以实现诸如自定义启动画面、打开 URL、设置界面颜色、设置桌面图标等功能。

使用 Manifest 可以实现的功能大致如下：

能够真实存在于用户主屏幕上
在 Android 上能够全屏启动，不显示地址栏
控制屏幕方向已获得最佳效果
定义启动画面，为站点定义主题
追踪应用是从主屏幕还是 URL 启动的

下面是一个 Manifest 文件示例：

{
    "short_name": "短名称",
    "name": "这是一个完整名称",
    "icons": [{
        "src": "app.png",
        "type": "image/png",
        "sizes": "144x144"
    }],
    "display": "standalone",
    "start_url": "index.html",
    "theme_color": "red",
    "background_color": "#333",
    "orientation": "portrait-primary"
}

具体说明如下：

name、short_name：指定了Web App的名称。short_name其实是该应用的一个简称。一般来说，当没有足够空间展示应用的name时，系统就会使用short_name。

start_url：这个属性指定了用户打开该 Web App 时加载的 URL。相对 URL 会相对于 Manifest。这里我们指定了 start_url 为 index.html，访问 index 文件。

display：控制了应用的显示模式，它有四个值可以选择：fullscreen 、standalone 、minimal-ui 和 browser

fullscreen：全屏显示，会尽可能将所有的显示区域都占满。
standalone：独立应用模式，这种模式下打开的应用有自己的启动图标，并且不会有浏览器的地址栏。因此看起来更像一个Native App。
minimal-ui：与 standalone 相比，该模式会多出地址栏。
browser：一般来说，会和正常使用浏览器打开样式一致。

orientation：控制 Web App 的方向。设置某些值会具有类似锁屏的效果（禁止旋转），例如例子中的 portrait-primary。具体的值如下：

landscape-primary：当视窗宽度大于高度时，当前应用处于“横屏”状态。
landscape-secondary：landscape-primary的180°方向。
landscape：根据屏幕的方向，自动横屏幕180°切换。
portrait-primary：当视窗宽度小于高度时，当前应用处于“竖屏”状态。
portrait-secondary：portrait-primary的180°方向。
portrait：根据屏幕方向，自动竖屏180°切换。
natural：根据不同平台的规则，显示为当前平台的0°方向。
any：任意方向切换。

icons、background_color：icons 用来指定应用的桌面图标。icons 本身是一个数组，每个元素包含三个属性：

sizes：图标的大小。通过指定大小，系统会选取最合适的图标展示在相应位置上。
src：图标的文件路径。注意相对路径是相对于 Manifest。
type：图标的图片类型。

background_color 是在应用的样式资源加载完毕前的默认背景，因此会展示在开屏界面。background_color 加上我们刚才定义的 icons 就组成了 Web App 打开时的“开屏图”。

theme_color：定义应用程序的默认主题颜色。这有时会影响操作系统显示应用程序的方式（例如，在 Android 的任务切换器上，主题颜色包围应用程序）。
此外，还可以在 meta 标签中设置 theme_color：<meta name="theme-color" content="#5eace0"/>

description：这个字段的含义非常简单，就是一段对该应用的描述。

定义好 Manifest 文件以后，我们就可以在我们的项目中引入该文件。只需要像引入外部 CSS 文件一样使用 link 标签引入即可。例如：

<link rel="manifest" href="./manifest.json">

最后，我们来看一个完整的示例。当前我们的项目结构如下：

根路径 /
    |
    |----manifest.json  // 清单文件
    |
    |----index.html
    |
    |----app.png  // 图标文件

index.html 代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入 Manifest 文件 -->
    <link rel="manifest" href="./manifest.json">
</head>
<body>
    <h1>Learning PWA</h1>
    <p>this service is running on Web Server for Chrome.</p>
</body>
</html>