【PWA学习与实践】(2) 使用Manifest，让你的WebApp更“Native”

《PWA学习与实践》系列文章已整理至 gitbook - PWA学习手册，文字内容已同步至 learning-pwa-ebook。转载请注明做者与出处。

本文是《PWA学习与实践》系列的第二篇文章。文中的代码均可以在learning-pwa的manifest分支上找到（git clone后注意切换到manifest分支）。

PWA做为时下最火热的技术概念之一，对提高Web应用的安全、性能和体验有着很大的意义，很是值得咱们去了解与学习。对PWA感兴趣的朋友欢迎关注《PWA学习与实践》系列文章。

1. 引言

咱们知道，在chrome（等一些现代浏览器）中，你能够将访问的网站添加到桌面，这样就会在桌面生成一个相似“快捷方式”的图标，当你点击该图标时，即可以快速访问该网站（Web App）。咱们以第一篇文章中的demo为例，其添加到桌面后以及从新打开时的状态以下：

然而，对于PWA来讲，有一些重要的特性：

• Web App能够被添加到桌面并有它本身的应用图标；
• 同时，从桌面开启时，会和原生app同样有它本身的“开屏图”；
• 更进一步的，这个Web App在的样子几乎和原生应用同样——没有浏览器的地址栏、工具条，彷佛和Native App同样运行在一个独立的容器中。

就像下面这样：

接下来，咱们会基于该系列——《PWA技术学习与实践》的前一篇《2018，开始你的PWA学习之旅》 中所说起的一个普通Web App的demo来进行改造，来实现PWA的这一效果。或者直接从github clone learning-pwa（https://github.com/alienzhou/...）这个仓库也能够。切换到manifest分支，便可看到本文的最后成果。

2. Web App Manifest

Manifest是一个JSON格式的文件，你能够把它理解为一个指定了Web App桌面图标、名称、开屏图标、运行模式等一系列资源的一个清单。

manifest 的目的是将Web应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验。 —— MDN

咱们来看一下，learning-pwa中的manifest.json文件内容

{
    "name": "图书搜索",
    "short_name": "书查",
    "start_url": "/",
    "display": "standalone",
    "background_color": "#333",
    "description": "一个搜索图书的小WebAPP（基于豆瓣开放接口）",
    "orientation": "portrait-primary",
    "theme_color": "#5eace0",
    "icons": [{
        "src": "img/icons/book-32.png",
        "sizes": "32x32",
        "type": "image/png"
    }, {
        "src": "img/icons/book-72.png",
        "sizes": "72x72",
        "type": "image/png"
    }, {
        "src": "img/icons/book-128.png",
        "sizes": "128x128",
        "type": "image/png"
    }, {
        "src": "img/icons/book-144.png",
        "sizes": "144x144",
        "type": "image/png"
    }, {
        "src": "img/icons/book-192.png",
        "sizes": "192x192",
        "type": "image/png"
    }, {
        "src": "img/icons/book-256.png",
        "sizes": "256x256",
        "type": "image/png"
    }, {
        "src": "img/icons/book-512.png",
        "sizes": "512x512",
        "type": "image/png"
    }]
}

能够看出，上面的JSON配置文件很是直观，经过声明各个属性的值，便可改造咱们的Web App。那么下面就针对每一个具体值进行简单的介绍。

2.1. name, short_name

指定了Web App的名称。short_name实际上是该应用的一个简称。通常来讲，当没有足够空间展现应用的name时，系统就会使用short_name。能够看到本文的例子中，图书搜索这个应用在桌面上展现的名称就是short_name书查。

2.2. start_url

这个属性指定了用户打开该Web App时加载的URL。相对URL会相对于manifest。这里咱们指定了start_url为/，访问根目录。

2.3. display

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

• fullscreen ：全屏显示，会尽量将全部的显示区域都占满；
• standalone ：独立应用模式，这种模式下打开的应用有本身的启动图标，而且不会有浏览器的地址栏。所以看起来更像一个Native App；
• minimal-ui：与standalone 相比，该模式会多出地址栏；
• browser ：通常来讲，会和正常使用浏览器打开样式一致。

让咱们来看下这四种模式的差别：

固然，不一样的系统所表现出的具体样式也不彻底同样。就像示例中的虚拟按键在fullscreen 模式下会默认隐藏。

2.4. orientation

控制Web App的方向。设置某些值会具备相似锁屏的效果（禁止旋转），例如例子中的portrait-primary。具体的值包括：any, natural, landscape, landscape-primary, landscape-secondary, portrait, portrait-primary, portrait-secondary。

2.5. icons， background_color

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

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

