引言

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

图标设计

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

生成图标包及manifest

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

配置PWA

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

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

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