Service Worker学习与实践（二）——PWA简介

这周， Chrome 70正式版本发布， Progressive Web Apps（PWA）已经正式支持到 Windows 10平台，然而，早在前几个版本以前， Chrome就已经经过 chrome://flags支持开启实验性的功能，早就支持在 Windows 10平台上安装 Progressive Web Apps（PWA）。谷歌表示安装在桌面的网页应用使用体验很是接近于本地应用，而且应用的服务商能够缓存全部资源所以这些PWA应用有很好的兼容性和可靠性。

在上一篇文章Service Worker学习与实践（一）——离线缓存中，已经讲到Service Worker的生命周期、如何建立、激活、更新Web应用程序的Service Worker，而且给出了一个简单的示例来讲明使用Service Worker来实现离线缓存的原理，在这篇文章里，主要是对Service Worker实现原生应用程序的能力作出必定解析，下一篇文章，将经过一个例子阐述如何使用Service Worker实现消息推送功能。

Progressive Web Apps（PWA）

Progressive Web App, 简称 PWA，是提高Web App的体验的一种新方法，能给用户原生应用的体验。

PWA能作到原生应用的体验不是靠特指某一项技术，而是通过应用一些新技术进行改进，在安全、性能和体验三个方面都有很大提高，PWA本质上是Web App，借助一些新技术也具有了Native App的一些特性，兼具Web App和Native App的优势。

PWA的主要特色包括下面三点：

可靠 - 即便在不稳定的网络环境下，也能瞬间加载并展示
体验 - 快速响应，而且有平滑的动画响应用户的操做
粘性 - 像设备上的原生应用，具备沉浸式的用户体验，用户能够添加到桌面
PWA自己强调渐进式，并不要求一次性达到安全、性能和体验上的全部要求，开发者能够经过PWA Checklist查看现有的特征。

经过上面的PWA Checklist，总结起来，PWA大体有如下的优点：

• 体验：经过Service Worker配合Cache Storage API，保证了PWA首屏的加载效率，甚至配合本地存储能够支持离线应用；
• 粘性：PWA是能够安装的，用户点击安装到桌面后，会在桌面建立一个 PWA 应用，而且不须要从应用商店下载，能够借助Web App Manifest提供给用户和Native App同样的沉浸式体验，能够经过给用户发送离线通知，让用户回流；
• 渐进式：适用于大多数现代浏览器，随着浏览器版本的迭代，其功能是渐进加强的；
• 无版本问题：如Web应用的优点，更新版本只须要更新应用程序对应的静态文件便可，Service Worker会帮助咱们进行更新；
• 跨平台：Windows、Mac OSX、Android、IOS，一套代码，多处使用；
• 消息推送：即便用户已经关闭应用程序，仍然能够对用户进行消息推送；

总的说来，只要Web应用支持的功能，对于PWA而言，基本都支持，此外，还提供了原生能力。

使用PWA manifest添加桌面入口

注意这里说的manifest不是指的manifest缓存，这个manifest是一个JSON文件，开发者能够利用它控制在用户想要看到应用的区域（例如移动设备主屏幕）中如何向用户显示网络应用或网站，指示用户能够启动哪些功能，以及定义其在启动时的外观。

manifest提供了将网站书签保存到设备主屏幕的功能。当网站以这种方式启动时：

• 它具备惟一的图标和名称，以便用户将其与其余网站区分开来。
• 它会在下载资源或从缓存恢复资源时向用户显示某些信息。
• 它会向浏览器提供默认显示特性，以免网站资源可用时的过渡过于生硬。

下面是个人博客网站的manifest.json文件，做为桌面入口配置文件的示例：

{
  "name": "Counterxing",
  "short_name": "Counterxing",
  "description": "Why did you encounter me?",
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "any",
  "background_color": "#ACE",
  "theme_color": "#ACE",
  "icons": [{
    "src": "/images/logo/logo072.png",
    "sizes": "72x72",
    "type": "image/png"
  }, {
    "src": "/images/logo/logo152.png",
    "sizes": "152x152",
    "type": "image/png"
  }, {
    "src": "/images/logo/logo192.png",
    "sizes": "192x192",
    "type": "image/png"
  }, {
    "src": "/images/logo/logo256.png",
    "sizes": "256x256",
    "type": "image/png"
  }, {
    "src": "/images/logo/logo512.png",
    "sizes": "512x512",
    "type": "image/png"
  }]
}

上面的字段含义也不用多解释了，大体就是启动的icon样式，应用名称、简写名称与描述等，其中必须确保有short_name和name。此外，最好设定好start_url，表示启动的根页面路径，若是不添加，则是使用当前路径。

display为standalone，则会隐藏浏览器的UI界面，若是设置display为browser，则启动时保存浏览器的UI界面。

orientation表示启动时的方向，横屏、竖屏等，具体参数值可参考文档。

background_color和theme_color表示应用程序的背景颜色和主题颜色。

在建立好manifest.json后，将、使用link标签添加到应用程序的全部页面上，<link rel="manifest" href="/manifest.json">

安装到桌面

桌面端（以Mac OSX为例）

只有注册、激活了Service Worker的网站才可以安装到桌面，在Chrome 70版本以前，须要手动开启实验性功能，步骤以下：

1. 进入chrome://flags
2. 找到Desktop PWAs，选择Enabled

此时，进入一个支持PWA的网站（例如Google I/O），在Chrome浏览器右上角，点击安装。便可安装到桌面。这里以个人博客为例：

能够到 awesome-pwa查找目前支持 PWA的网站列表

接着点击安装：

这样，一个PWA应用就安装到你的机器上了，这里个人操做系统为Mac OSX，应用程序能够经过Launchpad打开，在Windows也是同理的，会被安装到桌面上，可经过开始菜单找到应用程序。

打开应用程序，发现其与原始应用几乎没有任何差距：

Windows与上述方法相似，这里就不作过多阐述

移动端（以IOS为例）

因为当初苹果推出PWA时，并无一个统一的manifest的规范，最开始的设计是经过meta和link标签来设定应用的对应参数的，因此，在移动端上的PWA应用，为了兼容Windows Phone和iPhone，须要在全部页面的HTML的head中添加如下的标签：

<meta name="msapplication-TileImage" content="./images/logo/logo152.png">
<meta name="msapplication-TileColor" content="#2F3BA2">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Counterxing">
<link rel="apple-touch-icon" href="./images/logo/logo152.png">

添加好后，就能够体验咱们的PWA了！

IOS在11.3版本以后也支持PWA了，知道这一消息的我，卸载了手机上不少软件，马上体验上了PWA。

这里以豆瓣移动端为例使用Safiri浏览器打开一个网站，点击下方分享图标，选择添加到主屏幕。

而后在新弹出的一个浏览器页面，选择添加：

就以上简短的步骤，移动端上的一个PWA桌面应用就添加好了，赶忙体验吧！

小结

本文是笔者写的Service Worker学习与实践系列文章的第二篇，主要讲述的是配合Service Worker使用的PWA的优点，如何配置manifest.json文件来实现将PWA安装到桌面，并经过Mac OSX和IOS如何安装PWA到桌面的详细步骤，阐述了如何配置PWA，使其方便地安装到桌面上。

下一篇文章中，主要讲述Service Worker在PWA实践中的重要能力：Web Push。