fix(serviceworker): use original workbox webpack plugin, removed @vue…

…/cli-plugin-pwa ref https://medium.com/@stephen.trevor.wong/3-steps-to-add-pwa-to-vue-js-3a352a969d58
penguin-statistics · Apr 3, 2020 · f4efa53 · f4efa53 · vercel · Apr 3, 2020
1 parent b218c31
commit f4efa53
Show file tree

Hide file tree

Showing 10 changed files with 1,339 additions and 380 deletions.
diff --git a/package.json b/package.json
@@ -23,7 +23,6 @@
     "dayjs": "^1.8.23",
     "extract-domain": "^2.2.1",
     "js-cookie": "^2.2.1",
-    "register-service-worker": "^1.7.1",
     "vue": "^2.6.10",
     "vue-analytics": "^5.22.1",
     "vue-i18n": "^8.0.0",
@@ -37,7 +36,6 @@
     "@mdi/font": "^3.8.95",
     "@vue/cli-plugin-babel": "^3.9.0",
     "@vue/cli-plugin-eslint": "^3.9.0",
-    "@vue/cli-plugin-pwa": "^3.10.0",
     "@vue/cli-service": "^3.9.0",
     "axios": "^0.19.0",
     "babel-eslint": "^10.0.1",
@@ -55,7 +53,8 @@
     "vue-svg-inline-loader": "^1.5.0",
     "vue-template-compiler": "^2.6.10",
     "vuetify-loader": "^1.4.3",
