让你的Hexo博客像原生APP一般丝滑

hexo-service-worker 是一个可以让Hexo博客拥有 PWA 支持的插件,能够默认的把站点中 public 内的所有静态资源包括 html、css、js、image 等文件缓存起来,达到离线(无网络环境)可访问的效果,拥有像原生APP一般的丝滑体验。

Hexo-PWA

PWA前提

你的博客全站资源必须为HTTPS,PWA支持的前提条件。
你的博客全站资源必须为HTTPS,PWA支持的前提条件。
你的博客全站资源必须为HTTPS,PWA支持的前提条件。

什么是PWA

PWA,即 Progressive Web App, 是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。

理解: PWA不是某一项技术,或者某一个新的产物;而是一系列Web技术与标准的集合与应用。通过应用这些新的技术与标准,可以从安全、性能和体验三个方面,优化我们的Web App。所以,其实PWA本质上依然是一个Web App。

PWA包含的技术:

  • Web App Manifest
  • Service Worker
  • Cache API 缓存
  • Push、Notification 推送与通知
  • Background Sync 后台同步
  • 响应式设计

安装插件

npm i -S hexo-service-worker

配置config

在博客根目录下的_config.yml文件,添加如下配置:

# PWA -- offline config passed to sw-precache.
service_worker:
  maximumFileSizeToCacheInBytes: 52428800
  staticFileGlobs:
  - public/**/*.{js,html,xml,json,css,png,jpg,gif,svg,eot,ttf,woff,woff2,ico,cur}  # code 1
  - https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js  # code 2
  - https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js  # code 3
  stripPrefix: public
  verbose: true
  runtimeCaching:
    - urlPattern: /*
      handler: cacheFirst
      options:
        origin: tiven.cn
    - urlPattern: /*
      handler: cacheFirst
      options:
        origin: cdn.bootcdn.net
  • staticFileGlobs 是一个列表,可以使用正则来匹配某个目录,code 1 配置是缓存 public 文件夹下面的指定静态资源和静态 html 页面。
  • code 2code 3 是配置缓存第三方的CDN资源 jquerylodash,这里只是举例,可以根据博客中实际使用到的资源具体来配置。
  • runtimeCaching 是配置某个域名下使用到的静态资源,也是一个List,支持配置多个origin域。

生成配置 manifest.json 文件

source目录下新建manifest.json 文件,可以参考本站博客配置,具体code如下:

{
  "name": "天問的个人博客",
  "short_name": "天問",
  "description": "天問的个人网站,记录学习,分享coding。生命不息,奋斗不止...",
  "theme_color": "#C69DC9",
  "background_color": "#C69DC9",
  "display": "standalone",
  "orientation": "portrait-primary",
  "Scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "img/icons/icon-32.png",
      "sizes": "32x32",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-128.png",
      "sizes": "128x128",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-256.png",
      "sizes": "256x256",
      "type": "image/png"
    },
    {
      "src": "img/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "splash_pages": null
}

注意: 所有icons的src路径,sizes尺寸大小、type类型都需要一一对应。

引用manifest.json

本站使用的是hexo默认主题,使用了ejs模板引擎,在公共head.ejs中添加下代码,其他主题应该类似。

<link rel="manifest" href="/manifest.json">

部署后可以打开 控制台 - Application - Manifest / Service Workers / Storage,进行调试、查看缓存情况。

参考文档:


欢迎访问:个人博客地址

推荐阅读更多精彩内容