+Service Worker

app.js

@@ -1,4 +1,5 @@
 const express = require('express');
+const fs = require('fs');
 const path = require('path');
 const favicon = require('serve-favicon');
 const cookieParser = require('cookie-parser');
@@ -76,6 +77,19 @@ app.use(passport.session());
 app.use('/static', express.static(path.join(__dirname, 'public')));
 app.use('/nodeModules', express.static(path.join(__dirname, 'node_modules')));
 
+// Service Worker
+app.get('/sw.js', (req, res) => {
+    fs.readFile(path.resolve(__dirname, './sw.js'), (err, data) => {
+        if (err) {
+            throw err;
+        }
+        res.writeHead(200, {
+            'Content-type': 'text/javascript'
+        });
+        res.end(data);
+    });
+});
+
 // 前台站点路由，无需登录
 app.use('/', route);
 app.use('/', locale);

gulpfile.js

@@ -6,6 +6,7 @@ const uglify = require('gulp-uglify');
 const cleanCSS = require('gulp-clean-css');
 const babel = require('gulp-babel');
 const notifier = require('node-notifier');
+const workboxBuild = require('workbox-build');
 const minifyJsSrc = path.join(__dirname, './public/src/js/**/*.js');
 const minifyCssSrc = path.join(__dirname, './public/src/css/**/*.css');
 
@@ -68,6 +69,44 @@ gulp.task('minify-css', () => {
     });
 });
 
+gulp.task('service-worker', () => {
+    return workboxBuild.injectManifest({
+        swSrc: path.join(__dirname, './public/src/js/sw.js'),
+        swDest: path.join(__dirname, './sw.js'),
+        globDirectory: path.join(__dirname, './'),
+
+        // 注意：这里有个坑！后缀{js,css,xxx} 逗号之间不能加空格，否则识别有问题！！！
+        globPatterns: [
+            'public/**/*.{js,css,html,png,jpg,svg,ico,swf}',
+            'node_modules/bootstrap/**/*.min.{js,css}',
+            'node_modules/@fortawesome/**/*.{min.css,eot,ttf,woff,woff2}',
+            'node_modules/blueimp-file-upload/**/*.{js,css}',
+            'node_modules/sweetalert/dist/**/*.{js,css}',
+            'node_modules/jquery/dist/**/*.{js,css}',
+            'node_modules/metismenu/dist/**/*.{js,css}',
+            'node_modules/lodash/**/*.min.js',
+            'node_modules/fuelux/dist/**/*.{js,css}',
+            'node_modules/simplemde/dist/**/*.{js,css}',
+            'node_modules/js-md5/**/*.min.js',
+            'node_modules/animate.css/**/*.min.css',
+            'node_modules/lightbox2/**/*.min.{js,css}',
+            'node_modules/scrollnav/**/*.min.js',
+            'node_modules/jquery-qrcode/**/*.min.js',
+            'node_modules/malihu-custom-scrollbar-plugin/**/*.{min.js,css,png}',
+            'node_modules/jQuery-cycleText/**/*.min.js'
+        ],
+        globIgnores: ['**/*/test/**/*.js'],
+        modifyURLPrefix: {
+            'public/favicon.ico': '/favicon.ico',
+            'public/': '/static/',
+            'node_modules/': '/nodeModules/'
+        }
+    }).then(({ count, size, warnings }) => {
+        warnings.forEach(console.warn);
+        console.log(`${count} files will be precached, totaling ${size} bytes.`);
+    });
+});
+
 /**
  * 监听资源文件改动并自动执行任务
  */

package-lock.json

@@ -718,6 +718,23 @@
         "semver": "5.7.0"
       }
     },
+    "@babel/runtime": {
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.4.5.tgz",
+      "integrity": "sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==",
+      "dev": true,
+      "requires": {
+        "regenerator-runtime": "0.13.2"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.13.2",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.2.tgz",
+          "integrity": "sha512-S/TQAZJO+D3m9xeN1WTI8dLKBBiRgXBlTJvbWjCThHWZj9EvHK70Ff50/tYj2J/fvBY6JtFVwRuazHN2E7M9BA==",
+          "dev": true
+        }
+      }
+    },
     "@babel/template": {
       "version": "7.4.0",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.4.0.tgz",
@@ -787,6 +804,38 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.8.1.tgz",
       "integrity": "sha512-GJtx6e55qLEOy2gPOsok2lohjpdWNGrYGtQx0FFT/++K4SYx+Z8LlPHdQBaFzKEwH5IbBB4fNgb//uyZjgYXoA=="
     },
