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

本文最后更新于 2022-07-19 17:16,下午

“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: /images/maskable-32x32.png
              sizes: 32x32
              type: image/png
              purpose: any maskable # 使用 Maskable Icon 可以提升移动用户的体验,可使用 https://maskable.app/ 制作 Maskable Icon。
            - src: /images/maskable-192x192.png
              sizes: 192x192
              type: image/png
              purpose: any maskable
            - src: /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!

图片
图片


  完。


超简单,让你的 Hexo 博客支持 PWA
https://his2nd.life/technologies/d4598179.html
作者
Hollis
发布于
2020-08-18 15:38,下午
更新于
2022-07-19 17:16,下午
许可协议