SokichiFujita · SokichiFujita · Mar 18, 2019 · Mar 18, 2019 · Mar 18, 2019 · Mar 18, 2019
diff --git a/bin/app/App.js b/bin/app/App.js
@@ -8,6 +8,21 @@ import SampleContainer from "./components/SampleContainer";
 
 const muiTheme = createMuiTheme({});
 
+if ("serviceWorker" in navigator) {
+  window.addEventListener("load", () => {
+    navigator.serviceWorker
+      .register("sw.js")
+      .then(reg => {
+        console.log("ServiceWorker is registered.", reg);
+      })
+      .catch(err => {
+        console.log("ServiceWorker registration error.", err);
+      });
+  });
+} else {
+  console.log("Your browser doesn't suppert ServiceWorker.", navigator);
+}
+
 render(
   <MuiThemeProvider theme={muiTheme}>
     <Router>

diff --git a/bin/app/components/Content.js b/bin/app/components/Content.js
diff --git a/bin/app/components/Menu.js b/bin/app/components/Menu.js
diff --git a/bin/app/components/Navi.js b/bin/app/components/Navi.js
@@ -1,25 +1,60 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types'; 
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
+import React, { useState } from "react";
 
-class Navi extends Component {
-  render() {
-    return (
-      <AppBar position="absolute" style={this.props.style}>
+import AppBar from "@material-ui/core/AppBar";
+import Toolbar from "@material-ui/core/Toolbar";
+import Typography from "@material-ui/core/Typography";
+
+import ListSubheader from "@material-ui/core/ListSubheader";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import Drawer from "@material-ui/core/Drawer";
+
+import IconButton from "@material-ui/core/IconButton";
+import MenuIcon from "@material-ui/icons/Menu";
+
+import { Link } from "react-router-dom";
+
+const Navi = ({ title }) => {
+  const [isOpen, setOpen] = useState(false);
+  return (
+    <>
+      <AppBar position="sticky" style={{ backgroundColor: "white" }}>
         <Toolbar>
-          <Typography variant="title" color="inherit">
-            {this.props.title}
-          </Typography>
+          <IconButton onClick={() => setOpen(!isOpen)}>
+            <MenuIcon />
+          </IconButton>
+          <div
+            style={{
+              fontWeight: 900,
+              fontSize: 20,
+              marginLeft: 24,
+              color: "black"
+            }}
+          >
+            {title}
+          </div>
         </Toolbar>
       </AppBar>
-    );
-  }
-}
-
-Navi.propTypes = {
-  title: PropTypes.string.isRequired,
-}
+      <Drawer open={isOpen} onClose={() => setOpen(false)}>
+        <List
+          style={{
+            width: 200,
+            height: "100%",
+            backgroundColor: "rgb(44,44,44)",
+            color: "white"
+          }}
+        >
+          <ListSubheader style={{ color: "white" }}>Menu</ListSubheader>
+          <ListItem component={Link} to="/" button>
+            Top
+          </ListItem>
+          <ListItem component={Link} to="/sample" button>
+            Sample
+          </ListItem>
+        </List>
+      </Drawer>
+    </>
+  );
+};
 
 export default Navi;
diff --git a/bin/app/html/favicon.ico b/bin/app/html/favicon.ico
diff --git a/bin/app/html/index.html b/bin/app/html/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title><%= htmlWebpackPlugin.options.title %></title>
+    <link rel="stylesheet" href="./css/style.css" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto|Montserrat:200,300,400,900|Merriweather"
+      rel="stylesheet"
+      type="text/css"
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/bin/app/icon/icon.png b/bin/app/icon/icon.png
diff --git a/bin/app/sw.js b/bin/app/sw.js
@@ -0,0 +1,65 @@
+console.log(`${new Date()}: Service Worker is loaded`);
+
+// Set cache name for multiple projects.
+// @see https://developers.google.com/web/tools/workbox/modules/workbox-core
+workbox.core.setCacheNameDetails({
+  prefix: "starter-react-flux",
+  suffix: "v1",
+  precache: "install-time",
+  runtime: "run-time",
+  googleAnalytics: "ga"
+});
+
+workbox.core.skipWaiting();
+workbox.core.clientsClaim();
+
+// Enable google analytics for offline
+// @see https://developers.google.com/web/tools/workbox/modules/workbox-google-analytics
+// workbox.googleAnalytics.initialize();
+
+workbox.precaching.precacheAndRoute(self.__precacheManifest);
+
+// Cache Google Fonts
+workbox.routing.registerRoute(
+  "https://fonts.googleapis.com/(.*)",
+  new workbox.strategies.CacheFirst({
+    cacheName: "google-fonts",
+    cacheableResponse: { statuses: [0, 200] }
+  })
+);
+
+// Static content from Google
+workbox.routing.registerRoute(
+  /.*(?:gstatic)\.com.*$/,
+  new workbox.strategies.CacheFirst({
+    cacheName: "google-static"
+  })
+);
+
+// Cache any images which are included the extention list
+workbox.routing.registerRoute(
+  /\.(?:png|gif|jpg|svg)$/,
+  new workbox.strategies.CacheFirst({
+    cacheName: "image-content",
+    cacheableResponse: { statuses: [0, 200] }
+  })
+);
+
+// Cache any JavaScript and CSS which are included the extention list
+workbox.routing.registerRoute(
+  /\.(?:js|css)$/,
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: "static-resources",
+    cacheableResponse: { statuses: [0, 200] }
+  })
+);
+
+// Cache any HTTP Content
+workbox.routing.registerRoute(
+  /^http.*/,
+  new workbox.strategies.StaleWhileRevalidate({
+    cacheName: "http-content",
+    cacheableResponse: { statuses: [0, 200] }
+  }),
+  "GET"
+);
diff --git a/bin/app/webpack.common.js b/bin/app/webpack.common.js
@@ -0,0 +1,50 @@
+const webpack = require("webpack");
+const path = require("path");
+const { InjectManifest } = require("workbox-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const WebpackPwaManifest = require("webpack-pwa-manifest");
+
+const config = {
+  entry: path.resolve(__dirname, "app/App.js"),
+  output: {
+    path: path.resolve(__dirname, "public"),
+    filename: "bundle.js"
+  },
+  module: {
+    rules: [
+      {
+        test: /.jsx?$/,
+        exclude: [path.resolve(__dirname, "node_modules")],
+        loader: "babel-loader"
+      }
+    ]
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: "./app/html/index.html",
+      title: "Starter-React-Flux"
+    }),
+    new InjectManifest({
+      swSrc: path.resolve(__dirname, "app", "sw.js"),
+      swDest: path.resolve(__dirname, "public", "sw.js")
+    }),
+    new WebpackPwaManifest({
+      name: "PWA by Starter-React-Flux",
+      short_name: "SRF-PWA",
+      description: "A Progressive Web App generated by Starter-React-Flux",
+      background_color: "#ffffff",
+      inject: true,
+      fingerprints: true,
+      ios: true,
+      crossorigin: null,
+      icons: [
+        {
+          src: path.resolve("app/icon/icon.png"),
+          sizes: [96, 128, 192, 256, 384, 512, 1024]
+        }
+      ]
+    })
+  ]
+};
+
+module.exports = config;
diff --git a/bin/app/webpack.dev.js b/bin/app/webpack.dev.js
@@ -0,0 +1,16 @@
+const merge = require("webpack-merge");
+const common = require("./webpack.common.js");
+const path = require("path");
+
+const config = {
+  mode: "development",
+  devtool: "inline-source-map",
+  devServer: {
+    contentBase: path.resolve(__dirname, "public"),
+    historyApiFallback: true,
+    compress: true,
+    open: true
+  }
+};
+
+module.exports = merge(common, config);
diff --git a/bin/app/webpack.js b/bin/app/webpack.js
diff --git a/bin/app/webpack.prod.js b/bin/app/webpack.prod.js
@@ -0,0 +1,20 @@
+const merge = require("webpack-merge");
+const common = require("./webpack.common.js");
+const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
+  .BundleAnalyzerPlugin;
+const WebpackBundleSizeAnalyzerPlugin = require("webpack-bundle-size-analyzer")
+  .WebpackBundleSizeAnalyzerPlugin;
+
+const config = {
+  mode: "production",
+  plugins: [
+    new BundleAnalyzerPlugin({
+      analyzerMode: "static",
+      openAnalyzer: true,
+      reportFilename: "../analysis/bundle-analyzer.html"
+    }),
+    new WebpackBundleSizeAnalyzerPlugin("../analysis/bundle-size-analyzer.log")
+  ]
+};
+
+module.exports = merge(common, config);