Progressive Web Apps 是 Google 提出的，用前沿的 Web 技术在网页中实现和原生应用相近的用户体验的一系列方案。网上的介绍已经够多了，贴了几个链接可以先自己了解下。这篇文章通过改造我的博客来介绍其中的关键技术。

6BC9FE87-7F63-4971-81D7-197E7FFBCF95

简介

网上的介绍已经够多了，这里放两个链接可以自己了解下。

三大核心技术

一个 PWA 应用首先是一个网页，可以通过 Web 技术编写出一个网页应用，随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线缓存功能，再加上Push Notification实现推送，妥妥的变成了一个Native APP。接下来我将通过把我的Hexo博客改造成一个PWA应用，介绍其中的关键技术。

App Manifest

我们从最简单的开始，我们需要在Hexo的根目录中增加一个manifest.json文件。下面给出我博客中使用的配置：

{
  "name": "天生爱走神",
  "short_name": "走神PWA版",
  "theme_color": "#2196f3",
  "background_color": "#2196f3",
  "display": "standalone",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
  ]
}

详细的参数和说明可以参考这里或者这里。你需要将创建这个文件到source目录下。如何快速生成manifest文件呢？推荐两款工具：App Manifest Generator 和 manifoldjs.com，这两个网站可以引导我们快速创建。

相关的icon图片放在博客的source/images/icons目录下就可以。没有这个目录就创建一个，记得要和manifest.json中的icon路径匹配。

Manifest.json文件需要在head标签里引用，我使用的是next主题，所以我在layout/_partials/head.swing文件中添加一句代码：

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

如果不是next主题，就自己找下位置吧。配置好manifest后，我用hexo进行了部署，并从豌豆荚下载了最新的移动版Chrome，然后使用添加到主屏幕功能，成功的将我的网站添加到了桌面，效果如下：

ADDD97FE-A10B-47C4-A816-3EA0296E9895

Service Worker

现在我们来考虑实现一个Service Worker，Google官方提供了一个Service Worker的示例项目，这是一个手动实现的基础例子。借助工具我们有sw-toolbox和sw-precache，配合gulp和webpack我们可以定制缓存策略并生成ServiceWorker。而对于Hexo，最简单的方法是借助插件hexo-offline，该插件可以帮助我们生成ServiceWoker，据了解vuejs官网也用的这个。安装很简单：

npm i hexo-offline --save

关于它的使用及配置，参考文档即可。需要注意的一点是，出于安全考虑，注册 Service Worker 要求你的 web 应用部署于 HTTPS 协议下，以免利用 Service Worker 的中间人攻击，所以我把网站升级了https。接下来我主要说下加上Service Worker之后的效果。

最直观就是可以离线打开页面了，同样关闭WiFi的情况下，对比如下图：

可以看到左边的会提示离线状态，但是会提示联网时下载，右边还可以正常浏览，其实浏览的是在线时下载的离线版。
除了将浏览器离线我们还可以通过其他方法知道Service Worker生效，打开chrome://inspect/#service-workers可以查看到当前运行的Service Worker：

通过chrome的开发者工具我们也可以观测到serverwork的运行：

通过这两张图，我们可以清楚地知道ServiceWorker确实在后台工作着，而Cache Storage确实对博客内的静态资源做了缓存处理。事实上对Hexo这样的静态博客而言，整个博客都是静态资源，所以在实际运行中它会对所有内容进行缓存，我们在本地启动hexo s，可以看到资源缓存的情况：
用Lighthouse测了下评分，Lighthouse目前非常关注PWA的特性，例如添加到主屏幕和离线支持，结果如下：

可以看到评分还是不错的，不足的地方主要在首屏的加载，css文件请求时间较长，这个可以通过增加一些CDN解决，首屏优化可以通过添加骨架图改进体验，具体可以看《使用Skeleton Screen优化首屏加载》这篇文章。

Push Notification

PWA 推送通知中的「推送」与「通知」，其实使用的是两个不同但又相得益彰的 API：Notification API和Push API，前者用于向用户展示通知，而后者用于订阅推送消息。对Hexo这样一个静态博客生成器而言，先不考虑消息推送的相关问题。

总结

至此，我的Hexo博客就已经支持PWA啦，不过这不是终点，关于PWA的尝试还会继续，接下来我还会写两篇文章详细介绍一下Service Worker和Push Notification的使用。

目前国内的PWA重视程度还不是很好，而据了解在一些 Google 服务健全、标配 Chrome 的 Android 手机市占率非常高的国家，比如印度，PWA 的用户数量已经相当可观。移动应用现在已经如此的流行，但是原生应用迭代慢，跨平台弱体验强，而Web迭代快，跨平台强体验弱，我们一直在想办法解决这个鱼和熊掌的难题，而PWA的出现让鱼与熊掌兼得变成了可能，已经希望可以尽快看到这项技术更多更好的应用在移动开发上，最后借用乔布斯的一句话：