Feature: add pwa (#1)

configs/webpack/common.js

@@ -3,15 +3,14 @@ const { resolve } = require('path')
 const { CheckerPlugin, TsConfigPathsPlugin } = require('awesome-typescript-loader')
 const StyleLintPlugin = require('stylelint-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+const OfflinePlugin = require('offline-plugin')
 
 module.exports = {
     resolve: {
         extensions: ['.ts', '.tsx', '.js', '.jsx', '.scss'],
-        plugins: [
+        plugins: [new TsConfigPathsPlugin()],
-            new TsConfigPathsPlugin()
-        ],
         alias: {
-            '@styles': resolve(__dirname, 'src/styles/')
+            '@styles': resolve(__dirname, 'src/styles/'),
         },
     },
     context: resolve(__dirname, '../../src'),
@@ -32,11 +31,7 @@ module.exports = {
             },
             {
                 test: /\.scss$/,
-                loaders: [
+                loaders: ['style-loader', { loader: 'css-loader', options: { importLoaders: 1 } }, 'sass-loader'],
-                    'style-loader',
-                    { loader: 'css-loader', options: { importLoaders: 1 } },
-                    'sass-loader',
-                ],
             },
             {
                 test: /\.(jpe?g|png|gif|svg)$/i,
@@ -50,10 +45,19 @@ module.exports = {
     plugins: [
         new CheckerPlugin(),
         new StyleLintPlugin(),
-        new HtmlWebpackPlugin({ template: 'index.html.ejs', }),
+        new HtmlWebpackPlugin({ template: 'index.html.ejs' }),
+        new OfflinePlugin({
+            ServiceWorker: {
+                events: true,
+            },
+            externals: [
+                'https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.production.min.js',
+                'https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.production.min.js',
+            ],
+        }),
     ],
     externals: {
-        'react': 'React',
+        react: 'React',
         'react-dom': 'ReactDOM',
     },
     performance: {

configs/webpack/dev.js

@@ -1,15 +1,17 @@
 // development config
 const merge = require('webpack-merge')
 const webpack = require('webpack')
+const { resolve } = require('path')
+const ManifestPlugin = require('webpack-pwa-manifest')
 const commonConfig = require('./common')
 
 module.exports = merge(commonConfig, {
     mode: 'development',
     entry: [
         'react-hot-loader/patch', // activate HMR for React
-        'webpack-dev-server/client?http://localhost:8080',// bundle the client for webpack-dev-server and connect to the provided endpoint
+        'webpack-dev-server/client?http://localhost:8080', // bundle the client for webpack-dev-server and connect to the provided endpoint
         'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
-        './index.ts' // the entry point of our app
+        './index.ts', // the entry point of our app
     ],
     devServer: {
         hot: true, // enable HMR on the server
@@ -19,5 +21,19 @@ module.exports = merge(commonConfig, {
     plugins: [
         new webpack.HotModuleReplacementPlugin(), // enable HMR globally
         new webpack.NamedModulesPlugin(), // prints more readable module names in the browser console on HMR updates
+        new ManifestPlugin({
+            name: 'Clash Development',
+            background_color: '#FFFFFF',
+            crossorigin: 'anonymous',
+            inject: true,
+            fingerprints: false,
+            icons: [
+                {
+                    src: resolve('src/assets/logo.png'),
+                    sizes: [96, 128, 192, 256],
+                    destination: 'img/icons',
+                },
+            ],
+        }),
     ],
 })

configs/webpack/prod.js

@@ -1,6 +1,7 @@
 // production config
 const merge = require('webpack-merge')
 const { resolve } = require('path')
+const ManifestPlugin = require('webpack-pwa-manifest')
 
 const commonConfig = require('./common')
 
@@ -13,5 +14,20 @@ module.exports = merge(commonConfig, {
         publicPath: '/',
     },
     devtool: 'source-map',
-    plugins: [],
+    plugins: [
+        new ManifestPlugin({
+            name: 'Clash',
+            background_color: '#FFFFFF',
+            crossorigin: 'anonymous',
+            inject: true,
+            fingerprints: false,
+            icons: [
+                {
+                    src: resolve('src/assets/logo.png'),
+                    sizes: [96, 128, 192, 256],
+                    destination: 'img/icons',
+                },
+            ],
+        }),
+    ],
 })

package.json

@@ -41,6 +41,7 @@
         "file-loader": "^2.0.0",
         "html-webpack-plugin": "^3.2.0",
         "image-webpack-loader": "^4.3.1",
+        "offline-plugin": "^5.0.5",
         "react-addons-test-utils": "^15.6.2",
         "react-hot-loader": "^4.3.11",
         "sass-loader": "^7.1.0",
@@ -55,7 +56,8 @@
         "webpack-cli": "^3.1.1",
         "webpack-dev-middleware": "^3.3.0",
         "webpack-dev-server": "^3.1.8",
-        "webpack-merge": "^4.1.4"
+        "webpack-merge": "^4.1.4",
+        "webpack-pwa-manifest": "^3.7.1"
     },
     "dependencies": {
         "classnames": "^2.2.6",

src/index.ts

@@ -1,5 +1,6 @@
 import renderApp from './render'
 import { isClashX, setupJsBridge } from '@lib/jsBridge'
+import * as OfflinePluginRuntime from 'offline-plugin/runtime'
 
 /**
  * Global entry
@@ -10,3 +11,21 @@ if (isClashX()) {
 } else {
     renderApp()
 }
+
+// PWA install
+OfflinePluginRuntime.install({
+    onUpdateReady: () => {
+        console.log('SW Event:', 'onUpdateReady')
+        // Tells to new SW to take control immediately
+        OfflinePluginRuntime.applyUpdate()
+    },
+    onUpdated: () => {
+        console.log('SW Event:', 'onUpdated')
+        // Reload the webpage to load into the new version
+        window.location.reload()
+    },
+
+    onUpdateFailed: () => {
+        console.error('SW Event:', 'onUpdateFailed')
+    },
+})