超简单，让你的 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 支持。

只需要三步操作！

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

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

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

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

完