Refactor(manifest): better PWA support

Armour · Aug 26, 2018 · a173514 · a173514
1 parent 12216c7
commit a173514
Show file tree

Hide file tree

Showing 23 changed files with 300 additions and 310 deletions.
diff --git a/frontend/public/browserconfig.xml b/frontend/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#000000</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/frontend/public/icons/android-chrome-192x192.png b/frontend/public/icons/android-chrome-192x192.png
diff --git a/frontend/public/icons/android-chrome-512x512.png b/frontend/public/icons/android-chrome-512x512.png
diff --git a/frontend/public/icons/apple-touch-icon-120x120.png b/frontend/public/icons/apple-touch-icon-120x120.png
diff --git a/frontend/public/icons/apple-touch-icon-152x152.png b/frontend/public/icons/apple-touch-icon-152x152.png
diff --git a/frontend/public/icons/apple-touch-icon-167x167.png b/frontend/public/icons/apple-touch-icon-167x167.png
diff --git a/frontend/public/icons/apple-touch-icon-180x180.png b/frontend/public/icons/apple-touch-icon-180x180.png
diff --git a/frontend/public/icons/apple-touch-startup-icon-1024x1024.png b/frontend/public/icons/apple-touch-startup-icon-1024x1024.png
diff --git a/frontend/public/favicon.ico → frontend/public/icons/favicon.ico b/frontend/public/favicon.ico → frontend/public/icons/favicon.ico
diff --git a/frontend/public/icons/mstile-150x150.png b/frontend/public/icons/mstile-150x150.png
diff --git a/frontend/public/icons/safari-pinned-tab.svg b/frontend/public/icons/safari-pinned-tab.svg
diff --git a/frontend/public/index.ejs b/frontend/public/index.ejs
@@ -2,10 +2,22 @@
 <html lang="en">
 <head>
   <meta charset="utf-8">
-  <meta content="ie=edge" http-equiv="x-ua-compatible">
-  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
-  <meta content="Full-stack boilerplate that using express with webpack, react and typescirpt!" name="description">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="Full- stack boilerplate that using express with webpack, react and typescirpt!">
+  <meta name="theme-color" content="#2196f3">
   <title><%= htmlWebpackPlugin.options.title %></title>
+  <meta name="apple-mobile-web-app-title" content="Boilerplate">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="default">
+  <link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
+  <link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
+  <link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
+  <link rel="apple-touch-startup-image" href="/apple-touch-startup-icon-1024x1024.png">
+  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#2196f3">
+  <link rel="manifest" href="/manifest.webmanifest">
+  <link rel="shortcut icon" href="/favicon.ico">
 </head>
 <body>
   <noscript>

