Support PWA (#12)

kokororin · May 15, 2018 · 207c6c2 · 207c6c2
1 parent 26a41b7
commit 207c6c2
Show file tree

Hide file tree

Showing 7 changed files with 1,852 additions and 1,363 deletions.
diff --git a/build/webpack.config.base.js b/build/webpack.config.base.js
@@ -4,7 +4,7 @@ const webpack = require('webpack');
 module.exports = {
   output: {
     path: path.join(__dirname, '/../dist'),
-    filename: 'bundle.js',
+    filename: process.env.NODE_ENV === 'production' ? 'app.[hash].js' : 'app.js',
     publicPath: '/'
   },
   resolve: {

diff --git a/build/webpack.config.dev.js b/build/webpack.config.dev.js
@@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
 const OpenBrowserPlugin = require('open-browser-webpack-plugin');
 
 module.exports = {
@@ -38,6 +39,11 @@ module.exports = {
     new webpack.DefinePlugin({
       'process.env.NODE_ENV': '"development"'
     }),
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, '/../src/index.ejs'),
+      inject: 'body',
+      minify: false
+    }),
     new OpenBrowserPlugin({ url: 'http://localhost:23333' }),
     new webpack.HotModuleReplacementPlugin(),
     new webpack.NamedModulesPlugin()

diff --git a/build/webpack.config.prod.js b/build/webpack.config.prod.js
@@ -1,8 +1,9 @@
 /* eslint prefer-arrow-callback: 0 */
 const path = require('path');
-const fs = require('fs');
 const webpack = require('webpack');
-const minify = require('html-minifier').minify;
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
+const ManifestPlugin = require('webpack-manifest-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
   .BundleAnalyzerPlugin;
 const OptimizeJsPlugin = require('optimize-js-plugin');
@@ -43,99 +44,35 @@ module.exports = {
     new OptimizeJsPlugin({
       sourceMap: false
     }),
+    new HtmlWebpackPlugin({
+      template: path.join(__dirname, '/../src/index.ejs'),
+      inject: true,
+      hash: false,
+      minify: {
+        collapseWhitespace: true,
+        removeComments: true,
+        removeAttributeQuotes: false,
+        minifyJS: true,
+        minifyCSS: true,
+        processConditionalComments: true
+      }
+    }),
+    new SWPrecacheWebpackPlugin({
+      cacheId: 'pixiv-moe-app',
+      filename: 'service-worker.js',
+      minify: true,
+      navigateFallback: '/index.html',
+      navigateFallbackWhitelist: [/^(?!\/__).*/],
+      staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/]
+    }),
+    new ManifestPlugin({
+      fileName: 'asset-manifest.json'
+    }),
     new BundleAnalyzerPlugin({
       analyzerMode: 'static',
       reportFilename: path.join(__dirname, '/../dist/report.html'),
       openAnalyzer: false,
       generateStatsFile: false
-    }),
-    function() {
-      this.plugin('done', function(statsData) {
-        const stats = statsData.toJson();
-        if (!stats.errors.length) {
-          const htmlFileName = '/../dist/index.html';
-          const htmlFilePath = path.join(__dirname, htmlFileName);
-          const html = fs.readFileSync(htmlFilePath, 'utf8');
-
-          // let htmlOutput = html.replace(
-          //   /<script\s+src=(["'])(.+?)bundle\.js\1/i,
-          //   '<script src=$1$2' + stats.assetsByChunkName.main + '?' + stats.hash + '$1');
-
-          let htmlOutput = html.replace(
-            /<script\s+src=(["'])(.+?)bundle\.js(.*)<\/script>/i,
-            `<script type="text/javascript">
-(function(hash, src, localStorage, document, window) {
-  var createScript = function(url) {
-    var script = document.createElement("script");
-    script.setAttribute("src", url);
-    document.body.appendChild(script);
-  };
-
-  var runScript = function(code) {
-    if (window.execScript) {
-      window.execScript(code);
-    } else {
-      var head = document.head;
-      var script = document.createElement('script');
-      script.type = 'text/javascript';
-      script.text = code;
-      head.removeChild(head.appendChild(script));
-    }
-  };
-
-  if (localStorage) {
-    if (localStorage.bundle && localStorage.hash == hash) {
-      runScript(localStorage.bundle);
-    } else {
-      var xhr = new XMLHttpRequest;
-      xhr.open("GET", src, true);
-      xhr.onprogress = function(event) {
-        if (event.lengthComputable) {
-          var loading = document.getElementById('index-loading');
-          var progress = loading.getElementsByClassName('progress')[0];
-          var progressNumber = (event.loaded / event.total) * 100;
-          progress.innerHTML = progressNumber.toFixed(0) + '%';
-        }
-      };
-      xhr.onload = function() {
-        var res = xhr.responseText;
-        if (res && res.match(/^!/)) {
-          localStorage.bundle = res;
-          runScript(localStorage.bundle);
-          localStorage.hash = hash;
-        } else {
-          createScript(src);
-        }
-      };
-      xhr.send();
-    }
-  } else {
-    createScript(src);
-  }
-})("${stats.hash}", "$2${stats.assetsByChunkName
-              .main}?${stats.hash}", window.localStorage, document, window);
-</script>`
-          );
-
-          htmlOutput = minify(htmlOutput, {
-            collapseWhitespace: true,
-            removeComments: true,
-            minifyJS: true,
-            minifyCSS: true,
-            processConditionalComments: true
-          });
-
-          fs.writeFileSync(htmlFilePath, htmlOutput);
-          fs.writeFileSync(
-            htmlFilePath.replace('index.html', '404.html'),
-            htmlOutput
-          );
-          fs.writeFileSync(
-            htmlFilePath.replace('index.html', '.gitignore'),
-            'report.html'
-          );
-        }
-      });
-    }
+    })
   ]
 };
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "copy": "copyfiles -f ./src/index.html ./dist",
     "predist": "npm run clean && npm run copy",
     "dist": "cross-env NODE_ENV=production webpack --config build/webpack.config.js",
-    "postdist": "copyfiles -f ./src/icons/*.ico ./src/icons/*.png ./dist/assets",
+    "postdist": "copyfiles -f ./src/icons/*.ico ./src/icons/*.png ./dist/assets && copyfiles -f ./src/manifest.json ./dist",
     "archive": "cd dist && tar -czvf dist.tar.gz * --exclude=*.gz",
     "lint": "eslint --max-warnings 0 ./src",
     "lint:fix": "eslint --fix ./src",
@@ -59,6 +59,7 @@
     "file-loader": "^0.11.2",
     "glob": "^7.1.2",
     "html-minifier": "^3.5.3",
+    "html-webpack-plugin": "^3.2.0",
     "imports-loader": "^0.7.1",
     "istanbul-instrumenter-loader": "^3.0.0",
     "karma": "^1.7.0",
@@ -84,10 +85,12 @@
     "rimraf": "^2.4.3",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.18.2",
+    "sw-precache-webpack-plugin": "^0.11.5",
     "url-loader": "^0.5.9",
     "webpack": "^3.5.5",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-dev-server": "^2.7.1",
+    "webpack-manifest-plugin": "^2.0.2",
     "webpack-merge": "^4.1.0"
   },
   "dependencies": {

diff --git a/src/index.html → src/index.ejs b/src/index.html → src/index.ejs
@@ -4,6 +4,9 @@
 <head>
   <meta charset="utf-8">
   <title>pixivギャラリー</title>
+<% if (process.env.NODE_ENV === 'production') { %>
+  <link rel="manifest" href="/manifest.json">
+<% } %>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="description" content="pixiv.moe - pixivギャラリー - pixiv写真の壁" />
   <meta name="keywords" content="pixiv,pixivギャラリー,pixiv写真の壁,pixiv lovelive,lovelive,ラブライブ,μ's,Aqours,高坂穂乃果,絢瀬絵里,南ことり,園田海未,星空凛,西木野真姫,東條希,小泉花陽,矢澤にこ,綺羅ツバサ,統堂英玲奈,優木あんじゅ,高海千歌,桜内梨子,松浦果南,黒澤ダイヤ,渡辺曜,津島善子,国木田花丸,小原鞠莉,黒澤ルビィ" />
@@ -86,7 +89,17 @@
     }, 400);
   })();
   </script>
-  <script src="/bundle.js" type="text/javascript"></script>
+<% if (process.env.NODE_ENV === 'production') { %>
+  <script>
+  (function() {
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', function() {
+        navigator.serviceWorker.register('/service-worker.js');
+      });
+    }
+  })();
+  </script>
+<% } %>
 </body>
 
 </html>
diff --git a/src/manifest.json b/src/manifest.json
@@ -0,0 +1,16 @@
+{
+  "short_name": "pixivギャラリー",
+  "name": "pixivギャラリー",
+  "description": "pixiv.moe - pixivギャラリー - pixiv写真の壁",
+  "icons": [
+    {
+      "src": "/assets/apple-touch-icon-180x180.png",
+      "sizes": "180x180",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#2196F3",
+  "background_color": "#ffffff"
+}