+    "@hapi/address": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.0.0.tgz",
+      "integrity": "sha512-mV6T0IYqb0xL1UALPFplXYQmR0twnXG0M6jUswpquqT2sD12BOiCiLy3EvMp/Fy7s3DZElC4/aPjEjo2jeZpvw==",
+      "dev": true
+    },
+    "@hapi/hoek": {
+      "version": "6.2.4",
+      "resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-6.2.4.tgz",
+      "integrity": "sha512-HOJ20Kc93DkDVvjwHyHawPwPkX44sIrbXazAUDiUXaY2R9JwQGo2PhFfnQtdrsIe4igjG2fPgMra7NYw7qhy0A==",
+      "dev": true
+    },
+    "@hapi/joi": {
+      "version": "15.0.3",
+      "resolved": "https://registry.npmjs.org/@hapi/joi/-/joi-15.0.3.tgz",
+      "integrity": "sha512-z6CesJ2YBwgVCi+ci8SI8zixoj8bGFn/vZb9MBPbSyoxsS2PnWYjHcyTM17VLK6tx64YVK38SDIh10hJypB+ig==",
+      "dev": true,
+      "requires": {
+        "@hapi/address": "2.0.0",
+        "@hapi/hoek": "6.2.4",
+        "@hapi/topo": "3.1.0"
+      }
+    },
+    "@hapi/topo": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@hapi/topo/-/topo-3.1.0.tgz",
+      "integrity": "sha512-gZDI/eXOIk8kP2PkUKjWu9RW8GGVd2Hkgjxyr/S7Z+JF+0mr7bAlbw+DkTRxnD580o8Kqxlnba9wvqp5aOHBww==",
+      "dev": true,
+      "requires": {
+        "@hapi/hoek": "6.2.4"
+      }
+    },
     "@types/babel-types": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/@types/babel-types/-/babel-types-7.0.6.tgz",
@@ -1199,6 +1248,31 @@
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
       "dev": true
     },
+    "babel-extract-comments": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz",
+      "integrity": "sha512-qWWzi4TlddohA91bFwgt6zO/J0X+io7Qp184Fw0m2JYRSTZnJbFR8+07KmzudHCZgOiKRCrjhylwv9Xd8gfhVQ==",
+      "dev": true,
+      "requires": {
+        "babylon": "6.18.0"
+      }
+    },
+    "babel-plugin-syntax-object-rest-spread": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
+      "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=",
+      "dev": true
+    },
+    "babel-plugin-transform-object-rest-spread": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz",
+      "integrity": "sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=",
+      "dev": true,
+      "requires": {
+        "babel-plugin-syntax-object-rest-spread": "6.13.0",
+        "babel-runtime": "6.26.0"
+      }
+    },
     "babel-runtime": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
@@ -1824,6 +1898,12 @@
       "integrity": "sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==",
       "dev": true
     },
+    "common-tags": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.8.0.tgz",
+      "integrity": "sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==",
+      "dev": true
+    },
     "component-emitter": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/component-emitter/-/component-emitter-1.2.1.tgz",
@@ -3335,6 +3415,12 @@
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
       "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
     },
+    "get-own-enumerable-property-symbols": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.0.tgz",
+      "integrity": "sha512-CIJYJC4GGF06TakLg8z4GQKvDsx9EMspVxOYih7LerEL/WosUnFIww45CGfxfeKHqlg3twgUrYRT1O3WQqjGCg==",
+      "dev": true
+    },
     "get-stream": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
@@ -3635,7 +3721,7 @@
         },
         "strip-ansi": {
           "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "resolved": "http://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
           "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
           "dev": true,
           "requires": {
@@ -4766,6 +4852,12 @@
         "has": "1.0.3"
       }
     },
