feat: support pwa config (#3508)

* feat: support pwa config

* style: change code style

config/config.js

@@ -5,6 +5,8 @@ import webpackPlugin from './plugin.config';
 import defaultSettings from '../src/defaultSettings';
 import slash from 'slash2';
 
+const { pwa, primaryColor } = defaultSettings;
+
 const plugins = [
   [
     'umi-plugin-react',
@@ -22,12 +24,14 @@ const plugins = [
         loadingComponent: './components/PageLoading/index',
         webpackChunkName: true,
       },
-      pwa: {
+      pwa: pwa
-        workboxPluginMode: 'InjectManifest',
+        ? {
-        workboxOptions: {
+            workboxPluginMode: 'InjectManifest',
-          importWorkboxFrom: 'local',
+            workboxOptions: {
-        },
+              importWorkboxFrom: 'local',
-      },
+            },
+          }
+        : {},
       ...(!process.env.TEST && os.platform() === 'darwin'
         ? {
             dll: {
@@ -67,7 +71,7 @@ export default {
   // Theme for antd
   // https://ant.design/docs/react/customize-theme-cn
   theme: {
-    'primary-color': defaultSettings.primaryColor,
+    'primary-color': primaryColor,
   },
   externals: {
     '@antv/data-set': 'DataSet',

src/defaultSettings.js

@@ -10,4 +10,5 @@ module.exports = {
     disableLocal: false,
   },
   title: 'Ant Design Pro',
+  pwa: true,
 };

src/global.js

@@ -1,54 +1,59 @@
 import React from 'react';
 import { notification, Button, message } from 'antd';
 import { formatMessage } from 'umi/locale';
+import defaultSettings from './defaultSettings';
 
-// Notify user if offline now
+const { pwa } = defaultSettings;
-window.addEventListener('sw.offline', () => {
+// if pwa is true
-  message.warning(formatMessage({ id: 'app.pwa.offline' }));
+if (pwa) {
-});
+  // Notify user if offline now
+  window.addEventListener('sw.offline', () => {
+    message.warning(formatMessage({ id: 'app.pwa.offline' }));
+  });
 
-// Pop up a prompt on the page asking the user if they want to use the latest version
+  // Pop up a prompt on the page asking the user if they want to use the latest version
-window.addEventListener('sw.updated', e => {
+  window.addEventListener('sw.updated', e => {
-  const reloadSW = async () => {
+    const reloadSW = async () => {
-    // Check if there is sw whose state is waiting in ServiceWorkerRegistration
+      // Check if there is sw whose state is waiting in ServiceWorkerRegistration
-    // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration
+      // https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorkerRegistration
-    const worker = e.detail && e.detail.waiting;
+      const worker = e.detail && e.detail.waiting;
-    if (!worker) {
+      if (!worker) {
-      return Promise.resolve();
+        return Promise.resolve();
-    }
+      }
-    // Send skip-waiting event to waiting SW with MessageChannel
+      // Send skip-waiting event to waiting SW with MessageChannel
-    await new Promise((resolve, reject) => {
+      await new Promise((resolve, reject) => {
-      const channel = new MessageChannel();
+        const channel = new MessageChannel();
-      channel.port1.onmessage = event => {
+        channel.port1.onmessage = event => {
-        if (event.data.error) {
+          if (event.data.error) {
-          reject(event.data.error);
+            reject(event.data.error);
-        } else {
+          } else {
-          resolve(event.data);
+            resolve(event.data);
-        }
+          }
-      };
+        };
-      worker.postMessage({ type: 'skip-waiting' }, [channel.port2]);
+        worker.postMessage({ type: 'skip-waiting' }, [channel.port2]);
+      });
+      // Refresh current page to use the updated HTML and other assets after SW has skiped waiting
+      window.location.reload(true);
+      return true;
+    };
+    const key = `open${Date.now()}`;
+    const btn = (
+      <Button
+        type="primary"
+        onClick={() => {
+          notification.close(key);
+          reloadSW();
+        }}
+      >
+        {formatMessage({ id: 'app.pwa.serviceworker.updated.ok' })}
+      </Button>
+    );
+    notification.open({
+      message: formatMessage({ id: 'app.pwa.serviceworker.updated' }),
+      description: formatMessage({ id: 'app.pwa.serviceworker.updated.hint' }),
+      btn,
+      key,
+      onClose: async () => {},
     });
-    // Refresh current page to use the updated HTML and other assets after SW has skiped waiting
-    window.location.reload(true);
-    return true;
-  };
-  const key = `open${Date.now()}`;
-  const btn = (
-    <Button
-      type="primary"
-      onClick={() => {
-        notification.close(key);
-        reloadSW();
-      }}
-    >
-      {formatMessage({ id: 'app.pwa.serviceworker.updated.ok' })}
-    </Button>
-  );
-  notification.open({
-    message: formatMessage({ id: 'app.pwa.serviceworker.updated' }),
-    description: formatMessage({ id: 'app.pwa.serviceworker.updated.hint' }),
-    btn,
-    key,
-    onClose: async () => {},
   });
-});
+}