add pwa

public/index.html

@@ -47,7 +47,7 @@
           var __sampleRateInt = 100;
           try {
             var res = await fetch("/electron-config/ali-arms.js", {
-              cache: "no-store"
+              cache: "no-store",
             });
             var text = await res.text();
             __sampleRateInt = parseInt(text) || 100;
@@ -63,7 +63,7 @@
                 enableSPA: true,
                 sample: __sampleRateInt,
                 sendResource: true,
-                imgUrl: "https://arms-retcode.aliyuncs.com/r.png?"
+                imgUrl: "https://arms-retcode.aliyuncs.com/r.png?",
               };
               with (b)
                 with (body)

src/features/Login/Login.vue

@@ -145,7 +145,25 @@ export default {
     };
   },
   async mounted() {
-    await this.checkNewVersion();
+    // await this.checkNewVersion();
+    if (localStorage.getItem("__swReload")) {
+      localStorage.removeItem("__swReload");
+      this.$Message.info({
+        content: "正在更新版本...",
+      });
+      await new Promise(resolve => {
+        setTimeout(() => {
+          resolve();
+        }, 3000);
+      });
+      location.reload(true);
+    }
+    // manual precache for models
+    fetch("/models/tiny_face_detector_model-weights_manifest.json");
+    fetch("/models/face_landmark_68_model-weights_manifest.json");
+    // alread precached
+    // fetch("/models/tiny_face_detector_model-shard1");
+    // fetch("/models/face_landmark_68_model-shard1");
   },
   async created() {
     if (
@@ -435,7 +453,7 @@ export default {
       myHeaders.append("Content-Type", "application/javascript");
       myHeaders.append("Cache-Control", "no-cache");
       const response = await fetch(
-        document.scripts[document.scripts.length - 1].src,
+        document.scripts[document.scripts.length - 1].src + "?x" + Date.now(),
         {
           method: process.env.NODE_ENV === "development" ? "GET" : "HEAD",
           headers: myHeaders,
@@ -447,6 +465,15 @@ export default {
           "登录页面",
           "新版本发布后，客户端自动刷新",
         ]);
+        this.$Message.info({
+          content: "正在获取新版本...",
+        });
+        localStorage.setItem("__swReload", "anything");
+        await new Promise(resolve => {
+          setTimeout(() => {
+            resolve();
+          }, 1000);
+        });
         location.reload(true);
       }
     },

src/main.js

@@ -2,7 +2,7 @@ import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
-// import "./registerServiceWorker";
+import "./registerServiceWorker";
 
 import "./plugins/iview.js";
 import "./styles/global.css";

vue.config.js

@@ -72,4 +72,51 @@ module.exports = {
     devtool: "source-map",
     plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment|iview$/)],
   },
+  pwa: {
+    workboxPluginMode: "GenerateSW",
+    workboxOptions: {
+      importWorkboxFrom: "local",
+      navigateFallback: "index.html",
+      skipWaiting: true,
+      clientsClaim: true,
+      runtimeCaching: [
+        {
+          // Match any same-origin request that contains 'api'.
+          urlPattern: new RegExp(
+            "^https://cdn.qmth.com.cn/ui/ecs-client-bg.jpg!/progressive/true"
+          ),
+          // Apply a network-first strategy.
+          handler: "staleWhileRevalidate",
+          options: {
+            cacheableResponse: {
+              statuses: [0, 200],
+            },
+          },
+        },
+        {
+          // Match any same-origin request that contains 'api'.
+          urlPattern: /\/api\/ecs_core\/org\/propertyNoSession\/OE_STUDENT_SYS_NAME\?domainName=/,
+          // Apply a network-first strategy.
+          handler: "staleWhileRevalidate",
+        },
+        {
+          // Match any same-origin request that contains 'api'.
+          urlPattern: /\/api\/ecs_core\/org\/logo\?domain=/,
+          // Apply a network-first strategy.
+          handler: "staleWhileRevalidate",
+        },
+        {
+          // Match any same-origin request that contains 'api'.
+          urlPattern: /\/models\/.*\.json/,
+          // Apply a network-first strategy.
+          handler: "cacheFirst",
+          options: {
+            cacheableResponse: {
+              statuses: [0, 200],
+            },
+          },
+        },
+      ],
+    },
+  },
 };