+    "is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk=",
+      "dev": true
+    },
     "is-relative": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-1.0.0.tgz",
@@ -6267,6 +6359,12 @@
       "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
       "dev": true
     },
+    "pretty-bytes": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.2.0.tgz",
+      "integrity": "sha512-ujANBhiUsl9AhREUDUEY1GPOharMGm8x8juS7qOHybcLi7XsKfrYQ88hSly1l2i0klXHTDYrlL8ihMCG55Dc3w==",
+      "dev": true
+    },
     "pretty-hrtime": {
       "version": "1.0.3",
       "resolved": "http://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
@@ -7529,6 +7627,17 @@
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
       "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
     },
+    "stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "dev": true,
+      "requires": {
+        "get-own-enumerable-property-symbols": "3.0.0",
+        "is-obj": "1.0.1",
+        "is-regexp": "1.0.0"
+      }
+    },
     "strip-ansi": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
@@ -7547,6 +7656,16 @@
         "is-utf8": "0.2.1"
       }
     },
+    "strip-comments": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-1.0.2.tgz",
+      "integrity": "sha512-kL97alc47hoyIQSV165tTt9rG5dn4w1dNnBhOQ3bOU1Nc1hel09jnXANaHJ7vzHLd4Ju8kseDGzlev96pghLFw==",
+      "dev": true,
+      "requires": {
+        "babel-extract-comments": "1.0.0",
+        "babel-plugin-transform-object-rest-spread": "6.26.0"
+      }
+    },
     "strip-eof": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/strip-eof/-/strip-eof-1.0.0.tgz",
@@ -8482,6 +8601,205 @@
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
       "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8="
     },
