《PWA学习与实践》系列文章已整理成gitbook-PWA学习手册，正文内容已同步至learning-pwa-ebook。转载请注明作者和出处。本文是《PWA学习与实践》系列的第二篇。本文代码可以在learning-pwa的manifest分支找到（gitclone后注意切换到manifest分支）。PWA作为时下最热门的技术概念之一，对于提高Web应用的安全性、性能和体验具有重要意义，非常值得我们去了解和学习。欢迎对PWA感兴趣的朋友关注《PWA学习与实践》系列文章。一、简介我们知道，在chrome（以及其他一些现代浏览器）中，可以将访问过的网站添加到桌面，这会在桌面上生成一个类似于“快捷方式”的图标。当您点击该图标时，将可以快速访问该网站（WebApp）。我们以第一篇文章中的demo为例。添加到桌面后，重新打开时，状态如下：但是，对于PWA来说，有一些重要的特性：WebApp可以添加到桌面，并且有自己的应用程序图标；同时，从桌面打开时，它会像原生应用一样拥有自己的“打开屏幕图像”；此外，这个WebApp看起来和原生应用几乎一样——没有浏览器的地址栏和工具条，它似乎像NativeApp一样运行在一个单独的容器中。是这样的：接下来，我们将在本系列上一篇《2018，开始你的PWA学习之旅》中提到的一个普通WebApp的demo的基础上进行改造，实现PWA的这种效果。或者直接从github的仓库clonelearning-pwa（https://github.com/alienzhou/...）。切换到manifest分支可以看到本文的最终结果。2.WebAppManifestManifest是一个JSON格式的文件。你可以理解为一个列表，指定了WebApp桌面图标、名称、开屏图标、运行模式等一系列资源。清单的目的是将Web应用程序安装到设备的主屏幕，为用户提供更快的访问和更丰富的体验。——MDN看一下learning-pwa中manifest.json文件的内容{"name":"BookSearch","short_name":"BookSearch","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配置文件非常直观，通过声明每个属性的值，我们就可以改造我们的WebApp。然后我们会执行具体的取值对每个简单介绍一下。2.1.name，short_name指定WebApp的名称，short_name其实是application的缩写，一般来说，当没有足够的空间显示应用程序的名称时，系统会使用short_name，可以看这篇文章中的例子，在桌面上显示的BookSearchapp的名字是short_name书茶2.2.start_url属性指定了用户打开WebApp时加载的URL，相对URL将会相对于manifest，这里我们指定start_url为/，访问根目录2.3.displaydisplay控制应用的显示方式，它有四个值可以选择：fullscreen、standalone、minimal-ui和browser。fullscreen：全屏显示，会尽可能填满所有显示区域；standalone:独立应用模式，该模式下打开的应用有自己的启动图标，不会有浏览器的地址栏。因此，它看起来更像是一个NativeApp；minimal-ui：与standalone相比，这种模式会更开放地址栏；浏览器：一般来说，会以和普通浏览器一样的风格打开。下面我们来看看这四种模式的区别：当然，不同系统显示的具体风格也不完全相同。Like示例中的虚拟按钮将在全屏模式下默认隐藏。2.4.orientation控制Web应用程序的方向。设置一定的值会有锁屏效果（不旋转），比如例子中的portrait-primary。具体值包括：any、natural、landscape、landscape-primary、landscape-secondary、portrait、portrait-primary、portrait-secondary。2.5.icons,background_coloricons用于指定应用程序的桌面图标。icons本身是一个数组，每个元素包含三个属性：sizes：图标的大小。通过指定大小，系统会选择最合适的图标显示在相应的位置。src：图标的文件路径。请注意，相对路径是相对于清单的。type：图标的图像类型。需要指出的是，我一直说的“开屏图”其实是背景色+图标的显示方式（并没有设置所谓的开屏图）。background_color是应用样式资源加载前的默认背景，所以会显示在屏幕打开界面上。background_color加上我们刚刚定义的图标，就构成了打开WebApp时的“屏幕图像”。2.6.theme_color定义应用程序的默认主题颜色。这有时会影响操作系统显示应用程序的方式（例如，在Android的任务切换器上，主题颜色环绕应用程序）。另外，还可以在meta标签中设置theme_color：
