hexo-offline 是一个利用 ServiceWorker 实现离线体验的 hexo 插件,下面简单记录下使用方法。

安装

yarn add hexo-offline

安装成功后,运行 hexo clean && hexo generate 时会激活插件。

使用

如果没有其他需求的话无须配置,在运行 hexo generate 后会自动生成 service-worker.js 文件。

当然 hexo-offline 也支持完整的 workbox-build 配置,在博客项目根目录下新建 hexo-offline.config.cjs 填写配置即可。

例子:

// <blog_root>/hexo-offline.config.cjs
// offline config passed to workbox-build.
module.exports = {
  /**
   * Whether to add an unconditional call to skipWaiting() to the generated service worker.
   * If false, then a message listener will be added instead,
   * allowing client pages to trigger skipWaiting() by calling postMessage({type: 'SKIP_WAITING'}) on a waiting service worker.
   */
  skipWaiting: true,
  // Whether or not the service worker should start controlling any existing clients as soon as it activates.
  clientsClaim: true,
  // 按需修改:Files matching any of these patterns will be included in the precache manifest.
  globPatterns: ['**/*.{js,html,css}'],
  // 按需修改:A set of patterns matching files to always exclude when generating the precache manifest.
  globIgnores: [
    '**/node_modules/**/*',
    '**/images/**/*',
    '**/posts/**/*',
    '**/archives/**/*',
    '**/categories/**/*',
    '**/tags/**/*'
  ],
  /**
   * 按需修改
   * When using Workbox's build tools to generate your service worker,
   * you can specify one or more runtime caching configurations.
   * These are then translated to workbox-routing.registerRoute calls using the match and handler configuration you define.
   * For all of the options, see the workbox-build.RuntimeCaching documentation.
   */
  runtimeCaching: [
    {
      urlPattern: /.*\.html$/,
      /**
       * 按需修改使用策略
       * StaleWhileRevalidate: 使用缓存的内容尽快响应请求(如果可用),如果未缓存,则回退到网络请求。然后,网络请求用于更新缓存。
       * CacheFirst: 缓存优先策略,优先获取缓存中的资源,如果缓存中没有相关资源,那么就发起网络请求。
       * NetworkFirst: 尝试从网络获取最新请求,如果请求成功,将响应放入缓存中。如果网络无法返回响应,则将使用缓存响应。
       * NetworkOnly: 只使用网络请求获取的资源
       * CacheOnly: 只使用缓存中的资源
       */
      handler: 'StaleWhileRevalidate',
      options: {
        cacheName: 'html-cache',
        cacheableResponse: { statuses: [0, 200] },
        expiration: { maxAgeSeconds: 86400 * 7 } // 按需修改
      }
    },
    {
      urlPattern: /.*\.(css|js)$/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'css-js-cache',
        cacheableResponse: { statuses: [0, 200] },
        expiration: { maxAgeSeconds: 86400 * 7 } // 按需修改
      }
    },
    {
      urlPattern: /.*\.(png|gif|jpg|jpeg|ico|svg|cur|mp4|woff2?)$/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'media-cache',
        cacheableResponse: { statuses: [0, 200] }
      }
    },
    {
      urlPattern: /^https:\/\/(cdn\.staticfile\.org|unpkg\.com)\/.*/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'cdn-cache',
        cacheableResponse: { statuses: [0, 200] }
      }
    }
  ]
};

详细的配置项见 API Reference

Note

  1. As the CDN resources is runtime cached, it means that the resource will be cached only after a user-agent visit the page where the resource is referenced. Therefore, if you have included a CDN resource example.com/script.js in some-page.html only, the user who visit index.html only would not have example.com/script.js in cache.
  2. Use cacheFirst handler as CDN resources with specific version are not supposed to change in the future.

Reference

https://github.com/JLHwung/hexo-offline


fin.