From 9cca64da85dea9a676c0dd6fe97bad686355ec48 Mon Sep 17 00:00:00 2001
From: Wei Zhu <yesmeck@gmail.com>
Date: Fri, 1 Jun 2018 17:13:27 +0800
Subject: [PATCH] site: add offline support

---
 docs/react/introduce.en-US.md        |  2 +-
 docs/react/introduce.zh-CN.md        |  2 +-
 package.json                         |  1 +
 site/bisheng.config.js               | 32 +++++++++++++++++++++++++++-
 site/getExternalResources.js         | 19 +++++++++++++++++
 site/theme/index.js                  |  4 ++++
 site/theme/template/AppShell.jsx     |  7 ++++++
 site/theme/template/Layout/index.jsx |  5 +++++
 8 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 site/getExternalResources.js
 create mode 100644 site/theme/template/AppShell.jsx

diff --git a/docs/react/introduce.en-US.md b/docs/react/introduce.en-US.md
index 7ff90855df..2480cac267 100644
--- a/docs/react/introduce.en-US.md
+++ b/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>
diff --git a/docs/react/introduce.zh-CN.md b/docs/react/introduce.zh-CN.md
index 38db9c2066..1f3bab52a7 100644
--- a/docs/react/introduce.zh-CN.md
+++ b/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>
diff --git a/package.json b/package.json
index d53f338189..d5b21dc349 100644
--- a/package.json
+++ b/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",
diff --git a/site/bisheng.config.js b/site/bisheng.config.js
index d7bf706ed0..f1e2c23a64 100644
--- a/site/bisheng.config.js
+++ b/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;
   },
diff --git a/site/getExternalResources.js b/site/getExternalResources.js
new file mode 100644
index 0000000000..76821c1145
--- /dev/null
+++ b/site/getExternalResources.js
@@ -0,0 +1,19 @@
+const glob = require('glob');
+const fs = require('fs');
+const { uniq } = require('lodash');
+
+function getExternalResources() {
+  let resources = [];
+  const files = glob.sync('{./{components,docs}/**/*.md,./site/**/*.{less,js,jsx}}');
+  files.forEach((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) {
+      resources = resources.concat(matches);
+    }
+  });
+  return uniq(resources);
+}
+
+module.exports = getExternalResources;
diff --git a/site/theme/index.js b/site/theme/index.js
index f627cfa7d8..ac1f865b4f 100644
--- a/site/theme/index.js
+++ b/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,
     }, {
diff --git a/site/theme/template/AppShell.jsx b/site/theme/template/AppShell.jsx
new file mode 100644
index 0000000000..aa062436f6
--- /dev/null
+++ b/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 />;
diff --git a/site/theme/template/Layout/index.jsx b/site/theme/template/Layout/index.jsx
index 542812ed94..6a089a2ebc 100644
--- a/site/theme/template/Layout/index.jsx
+++ b/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');