写在最前
PWA的全称是Progressive Web Apps，译为渐进式网络应用程序。装配了PWA以后，用户可以将网站作为WEB APP安装到自己的设备上，以原生应用般的方式浏览博客，同时借助PWA的缓存机制，能够更快速的浏览。本文讨论的是使用两种方案实现PWA。最终效果不尽相同，但是都可以实现原生应用体验和更新弹窗提示。其实还有个离线博客，但是视方案不同会有很多BUG，而且离线博客意义何在啊！
图标设计
在使用PWA之前，我们最好先行设计一个符合网站主题的图标。
本站使用的是brandmark图标设计网站，访问 brandmark进行图标设计。下载需要收费，不过可以截图。建议截图的时候截成正方形。
输入主标题和副标题
添加网页元素作为风格设计线索
选择适合自己网站的配色方案
下载需要收费，但是可以截图生成图标包及manifest
因为我们最终目的是要制作一个全平台的WEB APP，所以对于图标的大小、类型适配显得格外重要。可以访问realfavicongenerator进行图标制作及manifest的生成。
图文教程
选择图片
创建所有图标
调整 Windows 磁贴图标配色
设置图片相对于 source 目录的存放路径
设置 Web App 名称
生成 README.md
选择生成
下载资源包
获取图标文件和 manifest
配置PWA
实现PWA的方式有许多种，本帖基于Butterfly主题文档进行详细拓展，所以只讨论两种方案。
- 使用
hexo-offline-popup:这个插件配置较为简单，安装以后添加几行配置项即可。适合初学者。 - 使用
workbox:这个插件需要配合gulp插件，所以配置较为繁琐，好处是可以自定义适配弹窗提示，适合对前端有一定了解的用户。如果你还有使用pjax，恭喜你，BUG御三家马上就可以集齐了。 - ?hexo-offline-popup
- ?gulp & workbox
在博客根目录[Blogroot]下打开终端,输入以下指令安装hexo-offline-popup插件。
修改站点配置文件[Blogroot]/_config.yml,在站点配置文件_config.yml中增加以下内容:
将之前生成的图标包移入相应的目录，例如我是/img/siteicon/，所以放到[Blogroot]/source/img/siteicon/目录下。
打开图标包内的site.webmanifest,建议修改文件名为manifest.json并将其放到[Blogroot]/source目录下，以下是我的manifest.json配置内容，其中的theme_color建议用取色器取设计的图标的主色调，同时务必配置start_url和name的配置项，这关系到你之后能否看到浏览器的应用安装按钮。：
json中不要添加任何注释，不然会报错。注意最后一条内容后面不用加逗号”,” 。
打开主题配置文件[Blogroot]/_config.butterfly.yml,找到PWA配置项。添加图标路径。这里的theme_color建议改成你图标的主色调，包括manifest.json中的theme_color也是如此。
运行hexo clean之后hexo generate,使用hexo server本地查看或者hexo deploy部署到网站上。可以通过Chrome插件Lighthouse检查PWA配置是否生效以及配置是否正确。在Chrome浏览器中打开站点，按F12打开控制台，在右上角找到Lighthouse,可能没显示出来，在>>里找找。
使用hexo-offline-popup以后，如果还开启了pjax，可能遇到页面URL带着长长的后缀。形似index.html?_sw-precache=fff6559539ab8f2d6043bcfa832ce38f。此处感谢Android(矩阵)大佬提供的方案，把以下js引入即可，实质是劫持了pjax，并对其链接进行重定向：
而workbox是通过设置 directoryIndex:null来去掉index.html的。这会导致PWA无法加载索引文件，也就是说无法从PWA加载index.html，最终影响离线观看博客的体验。
安装必要插件
既然要使用gulp配合workbox实现PWA，自然少不了安装这两个插件。
创建gulpfile.js
在Hexo的根目录，创建一个gulpfile.js文件,打开[Blogroot]/gulpfile.js,
输入
创建在Hexo的根目录，创建一个sw-template.js文件,打开[Blogroot]/sw-template.js,输入以下内容：
在[Blogroot]themesbutterflylayoutincludesthird-party目录下新建pwanotice.pug文件，
打开[Blogroot]themesbutterflylayoutincludesthird-partypwanotice.pug,输入：
修改[Blogroot]themesbutterflylayoutincludesadditional-js.pug,在文件底部添加以下内容，注意缩进。butterfly_v3.6.0取消了缓存配置，转为完全默认，需要将{cache:theme.fragment_cache}改为{cache: true}:
将之前生成的图标包移入相应的目录，例如我是/img/siteicon/，所以放到[Blogroot]/source/img/siteicon/目录下。
打开图标包内的site.webmanifest,建议修改文件名为manifest.json并将其放到[Blogroot]/source目录下，以下是我的manifest.json配置内容，其中的theme_color建议用取色器取设计的图标的主色调，同时务必配置start_url和name的配置项，这关系到你之后能否看到浏览器的应用安装按钮。：
json中不要添加任何注释，不然会报错。注意最后一条内容后面不用加逗号”,” 。
打开主题配置文件[Blogroot]/_config.butterfly.yml,找到PWA配置项。添加图标路径。这里的theme_color建议改成你图标的主色调，包括manifest.json中的theme_color也是如此。
运行以下指令
运行hexo g之后必须运行gulp指令，不然PWA不会生效！
拓展内容，使用GULP压缩静态资源
既然已经装了gulp了，干脆把gulp也配置好吧。
都说了是BUG御三家了，用不用取决于你的个人意志哦，现在回头用hexo-offline-popup还来得及。
安装全套压缩插件
将[Blogroot]/gulpfile.js里的内容修改为：
使用了gulp压缩js以后，使用了冰卡诺老师的gitcalendar和本站的右键环形菜单教程的用户，会发现gitcalendar和右键菜单失效。原因是js加密压缩的算法存在问题。建议直接屏蔽对这两个js的压缩。修改[Blogroot]/gulpfile.js,添加屏蔽项。
运行gulp指令时报错：
这个众说纷纭，一个是说插件安装不对，一个是说和nvm版本不兼容，通过github action使用CI安装时并不会报这个错，推测是nvm版本不兼容。
事实上这个只是作用于图片压缩，一般也就节省个5kB，而且这个报错不影响网站部署，可以无视。压缩图片还是得靠imagine。
