目标网站

https://blog.rmiao.top/

PWA

yarn add hexo-offline

然后在root config.yml里新增

# offline config passed to sw-precache.

service_worker:

  maximumFileSizeToCacheInBytes: 5242880

  staticFileGlobs:

  - /**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}

  - /lib/**/*.js

  - /lib/**/*.css

  - /images/*

  - /js/src/**/*.js

  stripPrefix: public

  verbose: true

  runtimeCaching:

    - urlPattern: /*

      handler: cacheFirst

      options:

        origin: cdn.bootcss.com

然后添加manifest.json, 比如我使用了 hexo-theme-next的主题，在layout/_custom/header.swig 中引用了manifest.json。

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

manifest生成地址： https://app-manifest.firebaseapp.com/

比如，我的为

{

    "name": "风 - Ryan Miao",

    "short_name": "风",

    "theme_color": "#2196f3",

    "background_color": "#2196f3",

    "display": "browser",

    "scope": "/",

    "start_url": "/"

  }

具体缓存策略还是看下官方文档，这里不求甚解缓存。重启博客，打开控制台，查看网络，会发现，所有的文件都是(from ServiceWorker) 或者(from disk cache)或者(from memory cache)。

当hexo g之后，会多出一个service-worker.js里面则是会缓存的内容。

压缩

看了下计算，压缩大概可以节省一半空间。

$ npm install gulp -g

$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

或者使用yarn 

yarn global add gulp

yarn add gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp

然后，在根目录新增 gulpfile.js :

var gulp = require('gulp');

var minifycss = require('gulp-minify-css');

var uglify = require('gulp-uglify');

var htmlmin = require('gulp-htmlmin');

var htmlclean = require('gulp-htmlclean');

// 压缩 public 目录 css

gulp.task('minify-css', function() {

    return gulp.src('./public/**/*.css')

        .pipe(minifycss())

        .pipe(gulp.dest('./public'));

});

// 压缩 public 目录 html

gulp.task('minify-html', function() {

  return gulp.src('./public/**/*.html')

    .pipe(htmlclean())

    .pipe(htmlmin({

         removeComments: true,

         minifyJS: true,

         minifyCSS: true,

         minifyURLs: true,

    }))

    .pipe(gulp.dest('./public'))

});

// 压缩 public/js 目录 js

gulp.task('minify-js', function() {

    return gulp.src('./public/**/*.js')

        .pipe(uglify())

        .pipe(gulp.dest('./public'));

});

// 执行 gulp 命令时执行的任务

gulp.task('default', [

    'minify-html','minify-css','minify-js'

]);

运行：

hexo clean && hexo g && gulp &&  hexo s

参考

https://blog.naaln.com/2017/09/hexo-with-pwa/