须要指出的是，我一直提的“开屏图”实际上是背景颜色+图标的展现模式（并不会设置一张所谓的开屏图）。background_color是在应用的样式资源为加载完毕前的默认背景，所以会展现在开屏界面。background_color加上咱们刚才定义的icons就组成了Web App打开时的“开屏图”。

2.6. theme_color

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

2.7. description

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

3. 使用Manifest

建立好manifest文件后，下一步就是须要知道如何能让咱们的Web App使用它——很是简单，只须要在head中添加一个link标签：

<!-- 在index.html中添加如下meta标签 -->
<link rel="manifest" href="/manifest.json">

这样，在android上咱们使用chrome将应用添加到桌面，就会拥有文章开头处的PWA效果。你可在这里验证manifest.json的内容：Web Manifest Validator

若是你看到这里，那么恭喜你，已经知道如何让咱们的Web App看起来更像一个独立的Native App。是否是很是简单？

4. iOS, Windows?

上面的一切看似美好，然而真的如此么？

到目前为止，咱们的工做都很是顺利：建立manifest.json，添加meta标签，而后把咱们的Web App添加到桌面。然而，若是咱们在iPhone上访问咱们的站点，而后“添加到主屏幕”，你会发现——一切都失效了！是的，你没有看错，一切都回到了原样。

若是你看过caniuse上manifest的兼容性，那会令你更加头疼。可是，也没必要太过忧伤，在iOS与windows上，咱们有其余的方式

5. iOS（safari）中的处理方式

safari虽然不支持Web App Manifest，可是它有本身的一些head标签来定义相应的资源与展现形式：

• apple-touch-icon：桌面图标，经过在head中添加<link rel="apple-touch-icon" href="your_icon.png">便可。其中还能够添加sizes属性，来指示系统使用在各种平台（iphone、ipad…）中使用最合适的图标
• apple-mobile-web-app-title：应用的标题。注意，这里须要使用meta标签<meta name="apple-mobile-web-app-title" content="AppTitle">
• apple-mobile-web-app-capable：相似于manifest中的display的功能，经过设置为yes能够进入standalone模式，一样也是meta标签<meta name="apple-mobile-web-app-capable" content="yes">
• apple-mobile-web-app-status-bar-style：这会改变iOS移动设备的状态栏的样式，而且只有在standalone模式中才会有效果。<meta name="apple-mobile-web-app-status-bar-style" content="black">，不过在iPhoneX上black会致使状态栏不显示任何东西。

下面是learning-pwa项目中的相关设置

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="图书搜索">
<link rel="apple-touch-icon" href="img/icons/book-256.png">

6. IE中的处理方式

与Safari相似，IE中也有本身的meta标签来指示相应的资源。其中比较重要的有：

• application-name：指明了app的名称
• msapplication-TileColor：指明了“tile”的背景颜色
• msapplication-xxxlogo：不一样大小的“tile”所使用的图标，包括这几种：msapplication-square70x70logo, msapplication-square150x150logo, msapplication-wide310x150logo, msapplication-square310x310logo

下面是learning-pwa项目中的相关设置，其中图标的设置为了方便就复用了已有的图标文件

<meta name="application-name" content="图书搜索" />
<meta name="msapplication-TileColor" content="#222">
<meta name="msapplication-square70x70logo" content="img/icons/book-72.png" />
<meta name="msapplication-square150x150logo" content="img/icons/book-144.png" />
<meta name="msapplication-square310x310logo" content="img/icons/book-256.png" />

写在最后

本文主要探索如何让被添加到桌面的Web App具备更贴近Native App的使用体验（桌面图标、开屏页、shell…）。

所以，咱们使用了Web App Manifest。经过咱们添加manifest文件，并在HTML中设置相应的meta标签来使用它便可；而在safari与ie中，能够经过一些特有的meta、link标签来实现。是否是很简单，很方便？这就使得咱们可以以很低成本的改动咱们Web App。这也就是PWA概念的理念之一：你能够渐进式地提升Web App的能力，同时在兼容性上，也会根据不一样的浏览器的支持度提供渐进加强的能力。

好了，这篇文章的内容就到这里了。但愿你可以喜欢！同时，想要了解PWA背后的更多相关技术，欢迎关注《精益前端》专栏。

《PWA学习与实践》系列文章

• 第一篇：2018，开始你的PWA学习之旅
• 第二篇：10分钟学会使用Manifest，让你的WebApp更“Native”（本文）

参考资料

• Web App Manifest（MDN）
• Configuring Web Applications（Safari）
• Pinned site enhancements （Internet Explorer）)
• caniuse manifest
• Web Manifest Validator
• Address Bar Matches Brand Colors
• demo代码地址：learning-pwa/tree/manifest