hexo优化之pwa增快网络访问，减少cdn流量访问

1.原理：

1.通过cdn减少服务器的流量
2.通过service worker拦截请求cdn，减少cdn的流量
3.通过控制service worker只缓存浏览过的页面所必要的资源文件，减少整站缓存

ps：一般人都是到服务器节点终止，由于个人的小破站是在mini主机上的内网穿透的，所以加上了mini主机
流程图如下：

sequenceDiagram
  participant 用户
  participant CDN
  participant service worker
  participant 服务器
  participant mini主机
  用户->>CDN:1.首次访问
  CDN->>服务器:2.查询资源
  服务器->>mini主机:3.查询资源
  mini主机->>服务器:4.返回资源
  服务器->>CDN:5.返回资源
  CDN->>用户:6.返回资源
  CDN->>+service worker:7.缓存资源
  用户->>service worker:8.第二次访问，查询缓存
  service worker->>用户:9.返回资源
  service worker->>-CDN:10.无相关资源时请求

2.hexo-offline

官网地址

hexo-offline 是一个官方提供的 Hexo 插件，它通过使用 Service Worker 技术为 Hexo 网站添加离线浏览支持。Service Worker 是一种可编程的网络代理，允许你拦截和响应网络请求，从而实现诸如缓存资源、推送通知等功能。对于 Hexo 站点来说，安装了 hexo-offline 插件后，当用户首次访问你的网站时，浏览器会下载并缓存必要的资源文件（如 HTML 页面、CSS 样式表、JavaScript 文件等）。一旦这些资源被缓存，即使用户在没有互联网连接的情况下再次访问你的网站，他们也能够查看之前已经加载过的页面。

3.下载安装

1	npm i hexo-offline --save

4.配置_config.butterfly.yml

pwa:  
  enable: true  
  manifest: /manifest.json  
  apple_touch_icon: /img/apple-touch-icon.png  
  favicon_32_32: /img/favicon-32x32.png  
  favicon_16_16: /img/favicon-16x16.png  
  mask_icon:

5.hexo的_source目录下增加配置manifest.json 文件

{  
  "name": "bight", 
  "short_name": "bright",  
  "theme_color": "#2196f3",  
  "background_color": "#2196f3",  
  "display": "standalone",  
  "scope": "/",  
  "start_url": "/",  
  "screenshots": [  
    {  
      "src": "android-chrome-512x512.png",  
      "sizes": "512x512",  
      "type": "image/png"  
    },  
    {  
      "src": "android-chrome-512x512.png",  
      "sizes": "512x512",  
      "form_factor": "wide",  
      "type": "image/png"  
    }  
  ],  
  "icons": [  
    {  
      "src": "android-chrome-512x512.png",  
      "sizes": "512x512",  
      "type": "image/png"  
    }  
  ],  
  "splash_pages": null  
}

6.重新生成以及部署

1	npx hexo cl

1	npx hexo g

7.个人优化方向

只缓存访问过的内容，只能离线访问过的内容
why？节省服务器小水管开销

hexo目录下增加配置hexo-offline.config.cjs文件，内容如下

// offline config passed to workbox-build.  
module.exports = {  
    // 确保不生成 source map    sourcemap: false,  
    //离线后使用缓存  
    // 匹配模式，确定哪些文件会被缓存(会自动缓存下列静态文件,即使没展示过)  
    // globPatterns: ["**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff}"],  
    // 不再使用 globPatterns 进行预缓存  
    // 因为我们希望只缓存展示过的页面  
    globPatterns: [], // 明确设置为空数组，避免意外预缓存  
  
    // 需要缓存的文件目录  
    globDirectory: "public",  
  
    // Service Worker 文件生成路径  
    swDest: "public/service-worker.js",  
  
    // 运行时缓存策略配置  
    runtimeCaching: [  
        //支持自己域名下的  
        {  
            urlPattern: /\.(?:js|html|css|png|jpg|gif|svg|eot|ttf|woff|woff2)$/,  
            handler: 'CacheFirst',  
  
        },  
        // cdn 添加其他需要运行时缓存的资源模式...  
        {  
            urlPattern: /^https:\/\/unpkg\.com\/.*/,  
            handler: 'CacheFirst',  
        },  
        {  
            urlPattern: /^https:\/\/cdnjs\.cloudflare\.com\/.*/,  
            handler: 'CacheFirst',  
        }  
    ],  
  
    // 让新激活的 Service Worker 立即接管所有现有客户端  
    clientsClaim: true,  
  
    // 确保新版本的 Service Worker 安装后立即激活  
    skipWaiting: true,  
};