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
- 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.
- 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.