+    "workbox-background-sync": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-4.3.1.tgz",
+      "integrity": "sha512-1uFkvU8JXi7L7fCHVBEEnc3asPpiAL33kO495UMcD5+arew9IbKW2rV5lpzhoWcm/qhGB89YfO4PmB/0hQwPRg==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "4.3.1"
+      }
+    },
+    "workbox-broadcast-update": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-4.3.1.tgz",
+      "integrity": "sha512-MTSfgzIljpKLTBPROo4IpKjESD86pPFlZwlvVG32Kb70hW+aob4Jxpblud8EhNb1/L5m43DUM4q7C+W6eQMMbA==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "4.3.1"
+      }
+    },
+    "workbox-build": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-4.3.1.tgz",
+      "integrity": "sha512-UHdwrN3FrDvicM3AqJS/J07X0KXj67R8Cg0waq1MKEOqzo89ap6zh6LmaLnRAjpB+bDIz+7OlPye9iii9KBnxw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "7.4.5",
+        "@hapi/joi": "15.0.3",
+        "common-tags": "1.8.0",
+        "fs-extra": "4.0.3",
+        "glob": "7.1.4",
+        "lodash.template": "4.4.0",
+        "pretty-bytes": "5.2.0",
+        "stringify-object": "3.3.0",
+        "strip-comments": "1.0.2",
+        "workbox-background-sync": "4.3.1",
+        "workbox-broadcast-update": "4.3.1",
+        "workbox-cacheable-response": "4.3.1",
+        "workbox-core": "4.3.1",
+        "workbox-expiration": "4.3.1",
+        "workbox-google-analytics": "4.3.1",
+        "workbox-navigation-preload": "4.3.1",
+        "workbox-precaching": "4.3.1",
+        "workbox-range-requests": "4.3.1",
+        "workbox-routing": "4.3.1",
+        "workbox-strategies": "4.3.1",
+        "workbox-streams": "4.3.1",
+        "workbox-sw": "4.3.1",
+        "workbox-window": "4.3.1"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
+          "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "4.1.15",
+            "jsonfile": "4.0.0",
+            "universalify": "0.1.2"
+          }
+        },
+        "glob": {
+          "version": "7.1.4",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.4.tgz",
+          "integrity": "sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "1.0.0",
+            "inflight": "1.0.6",
+            "inherits": "2.0.3",
+            "minimatch": "3.0.4",
+            "once": "1.4.0",
+            "path-is-absolute": "1.0.1"
+          }
+        },
+        "lodash.template": {
+          "version": "4.4.0",
+          "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.4.0.tgz",
+          "integrity": "sha1-5zoDhcg1VZF0bgILmWecaQ5o+6A=",
+          "dev": true,
+          "requires": {
+            "lodash._reinterpolate": "3.0.0",
+            "lodash.templatesettings": "4.1.0"
+          }
+        },
+        "lodash.templatesettings": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz",
+          "integrity": "sha1-K01OlbpEDZFf8IvImeRVNmZxMxY=",
+          "dev": true,
+          "requires": {
+            "lodash._reinterpolate": "3.0.0"
+          }
+        }
+      }
+    },
+    "workbox-cacheable-response": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-4.3.1.tgz",
+      "integrity": "sha512-Rp5qlzm6z8IOvnQNkCdO9qrDgDpoPNguovs0H8C+wswLuPgSzSp9p2afb5maUt9R1uTIwOXrVQMmPfPypv+npw==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "4.3.1"
+      }
+    },
+    "workbox-core": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-4.3.1.tgz",
+      "integrity": "sha512-I3C9jlLmMKPxAC1t0ExCq+QoAMd0vAAHULEgRZ7kieCdUd919n53WC0AfvokHNwqRhGn+tIIj7vcb5duCjs2Kg==",
+      "dev": true
+    },
+    "workbox-expiration": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-4.3.1.tgz",
+      "integrity": "sha512-vsJLhgQsQouv9m0rpbXubT5jw0jMQdjpkum0uT+d9tTwhXcEZks7qLfQ9dGSaufTD2eimxbUOJfWLbNQpIDMPw==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "4.3.1"
+      }
+    },
+    "workbox-google-analytics": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-4.3.1.tgz",
+      "integrity": "sha512-xzCjAoKuOb55CBSwQrbyWBKqp35yg1vw9ohIlU2wTy06ZrYfJ8rKochb1MSGlnoBfXGWss3UPzxR5QL5guIFdg==",
+      "dev": true,
+      "requires": {
+        "workbox-background-sync": "4.3.1",
+        "workbox-core": "4.3.1",
+        "workbox-routing": "4.3.1",
+        "workbox-strategies": "4.3.1"
+      }
+    },
+    "workbox-navigation-preload": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-4.3.1.tgz",
+      "integrity": "sha512-K076n3oFHYp16/C+F8CwrRqD25GitA6Rkd6+qAmLmMv1QHPI2jfDwYqrytOfKfYq42bYtW8Pr21ejZX7GvALOw==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "4.3.1"
+      }
+    },
+    "workbox-precaching": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-4.3.1.tgz",
+      "integrity": "sha512-piSg/2csPoIi/vPpp48t1q5JLYjMkmg5gsXBQkh/QYapCdVwwmKlU9mHdmy52KsDGIjVaqEUMFvEzn2LRaigqQ==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "4.3.1"
+      }
+    },
+    "workbox-range-requests": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-4.3.1.tgz",
+      "integrity": "sha512-S+HhL9+iTFypJZ/yQSl/x2Bf5pWnbXdd3j57xnb0V60FW1LVn9LRZkPtneODklzYuFZv7qK6riZ5BNyc0R0jZA==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "4.3.1"
+      }
+    },
+    "workbox-routing": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-4.3.1.tgz",
+      "integrity": "sha512-FkbtrODA4Imsi0p7TW9u9MXuQ5P4pVs1sWHK4dJMMChVROsbEltuE79fBoIk/BCztvOJ7yUpErMKa4z3uQLX+g==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "4.3.1"
+      }
+    },
+    "workbox-strategies": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-4.3.1.tgz",
+      "integrity": "sha512-F/+E57BmVG8dX6dCCopBlkDvvhg/zj6VDs0PigYwSN23L8hseSRwljrceU2WzTvk/+BSYICsWmRq5qHS2UYzhw==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "4.3.1"
+      }
+    },
+    "workbox-streams": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-4.3.1.tgz",
+      "integrity": "sha512-4Kisis1f/y0ihf4l3u/+ndMkJkIT4/6UOacU3A4BwZSAC9pQ9vSvJpIi/WFGQRH/uPXvuVjF5c2RfIPQFSS2uA==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "4.3.1"
+      }
+    },
+    "workbox-sw": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-4.3.1.tgz",
+      "integrity": "sha512-0jXdusCL2uC5gM3yYFT6QMBzKfBr2XTk0g5TPAV4y8IZDyVNDyj1a8uSXy3/XrvkVTmQvLN4O5k3JawGReXr9w=="
+    },
+    "workbox-window": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-window/-/workbox-window-4.3.1.tgz",
+      "integrity": "sha512-C5gWKh6I58w3GeSc0wp2Ne+rqVw8qwcmZnQGpjiek8A2wpbxSJb1FdCoQVO+jDJs35bFgo/WETgl1fqgsxN0Hg==",
+      "dev": true,
+      "requires": {
+        "workbox-core": "4.3.1"
+      }
+    },
     "wrap-ansi": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz",

