引言 {#引言}

PWA的全称是Progressive Web Apps，译为渐进式网络应用程序。装配了PWA以后，用户可以将网站作为WEB APP安装到自己的设备上，以原生应用般的方式浏览博客，同时借助PWA的缓存机制，能够更快速的浏览。本文讨论的是使用两种方案实现PWA。最终效果不尽相同，但是都可以实现原生应用体验和更新弹窗提示。其实还有个离线博客，但是视方案不同会有很多BUG，而且离线博客意义何在啊！

图标设计 {#图标设计}

在使用PWA之前，我们最好先行设计一个符合网站主题的图标。
建议使用的是brandmark图标设计网站，访问 brandmark进行图标设计。下载需要收费，不过可以截图。建议截图的时候截成正方形。

生成图标包及manifest {#生成图标包及manifest}

因为我们最终目的是要制作一个全平台的WEB APP，所以对于图标的大小、类型适配显得格外重要。可以访问realfavicongenerator进行图标制作及manifest的生成。

配置PWA {#配置PWA}

实现PWA的方式有许多种，本帖基于Butterfly主题文档进行详细拓展，所以只讨论两种方案。

1. 使用hexo-offline-popup:这个插件配置较为简单，安装以后添加几行配置项即可。适合初学者。
2. 使用workbox:这个插件需要配合gulp插件，所以配置较为繁琐，好处是可以自定义适配弹窗提示，适合对前端有一定了解的用户。如果你还有使用pjax，恭喜你，BUG御三家马上就可以集齐了。

参考文章：Butterfly主题的PWA实现方案