Add offline support (#10738)

* site: add offline support

* test update

* Revert "test update"

This reverts commit e1cb2fba80e44c7d4c248656a4d020cdfb323c0e.

* use reduce

docs/react/introduce.en-US.md

@@ -8,7 +8,7 @@ Following the Ant Design specification, we developed a React UI library `antd` t
 <div class="pic-plus">
   <img width="150" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
   <span>+</span>
-  <img width="160" src="https://t.alipayobjects.com/images/rmsweb/T16xRhXkxbXXXXXXXX.svg">
+  <img width="160" src="https://gw.alipayobjects.com/zos/rmsportal/tXlLQhLvkEelMstLyHiN.svg">
 </div>
 
 <style>

docs/react/introduce.zh-CN.md

@@ -8,7 +8,7 @@ title: Ant Design of React
 <div class="pic-plus">
   <img width="150" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
   <span>+</span>
-  <img width="160" src="https://t.alipayobjects.com/images/rmsweb/T16xRhXkxbXXXXXXXX.svg">
+  <img width="160" src="https://gw.alipayobjects.com/zos/rmsportal/tXlLQhLvkEelMstLyHiN.svg">
 </div>
 
 <style>

package.json

@@ -135,6 +135,7 @@
     "majo": "^0.6.2",
     "mockdate": "^2.0.1",
     "moment-timezone": "^0.5.5",
+    "offline-plugin": "^5.0.3",
     "pre-commit": "^1.2.2",
     "preact": "^8.2.5",
     "preact-compat": "^3.17.0",

site/bisheng.config.js

@@ -1,6 +1,8 @@
 const path = require('path');
 const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default;
+const OfflinePlugin = require('offline-plugin');
 const replaceLib = require('antd-tools/lib/replaceLib');
+const getExternalResources = require('./getExternalResources');
 
 const isDev = process.env.NODE_ENV === 'development';
 const usePreact = process.env.REACT_ENV === 'preact';
@@ -108,7 +110,35 @@ module.exports = {
 
     alertBabelConfig(config.module.rules);
 
-    config.plugins.push(new CSSSplitWebpackPlugin({ size: 4000 }));
+    config.plugins.push(
+      new CSSSplitWebpackPlugin({ size: 4000 }),
+      new OfflinePlugin({
+        appShell: '/app-shell',
+        caches: {
+          main: [':rest:'],
+          additional: [':externals:'],
+        },
+        externals: [
+          '/app-shell',
+          'https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.woff',
+          'https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.eot',
+          'https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.svg',
+          'https://at.alicdn.com/t/font_148784_v4ggb6wrjmkotj4i.ttf',
+          'https://img.shields.io/npm/v/antd.svg?style=flat-square',
+          'https://badges.gitter.im/ant-design/ant-design-english.svg',
+          'https://badges.gitter.im/Join%20Chat.svg',
+        ].concat(getExternalResources()),
+        responseStrategy: 'network-first',
+        safeToUseOptionalCaches: true,
+        ServiceWorker: {
+          events: true,
+          prefetchRequest: {
+            mode: 'no-cors',
+          },
+        },
+        AppCache: false,
+      }),
+    );
 
     return config;
   },

site/getExternalResources.js

@@ -0,0 +1,19 @@
+const glob = require('glob');
+const fs = require('fs');
+const { uniq } = require('lodash');
+
+function getExternalResources() {
+  const files = glob.sync('{./{components,docs}/**/*.md,./site/**/*.{less,js,jsx}}');
+  const resources = files.reduce((acc, file) => {
+    const content = fs.readFileSync(file, 'utf-8');
+    const pattern = new RegExp('(https://.+\\.alipayobjects\\.com/.+\\.(png|jpg|svg)|)', 'mg');
+    const matches = content.match(pattern);
+    if (matches) {
+      acc = acc.concat(matches);
+    }
+    return acc;
+  }, []);
+  return uniq(resources);
+}
+
+module.exports = getExternalResources;

site/theme/index.js

@@ -4,6 +4,7 @@ const path = require('path');
 const homeTmpl = './template/Home/index';
 const contentTmpl = './template/Content/index';
 const redirectTmpl = './template/Redirect';
+const appShellTmpl = './template/AppShell';
 
 function pickerGenerator(module) {
   const tester = new RegExp(`^docs/${module}`);
@@ -58,6 +59,9 @@ module.exports = {
     component: './template/Layout/index',
     indexRoute: { component: homeTmpl },
     childRoutes: [{
+      path: 'app-shell',
+      component: appShellTmpl,
+    }, {
       path: 'index-cn',
       component: homeTmpl,
     }, {

site/theme/template/AppShell.jsx

@@ -0,0 +1,7 @@
+/**
+ * Empty component for app shell
+ * See https://github.com/NekR/offline-plugin/blob/master/docs/app-shell.md
+ */
+import React from 'react';
+
+export default () => <div />;

site/theme/template/Layout/index.jsx

@@ -6,12 +6,17 @@ import { addLocaleData, IntlProvider } from 'react-intl';
 import 'moment/locale/zh-cn';
 import { LocaleProvider } from 'antd';
 import zhCN from 'antd/lib/locale-provider/zh_CN';
+import OfflineRuntime from 'offline-plugin/runtime';
 import Header from './Header';
 import Footer from './Footer';
 import enLocale from '../../en-US';
 import cnLocale from '../../zh-CN';
 import * as utils from '../utils';
 
+if (typeof window !== 'undefined') {
+  OfflineRuntime.install();
+}
+
 if (typeof window !== 'undefined') {
   /* eslint-disable global-require */
   require('../../static/style');