package.json

@@ -50,7 +50,8 @@
     "sweetalert": "^1.1.3",
     "switchery": "git+https://github.com/abpetkov/switchery.git",
     "winston": "^2.4.3",
-    "winston-mongodb": "^2.0.10"
+    "winston-mongodb": "^2.0.10",
+    "workbox-sw": "^4.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.1.6",
@@ -62,6 +63,7 @@
     "gulp-nodemon": "^2.4.1",
     "gulp-uglify": "^3.0.1",
     "node-notifier": "^5.3.0",
-    "pump": "^3.0.0"
+    "pump": "^3.0.0",
+    "workbox-build": "^4.3.1"
   }
 }

public/src/css/home-loading.css

@@ -6,7 +6,7 @@
 	bottom: 0;
 	width: 100%;
 	height: 100%;
-	background: #fff;
+	background: #f3f3f4;
     z-index: 9999;
 }
 

public/src/css/site.css

@@ -14,6 +14,11 @@ html, body {
 body {
     font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
     font-size: 14px;
+    display: none;
+}
+
+body.shown {
+    display: block;
 }
 
 body.mCustomScrollbar .mCSB_scrollTools .mCSB_draggerContainer {

public/src/js/index.js

@@ -1,6 +1,4 @@
-var home_loading_timeout = 2000;
+var timeout = 1000;
-var isLoading = false;
-var timeout = 1000;
 var contentTimeout = 1500;
 var begin = new Date();
 var contentBegin = new Date();
@@ -30,7 +28,6 @@ $(function () {
             $(this).remove();
             begin = new Date();
             $("#load-list").show();
-            isLoading = true;
             $("#PageIndex").val(parseInt($("#PageIndex").val()) + 1);
             requestData();
         }
@@ -224,7 +221,7 @@ function addPage(index, data) {
             if (value.Source == "1") {
                 itemHtml = "<div uid=\""
                     + value.Alias
-                    + "\" class=\"blog-item " + ($(".home-loading").length > 0 ? "" : "animated fadeIn") + "\">"
+                    + "\" class=\"blog-item animated fadeIn" + "\">"
                     + "    <h4>"
                     + "        <a title=\""
                     + value.Title
@@ -263,7 +260,7 @@ function addPage(index, data) {
                     + "<\/div>"
                     + "<div class=\"hr-line-dashed\"></div>";
             } else {
-                itemHtml = "<div class=\"blog-item " + ($(".home-loading").length > 0 ? "" : "animated fadeIn") + "\" uid=\"" + value.Alias + "\"><a class=\"preview-link\" title=\"点击预览\"></a><h4><a href=\"/blog/"
+                itemHtml = "<div class=\"blog-item animated fadeIn" + "\" uid=\"" + value.Alias + "\"><a class=\"preview-link\" title=\"点击预览\"></a><h4><a href=\"/blog/"
                     + value.CategoryAlias + "/" + value.Alias + "\" target=\"_blank\" title=\"" + value.Title + "\">" + value.Title + "</a></h4><span title=\"文章分类\"><i class=\"fa fa-map-signs\"></i> " + "<a href=\"/blog/" + value.CategoryAlias + "\" target=\"_blank\">" + value.CateName + "</a>" + "</span> <span class=\"margin-left-20\" title=\"发布时间\"><i class=\"fa fa-clock-o\"></i> " + value.PublishDate + "</span><div class=\"clearfix\"></div><p>" + encodeHtml(value.Summary) + "</p></div><div class=\"hr-line-dashed\"></div>";
             }
             $("#page" + index).append(itemHtml);
@@ -291,21 +288,6 @@ function addPage(index, data) {
         $(".list-wrap ol").append("<li id=\"page" + index + "\"></li>");
         $("#page" + index).append("<div class=\"text-center text-muted\" style=\"line-height: 34px;\">暂无数据</div>");
     }
-    isLoading = false;
-    if ($(".home-loading").length > 0) {
-        var home_loading_end = new Date();
-        $("[data-toggle='tooltip']").tooltip("hide");
-        if (home_loading_end - home_loading_begin > home_loading_timeout) {
-            $(".home-loading").remove();
-            document.body.style.overflow = "auto";
-        } else {
-            var home_loading_timespan = home_loading_timeout - (home_loading_end - home_loading_begin);
-            setTimeout(function () {
-                $(".home-loading").remove();
-                document.body.style.overflow = "auto";
-            }, home_loading_timespan);
-        }
-    }
 }
 
 function encodeHtml(s) {

public/src/js/prehandler.js

@@ -0,0 +1,37 @@
+if ('serviceWorker' in navigator) {
+    let newWorker;
+    const home_loading_timeout = 2000;
+    const home_loading_begin = new Date();
+
+    navigator.serviceWorker.register('/sw.js').then(reg => {
+        // 不论是否已经安装sw，都会进到这里，所以在此处显示body
+        document.body.classList.add('shown');
+        reg.addEventListener('updatefound', () => {
+            // 显示 loading 动画
+            document.body.style.overflow = 'hidden';
+            document.querySelector('#home-loading').style.display = 'block';
+            newWorker = reg.installing;
+            newWorker.addEventListener('statechange', () => {
+                switch (newWorker.state) {
+                    case 'installed':
+                        const home_loading_end = new Date();
+                        if (home_loading_end - home_loading_begin > home_loading_timeout) {
+                            // 隐藏 loading 动画
+                            document.querySelector('#home-loading').style.display = 'none';
+                            document.body.style.overflow = 'auto';
+                        } else {
+                            var home_loading_timespan = home_loading_timeout - (home_loading_end - home_loading_begin);
+                            setTimeout(function () {
+                                // 隐藏 loading 动画
+                                document.querySelector('#home-loading').style.display = 'none';
+                                document.body.style.overflow = 'auto';
+                            }, home_loading_timespan);
+                        }
+                        break;
+                }
+            });
+        });
+    });
+} else {
+    document.body.classList.add('shown');
+}

public/src/js/sw.js

@@ -0,0 +1,89 @@
+/*
+ * Service Worker
+ * 如果要修改，请修改 public/src/js/sw.js 文件，根目录下的 sw 文件是自动生成的！
+ */
+importScripts('/nodeModules/workbox-sw/build/workbox-sw.js');
+if (workbox) {
+    workbox.setConfig({
+        // 设置本地模块路径，否则默认会走谷歌CDN
+        modulePathCb: moduleName => {
+            return `/nodeModules/${moduleName}/build/${moduleName}.prod.js`;
+        }
+    });
+
+    // 预缓存资源列表，需要自动生成
+    workbox.precaching.precacheAndRoute([]);
+
+    /**
+     * 第三方CDN资源，采用 StaleWhileRevalidate 策略
+     * 策略：当请求的路由有对应的 Cache 缓存结果就直接返回，
+     * 在返回 Cache 缓存结果的同时会在后台发起网络请求拿到请求结果并更新 Cache 缓存，
+     * 如果本来就没有 Cache 缓存的话，直接就发起网络请求并返回结果，这对用户来说是一种非常安全的策略
+     */
+    workbox.routing.registerRoute(
+        'https://cdn.bootcss.com/highlight.js/9.12.0/highlight.min.js',
+        new workbox.strategies.StaleWhileRevalidate()
+    );
+
+    workbox.routing.registerRoute(
+        'https://cdn.bootcss.com/highlight.js/9.12.0/styles/github.min.css',
+        new workbox.strategies.StaleWhileRevalidate()
+    );
+
+    workbox.routing.registerRoute(
+        'http://v3.jiathis.com/code/jia.js',
+        new workbox.strategies.StaleWhileRevalidate()
+    );
+
+    workbox.routing.registerRoute(
+        'https://hm.baidu.com/hm.js',
+        new workbox.strategies.StaleWhileRevalidate()
+    );
+
+    /**
+     * 本地资源，采用 CacheFirst 策略
+     * 策略：当匹配到请求之后直接从 Cache 缓存中取得结果，
+     * 如果 Cache 缓存中没有结果，才会发起网络请求，
+     * 拿到网络请求结果并将结果更新至 Cache 缓存，并将结果返回给客户端
+     */
+    workbox.routing.registerRoute(
+        new RegExp('.+\.(?:js|css|png|jpg|jpeg|svg|ico|swf|woff|woff2|eot|ttf")$'),
+        new workbox.strategies.CacheFirst()
+    );
+
+    /**
+     * 页面，采用 NetworkFirst 策略
+     * 策略：优先尝试拿到网络请求的返回结果，
+     * 如果拿到网络请求的结果，就将结果返回给客户端并且写入 Cache 缓存，
+     * 如果网络请求失败，那最后被缓存的 Cache 缓存结果就会被返回到客户端
+     */
+    workbox.routing.registerRoute(
+        function (context) {
+            var origin = self.location.origin;
+            var url = context.url.href;
+
+            // 首页
+            if (url === origin + '/') {
+                return true;
+            }
+
+            // 博客及文章详情页
+            if (url.indexOf(origin + '/blog') === 0) {
+                return true;
+            }
+
+            // 留言
+            if (url === origin + '/guestbook') {
+                return true;
+            }
+
+            // 关于
+            if (url === origin + '/about') {
+                return true;
+            }
+
+            return false;
+        },
+        new workbox.strategies.NetworkFirst()
+    );
+}

views/shared/layout.pug

@@ -8,25 +8,17 @@ html(lang='zh-CN')
         meta(name='description', content=`${description ? description : "iBlog"}`)
         link(href='/nodeModules/bootstrap/dist/css/bootstrap.min.css', rel='stylesheet')
         link(href=`${staticPrefix}/css/bootstrap-addon.css`, rel='stylesheet')
+        link(href=`${staticPrefix}/css/home-loading.css`, rel='stylesheet')
         link(href=`${staticPrefix}/css/site.css`, rel='stylesheet')
         link(href='/nodeModules/@fortawesome/fontawesome-free/css/all.min.css', rel='stylesheet')
         link(href=`${staticPrefix}/css/share.css`, rel='stylesheet')
         link(href=`${staticPrefix}/css/animate-custom.css`, rel='stylesheet')
         title=title
     body.fuelux
-        if(isRoot)
+        #home-loading.home-loading(style='display: none;')
-            link(href=`${staticPrefix}/css/home-loading.css`, rel='stylesheet')
+            #loading-con.loading-con
-            #home-loading.home-loading
+                .loading-circle
-                #loading-con.loading-con(style='display:none;')
+                img#loadingImg(alt='loading', src=settings.LogoPath)
-                    .loading-circle
-                    script.
-                        var home_loading_begin = new Date();
-                        document.body.style.overflow = "hidden";
-                        function imgLoad() {
-                            document.getElementById("home-loading").style.background = "#f3f3f4";
-                            document.getElementById("loading-con").style.display = "block";
-                        }
-                    img#loadingImg(alt='loading', src=settings.LogoPath, onload='imgLoad();')
         .navbar.navbar-default.navbar-fixed-top
             .container-fluid
                 .navbar-header
@@ -61,6 +53,7 @@ html(lang='zh-CN')
                                 i.fa.fa-language.fa-fw
                                 |  #{__("language")}
         block content
+        script(src=`${staticPrefix}/js/prehandler.js`, charset='utf-8')
         if(settings.EnableStatistics === 'true')
             // 百度统计代码
             script.