超简单，让你的 Hexo 博客支持 PWA

“Progressive Web Apps are web apps that use emerging web browser APIs and features along with traditional progressive enhancement strategy to bring a native app-like user experience to cross-platform web applications.”

在以往，为 Hexo 博客添加 PWA 支持是有些麻烦的，需要手动配置许多东西、修改页面模板等，甚至有的解决方案已经不再支持最新的 Hexo 版本。

幸好，“Mr.J实验室”大佬开发了 hexo-next-pwa 这样一款傻瓜式的 Hexo 插件，自动生成 Manifest 与 Service Worker，让我们能够敲敲键盘就为自己的博客添加 PWA 支持。

只需要三步操作！

1. 使用 npm i @jiangtj/hexo-next-pwa --save 命令安装插件；

2. 在博客的配置文件中填写相应配置项，以下是我的模板：

   pwa:
     # Generate manifest.json
     manifest:
       path: /manifest.json
       # See https://developer.mozilla.org/zh-CN/docs/Web/Manifest
       body:
         start_url: https://his2nd.life # 这一行不可缺失，不然 Edge 的地址栏上就不会弹出“可用应用”提示。
         name: 他的第二人生
         short_name: 他的第二人生
         description: 此站为 Hollis 的个人博客。
         lang: zh-CN
         display: fullscreen # 我使用了全屏的显示方法，看起来很好。
         background_color: "#FFFFFF"
         theme_color: "#F5F5F5"
         icons:
           - src: /static/images/maskable-32x32.png
             sizes: 32x32
             type: image/png
             purpose: any maskable # 使用 Maskable Icon 可以提升移动用户的体验，可使用 https://maskable.app/ 制作 Maskable Icon。
           - src: /static/images/maskable-192x192.png
             sizes: 192x192
             type: image/png
             purpose: any maskable
           - src: /static/images/maskable-512x512.png
             sizes: 512x512
             type: image/png
             purpose: any maskable
     # Generate sw.js
     serviceWorker:
       cdn: https://cdn.jsdelivr.net/npm/workbox-sw@5/build/workbox-sw.min.js
       # See workbox-build's `generateSW()` API
       # Here are some default configuration, see `./default.yaml`
       options: # 插件目前还在不断完善，支持的配置项不多，有 runtimeCaching 等，我也不懂就没再修改。
         swDest: /sw.js

3. Hexo 三板斧走起，打开博客看看吧！一切正常的话，地址栏上就会弹出“可用应用”提示。如果您觉得效果不错，请给大佬的插件一个 Star！

完