-    "webpack": "^4.42.0"
+    "webpack": "^4.42.1",
+    "workbox-webpack-plugin": "^5.1.2"
   },
   "postcss": {
     "plugins": {

diff --git a/public/index.html b/public/index.html
@@ -9,6 +9,17 @@
   <title>企鹅物流数据统计</title>
   <link rel="preconnect" href="https://penguin.upyun.galvincdn.com">
   <style>#app,body,html{height:100vh;margin:0;padding:0;transition:background .3s cubic-bezier(.25,.8,.5,1)!important}body{background:#121212}#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;z-index:999999;background:#121212;background:linear-gradient(to top right,#294266 30%,#00608c)}#loader-logo{top:20%;height:100px;width:100px;margin:-50px 0 0 -50px}#loader-logo,.sk-chase{display:block;position:relative;left:50%}.sk-chase{top:50%;width:72px;height:72px;margin:-152px 0 0 -36px;animation:sk-chase 2.5s infinite linear both}.sk-chase-dot{width:100%;height:100%;position:absolute;left:0;top:0;animation:sk-chase-dot 2s infinite cubic-bezier(.455,.03,.515,.955) both}.sk-chase-dot:before{content:'';display:block;width:25%;height:25%;background-color:#f0f0f0;border-radius:100%;animation:sk-chase-dot-before 2s infinite cubic-bezier(.455,.03,.515,.955) both}.sk-chase-dot:nth-child(1){animation-delay:-1.1s}.sk-chase-dot:nth-child(2){animation-delay:-1s}.sk-chase-dot:nth-child(3){animation-delay:-.9s}.sk-chase-dot:nth-child(4){animation-delay:-.8s}.sk-chase-dot:nth-child(5){animation-delay:-.7s}.sk-chase-dot:nth-child(6){animation-delay:-.6s}.sk-chase-dot:nth-child(1):before{animation-delay:-1.1s}.sk-chase-dot:nth-child(2):before{animation-delay:-1s}.sk-chase-dot:nth-child(3):before{animation-delay:-.9s}.sk-chase-dot:nth-child(4):before{animation-delay:-.8s}.sk-chase-dot:nth-child(5):before{animation-delay:-.7s}.sk-chase-dot:nth-child(6):before{animation-delay:-.6s}@keyframes sk-chase{to{transform:rotate(360deg)}}@keyframes sk-chase-dot{80%,to{transform:rotate(360deg)}}@keyframes sk-chase-dot-before{50%{transform:scale(.4)}0%,to{transform:scale(1)}}#loader-wrapper .load_text{font-family:Open Sans,sans-serif;color:#f0f0f0;font-size:19px;width:100%;text-align:center;z-index:9999999999999;position:absolute;opacity:1;line-height:30px}#loader-wrapper .load_title{top:55%}#loader-wrapper .load_footer{bottom:15%;opacity:.7;font-size:13px}#loader-wrapper .load_text span.load_caption{line-height:16px;font-weight:400;font-size:13px;color:#f0f0f0;opacity:.5}</style>
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
+  <link rel="manifest" href="/manifest.json">
+  <meta name="theme-color" content="#2d66ba">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+  <meta name="apple-mobile-web-app-title" content="企鹅物流数据统计">
+  <link rel="apple-touch-icon" href="/favicon/apple-touch-icon.png">
+  <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#2d66ba">
+  <meta name="msapplication-TileImage" content="/favicon/mstile-150x150.png">
+  <meta name="msapplication-TileColor" content="#1d499b">
 </head>
 <body>
 <noscript><style type="text/css">body{background:#4d2222}.nojs h1{font-size:48px}.nojs h2{font-size:36px}.nojs hr{margin:48px 0;border:1px solid #000}.nojs{vertical-align:middle;margin:32px 13%;width:70%;font-weight:700;font-size:18px;font-family:-apple-system,Noto Sans SC,BlinkMacSystemFont,"Segoe UI",Microsoft YaHei UI,Microsoft Yahei,微软雅黑,Helvetica,Arial,sans-serif;padding:36px 48px;word-break:break-all;text-align:center;line-height:2;border-radius:8px;background:#cc696f;border:4px solid #ff878f;color:#261415}.nojs a{display:inline-block;border:2px solid #000;padding:16px 24px;margin:0 8px;text-decoration:none;background:#3375e0;color:#fff;font-family:sans-serif;font-size:14px;cursor:pointer;text-align:center;transition:background 50ms ease-out,transform 150ms ease;-webkit-appearance:none;-moz-appearance:none}.nojs a:focus,.nojs a:hover{background:#368dff;color:#000;transform:scale(1.05)}.nojs a:focus{outline:1px solid #fff;outline-offset:-4px}.nojs a:active{transform:scale(.99)}.nojs del{padding:4px 8px;background:#000;color:#fff}</style><div class="nojs"><h1>JavaScript 已被禁用</h1><p>很抱歉，但企鹅物流数据统计需要您启用 <del>等离子发动机（不是）</del> JavaScript 以提供服务。若您确信自己已开启相关技术，那么可能是您的浏览器版本太低了；请点击下方按钮升级浏览器。</p><hr><a href="https://www.google.cn/chrome/" title="得益于内置的 Google 智能工具，Chrome 现在更易用、更安全、更快速。" target="_blank">使用 Google Chrome (推荐)</a> <a href="https://www.mozilla.org/zh-CN/firefox/new/" title="使用我们一系列隐私优先产品，得回您应受到的重视。" target="_blank">使用 Mozilla Firefox</a><br><p>&copy; 企鹅物流</p></div></noscript>

diff --git a/src/components/global/PWAPopups.vue b/src/components/global/PWAPopups.vue
@@ -54,45 +54,28 @@
 </template>
 
 <script>
-  import snackbar from "@/utils/snackbar";
-
   export default {
     name: "PWAPopups",
     data() {
       return {
         update: {
-          enabled: window.SW_UPDATED || false,
+          enabled: false,
           loading: false,
         }
       }
     },
     created () {
-      const context = this;
-      window.addEventListener("message", context.serviceWorkerMessageHandler)
-    },
-    beforeDestroy () {
-      const context = this;
-      window.removeEventListener("message", context.serviceWorkerMessageHandler)
+      if (this.$workbox) {
+        this.$workbox.addEventListener("waiting", () => {
+          this.update.enabled = true;
+        });
+      }
     },
     methods: {
-      serviceWorkerMessageHandler (evt) {
-        if (evt && evt.data && evt.data.from === "serviceWorker" && evt.data.action === "updated") {
-          this.update.enabled = true
-        }
-      },
-      refresh() {
+      async refresh() {
         this.update.loading = true;
-        window.postMessage({
-          to: "serviceWorker",
-          action: "skipWaiting"
-        }, "*");
-
-        setTimeout(() => {
-          this.update.loading = false;
-          this.update.enabled = false;
-          snackbar.launch("error", 10000, "pwaPopup.update.skipWaitingTimeout")
-        }, 10000)
-      }
+        await this.$workbox.messageSW({ type: "SKIP_WAITING" });
+      },
     },
   }
 </script>

diff --git a/src/main.js b/src/main.js
@@ -1,3 +1,5 @@
+import workbox from "./registerServiceWorker"
+
 import Vue from 'vue'
 import vuetify from './plugins/vuetify';
 import 'vuetify/dist/vuetify.min.css'
@@ -9,8 +11,6 @@ import i18n from "@/i18n"
 import config from "@/config"
 import VueNumberInput from '@chenfengyuan/vue-number-input';
 
-import './serviceWorker/register'
-
 import * as Sentry from '@sentry/browser';
 import * as Integrations from '@sentry/integrations';
 import { Integrations as ApmIntegrations } from '@sentry/apm';
@@ -88,6 +88,8 @@ Vue.config.productionTip = false;
 
 Vue.use(VueNumberInput);
 
+Vue.prototype.$workbox = workbox;
+
 new Vue({
   vuetify,
   router,

diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
@@ -0,0 +1,19 @@
+/* eslint-disable no-console */
+
+import { Workbox } from "workbox-window";
+
+let workbox;
+
+if (process.env.NODE_ENV === "production" && "serviceWorker" in navigator) {
+  workbox = new Workbox(`${process.env.BASE_URL}service-worker.js`);
+
+  workbox.addEventListener("controlling", () => {
+    window.location.reload();
+  });
+
+  workbox.register();
+} else {
+  workbox = null;
+}
+
+export default workbox;
diff --git a/src/serviceWorker/register.js b/src/serviceWorker/register.js
diff --git a/src/serviceWorker/service-worker.js b/src/serviceWorker/service-worker.js
diff --git a/src/views/About/Donate.vue b/src/views/About/Donate.vue
@@ -101,13 +101,13 @@
         sm="6"
       >
         <v-card class="bkop-light py-4 elevation-5">
-          <v-img
+          <img
+            svg-inline
             :src="require('@/assets/qrcodes/alipay-qrcode.svg')"
             :alt="$t('donate.methods.alipay')"
-            max-height="128px"
-            contain
-            aspect-ratio="1"
-          />
+            style="max-height: 128px"
+            class="d-block justify-center mx-auto"
+          >
 
           <v-row
             align="center"
@@ -142,13 +142,13 @@
         sm="6"
       >
         <v-card class="bkop-light py-4 elevation-5">
-          <v-img
+          <img
+            svg-inline
             :src="require('@/assets/qrcodes/wechatpay-qrcode.svg')"
             :alt="$t('donate.methods.wechatPay')"
-            max-height="128px"
-            contain
-            aspect-ratio="1"
-          />
+            style="max-height: 128px"
+            class="d-block justify-center mx-auto"
+          >
 
           <v-row
             align="center"

diff --git a/vue.config.js b/vue.config.js
@@ -1,4 +1,5 @@
 const webpack = require("webpack");
+const { GenerateSW } = require("workbox-webpack-plugin");
 
 let commitHash;
 
@@ -28,31 +29,31 @@ module.exports = {
   },
   integrity: true,
   runtimeCompiler: true,
-  pwa: {
-    name: "企鹅物流数据统计",
-    themeColor: "#2d66ba",
-    msTileColor: "#1d499b",
-    appleMobileWebAppCapable: "yes",
-    appleMobileWebAppStatusBarStyle: "black-translucent",
-
-    workboxPluginMode: "InjectManifest",
-    workboxOptions: {
-      swSrc: "src/serviceWorker/service-worker.js",
-      exclude: [
-        /\.map$/,
-        /favicon\.ico$/,
-        /manifest\.json$/,
-        /precache-manifest.\.json$/,
-      ]
-    },
-    iconPaths: {
-      favicon32: 'favicon/favicon-32x32.png',
-      favicon16: 'favicon/favicon-16x16.png',
-      appleTouchIcon: 'favicon/apple-touch-icon.png',
-      maskIcon: 'favicon/safari-pinned-tab.svg',
-      msTileImage: 'favicon/mstile-150x150.png'
-    }
-  },
+  // pwa: {
+  //   name: "企鹅物流数据统计",
+  //   themeColor: "#2d66ba",
+  //   msTileColor: "#1d499b",
+  //   appleMobileWebAppCapable: "yes",
+  //   appleMobileWebAppStatusBarStyle: "black-translucent",
+  //
+  //   workboxPluginMode: "InjectManifest",
+  //   workboxOptions: {
+  //     swSrc: "src/serviceWorker/service-worker.js",
+  //     exclude: [
+  //       /\.map$/,
+  //       /favicon\.ico$/,
+  //       /manifest\.json$/,
+  //       /precache-manifest.\.json$/,
+  //     ]
+  //   },
+  //   iconPaths: {
+  //     favicon32: 'favicon/favicon-32x32.png',
+  //     favicon16: 'favicon/favicon-16x16.png',
+  //     appleTouchIcon: 'favicon/apple-touch-icon.png',
+  //     maskIcon: 'favicon/safari-pinned-tab.svg',
+  //     msTileImage: 'favicon/mstile-150x150.png'
+  //   }
+  // },
   transpileDependencies: [
     "vuetify"
   ],
@@ -61,13 +62,19 @@ module.exports = {
       new webpack.DefinePlugin({
         GIT_COMMIT: JSON.stringify(commitHash).trim()
       }),
+      // new CopyWebpackPlugin([
+      //   {
+      //     from: "./serviceWorker/register.js",
+      //     to: "register.js"
+      //   }
+      // ])
+      new GenerateSW()
     ],
   },
   chainWebpack: config => {
     config.module
       .rule("vue")
       .use("vue-svg-inline-loader")
-      .loader("vue-svg-inline-loader")
-      .options();
+      .loader("vue-svg-inline-loader");
   }
 };