diff --git a/frontend/public/logo.png b/frontend/public/logo.png
diff --git a/frontend/public/manifest.webmanifest b/frontend/public/manifest.webmanifest
@@ -0,0 +1,22 @@
+{
+  "name": "Boilerplate",
+  "short_name": "Boilerplate",
+  "start_url": ".",
+  "display": "standalone",
+  "orientation": "portrait",
+  "background_color": "#2196f3",
+  "theme_color": "#2196f3",
+  "description": "Full-stack boilerplate that using express with webpack, react and typescirpt!",
+  "icons": [
+    {
+      "src": "android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}
diff --git a/frontend/src/components/Header/header.tsx b/frontend/src/components/Header/header.tsx
@@ -53,14 +53,14 @@ export class Header extends React.Component<IHeaderProps> {
         <nav>
           <div className='nav-wrapper'>
             <div className='container'>
-              <Link to='/'><img className={styles.logo} alt='logo' src={require('./assets/images/logo.png')}/></Link>
+              <Link className='brand-logo' to='/'><img className={styles.logo} alt='logo' src={require('./assets/images/logo.png')}/></Link>
               <a href='#' data-target='nav-mobile' className='sidenav-trigger'>
                 <i className='material-icons'>menu</i>
               </a>
               <ul id='nav-desktop' className='right hide-on-med-and-down'>
                 <li className={this.checkActive(['react'])} key='react'><Link to='/react'>{t('react')}</Link></li>
                 <li className={this.checkActive(dropdownList)} key='materialize'>
-                  <a className='dropdown-button' href='#' data-target='header-dropdown-desktop'>{t('dropdown')}</a>
+                  <a className='dropdown-button' href='#' data-target='header-dropdown-desktop'>{t('dropdown')}<i className='material-icons right'>arrow_drop_down</i></a>
                 </li>
                 <li className={this.checkActive(['404'])} key='404'><Link to='/404'>{t('notfound')}</Link></li>
                 <Dropdown id='header-dropdown-desktop' dropdownLists={dropdownList} />
@@ -71,7 +71,7 @@ export class Header extends React.Component<IHeaderProps> {
         <ul id='nav-mobile' className='sidenav'>
           <li className={this.checkActive(['react'])} key='react'><Link to='/react'>{t('react')}</Link></li>
           <li className={this.checkActive(dropdownList)} key='materialize'>
-            <a className='dropdown-button' href='#' data-target='header-dropdown-mobile'>{t('dropdown')}</a>
+            <a className='dropdown-button' href='#' data-target='header-dropdown-mobile'>{t('dropdown')}<i className='material-icons right'>arrow_drop_down</i></a>
           </li>
           <li className={this.checkActive(['404'])} key='404'><Link to='/404'>{t('notfound')}</Link></li>
           <Dropdown id='header-dropdown-mobile' dropdownLists={dropdownList} />

diff --git a/frontend/src/pages/NotFoundPage/notFoundPage.scss b/frontend/src/pages/NotFoundPage/notFoundPage.scss
@@ -1,7 +1,16 @@
+@import 'sass/variables';
+
 .not-found-img {
   display: block;
   margin: auto;
   padding: 60px;
   max-width: 90%;
   object-fit: cover;
 }
+
+@media only screen and (max-width: $small-screen) {
+  .not-found-img {
+    height: 360px;
+    max-width: 100%;
+  }
+}
diff --git a/frontend/src/sass/global.scss b/frontend/src/sass/global.scss
@@ -20,7 +20,7 @@
 
   @media only screen and (max-width: $small-screen) {
     .page-title {
-      font-size: 3em;
+      font-size: 2.5em;
     }
   }
 

diff --git a/package.json b/package.json
@@ -60,20 +60,20 @@
     "babel-preset-stage-0": "^6.24.1",
     "babel-register": "^6.26.0",
     "body-parser": "^1.18.3",
-    "colors": "^1.3.1",
+    "colors": "^1.3.2",
     "compression": "^1.7.3",
-    "concurrently": "^3.6.1",
+    "concurrently": "^4.0.0",
     "connect-redis": "^3.3.3",
     "connected-react-router": "^4.4.1",
     "cookie-parser": "^1.4.3",
     "copy-webpack-plugin": "^4.5.2",
     "cross-env": "^5.2.0",
     "css-loader": "^1.0.0",
-    "cssnano": "^4.0.5",
+    "cssnano": "^4.1.0",
     "duplicate-package-checker-webpack-plugin": "^3.0.0",
     "express": "^4.16.3",
     "express-session": "^1.15.6",
-    "file-loader": "^1.1.11",
+    "file-loader": "^2.0.0",
     "helmet": "^3.13.0",
     "history": "^4.7.2",
     "html-webpack-plugin": "^3.2.0",
@@ -83,7 +83,7 @@
     "image-webpack-loader": "^4.3.1",
     "immutable": "4.0.0-rc.9",
     "materialize-css": "1.0.0-rc.2",
-    "mini-css-extract-plugin": "^0.4.1",
+    "mini-css-extract-plugin": "^0.4.2",
     "morgan": "^1.9.0",
     "node-sass": "^4.9.3",
     "nodemon": "^1.18.3",
@@ -98,8 +98,8 @@
     "react": "^16.4.2",
     "react-content-loader": "^3.1.2",
     "react-dom": "^16.4.2",
-    "react-hot-loader": "^4.3.4",
-    "react-i18next": "^7.10.1",
+    "react-hot-loader": "^4.3.5",
+    "react-i18next": "^7.11.0",
     "react-loadable": "^5.5.0",
     "react-redux": "^5.0.7",
     "react-router": "^4.3.1",
@@ -114,7 +114,7 @@
     "typescript": "^3.0.1",
     "url-loader": "^1.1.1",
     "uuid": "^3.3.2",
-    "webpack": "^4.16.5",
+    "webpack": "^4.17.1",
     "webpack-bundle-analyzer": "^2.13.1",
     "webpack-cli": "^3.1.0",
     "webpack-merge": "^4.1.4",
@@ -138,10 +138,10 @@
     "react-test-renderer": "^16.4.2",
     "stylelint": "^9.5.0",
     "stylelint-config-standard": "^18.2.0",
-    "ts-jest": "^23.1.3",
+    "ts-jest": "^23.1.4",
     "tslint": "^5.11.0",
     "tslint-react": "^3.6.0",
-    "webpack-dev-server": "^3.1.5"
+    "webpack-dev-server": "^3.1.6"
   },
   "browserslist": [
     "> 1%",

diff --git a/webpack.config.base.babel.js b/webpack.config.base.babel.js
@@ -6,11 +6,11 @@ import postcssImport from 'postcss-import';
 import postcssPresetEnv from 'postcss-preset-env';
 
 import AddAssetHtmlPlugin from 'add-asset-html-webpack-plugin';
+import CopyWebpackPlugin from 'copy-webpack-plugin';
 import DuplicatePackageCheckerPlugin from 'duplicate-package-checker-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import ProgressBarWebpackPlugin from 'progress-bar-webpack-plugin';
-import WebpackPwaManifest from 'webpack-pwa-manifest';
 
 const ReactManifest = './frontend/dist/dll/react_manifest.json';
 const ImmutableManifest = './frontend/dist/dll/immutable_manifest.json';
@@ -134,44 +134,21 @@ export default {
     // Generate html file to dist folder
     new HtmlWebpackPlugin({
       title: 'Boilerplate',
-      favicon: path.resolve(__dirname, 'frontend/public/favicon.ico'),
       template: path.resolve(__dirname, 'frontend/public/index.ejs'),
     }),
-    // Add Progressive Web Application manifest
-    new WebpackPwaManifest({
-      name: 'Boilerplate',
-      short_name: 'Boilerplate',
-      start_url: '.',
-      background_color: '#2196f3',
-      theme_color: '#2196f3',
-      orientation: 'portrait',
-      display: 'standalone',
-      ios: true,
-      icons: [
-        {
-          src: path.resolve(__dirname, 'frontend/public/logo.png'),
-          sizes: [120, 152, 167, 180],
-          destination: path.join('icons', 'ios'),
-          ios: true, // Generate apple touch icons
-        },
-        {
-          src: path.resolve(__dirname, 'frontend/public/logo.png'),
-          sizes: 1024,
-          destination: path.join('icons', 'ios'),
-          ios: 'startup', // Generate apple touch startup image
-        },
-        {
-          src: path.resolve(__dirname, 'frontend/public/logo.png'),
-          sizes: [36, 48, 72, 96, 144, 192, 512],
-          destination: path.join('icons', 'android'), // Generate android icons
-        },
-      ],
-    }),
     // Add dll reference files to html
     new AddAssetHtmlPlugin({
       filepath: path.resolve(__dirname, 'frontend/dist/dll/*_dll.js'),
       includeSourcemap: false,
     }),
+    // Copy static files to build dir
+    new CopyWebpackPlugin([
+      {
+        from: 'frontend/public/**/*',
+        to: '[name].[ext]',
+        ignore: ['index.ejs'],
+      },
+    ]),
   ],
 
   // Change how modules are resolved

diff --git a/webpack.config.dev.babel.js b/webpack.config.dev.babel.js
@@ -39,5 +39,5 @@ export default merge(BaseWebpackConfig, {
 
   // Source map mode
   // https://webpack.js.org/configuration/devtool
-  devtool: 'cheap-module-eval-source-map',
+  devtool: 'eval-source-map',
 });
diff --git a/webpack.config.dll.babel.js b/webpack.config.dll.babel.js
@@ -25,7 +25,6 @@ const materializeVendors = [
   'materialize-css',
 ];
 
-// Base config
 const config = {
   // Get mode from NODE_ENV
   mode: process.env.NODE_ENV,
@@ -60,6 +59,11 @@ const config = {
       name: '[name]_dll',
     }),
   ],
+
+  // Turn off performance hints (assets size limit)
+  performance: {
+    hints: false,
+  },
 };
 
 export default config;
diff --git a/webpack.config.prod.babel.js b/webpack.config.prod.babel.js
@@ -1,7 +1,6 @@
 import path from 'path';
 import merge from 'webpack-merge';
 
-import CopyWebpackPlugin from 'copy-webpack-plugin';
 import OfflinePlugin from 'offline-plugin';
 
 import BaseWebpackConfig from './webpack.config.base.babel';
@@ -27,18 +26,6 @@ export default merge(BaseWebpackConfig, {
 
   // A list of used webpack plugins
   plugins: [
-    // Copy static files to build dir
-    new CopyWebpackPlugin([
-      {
-        from: 'frontend/public/*',
-        to: '[name].[ext]',
-        ignore: [
-          'favicon.ico',
-          'index.ejs',
-          'logo.png',
-        ],
-      },
-    ]),
     // It's always better if OfflinePlugin is the last plugin added
     new OfflinePlugin(),
   ],