Better handling of favicon generation

build/utils.js

@@ -95,7 +95,7 @@ exports.createNotifierCallback = () => {
       title: packageConfig.name,
       message: severity + ': ' + error.name,
       subtitle: filename || '',
-      icon: path.join(__dirname, 'logo.png')
+      icon: path.join(__dirname, 'static/icon.svg')
     })
   }
 }

build/webpack.dev.conf.js

@@ -6,6 +6,7 @@ const merge = require('webpack-merge')
 const path = require('path')
 const baseWebpackConfig = require('./webpack.base.conf')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
+const AppManifestWebpackPlugin = require('app-manifest-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 const portfinder = require('portfinder')
@@ -51,6 +52,19 @@ const devWebpackConfig = merge(baseWebpackConfig, {
         new webpack.HotModuleReplacementPlugin(),
         new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
         new webpack.NoEmitOnErrorsPlugin(),
+        new AppManifestWebpackPlugin({
+            logo: path.resolve(__dirname, '../static/icon.svg'),
+            prefix: '.',
+            output: '/static/icons-[hash:8]/',
+            inject: true,
+            persistentCache: true,
+            config: {
+                appName: 'Cyclassist',
+                appDescription: "Track and share issues (work, interruption in routes, parked cars) on bike lanes in realtime.",
+                developerName: 'Phyks (Lucas Verney)',
+                developerURL: 'https://phyks.me',
+            }
+        }),
         // https://github.com/ampedandwired/html-webpack-plugin
         new HtmlWebpackPlugin({
             filename: 'index.html',
@@ -66,11 +80,6 @@ const devWebpackConfig = merge(baseWebpackConfig, {
                 to: config.dev.assetsSubDirectory,
                 ignore: ['.*']
             },
-      {
-        from: path.resolve(__dirname, '../manifest.webmanifest'),
-        to: config.build.assetsRoot,
-        ignore: ['.*']
-      },
             {
                 from: path.resolve(__dirname, '../humans.txt'),
                 to: config.build.assetsRoot,

build/webpack.prod.conf.js

@@ -6,6 +6,7 @@ const config = require('../config')
 const merge = require('webpack-merge')
 const baseWebpackConfig = require('./webpack.base.conf')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
+const AppManifestWebpackPlugin = require('app-manifest-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
@@ -57,9 +58,23 @@ const webpackConfig = merge(baseWebpackConfig, {
             ? { safe: true, map: { inline: false } }
             : { safe: true }
         }),
+        new AppManifestWebpackPlugin({
+            logo: path.resolve(__dirname, '../static/icon.svg'),
+            prefix: '.',
+            output: '/static/icons-[hash:8]/',
+            inject: true,
+            persistentCache: true,
+            config: {
+                appName: 'Cyclassist',
+                appDescription: "Track and share issues (work, interruption in routes, parked cars) on bike lanes in realtime.",
+                developerName: 'Phyks (Lucas Verney)',
+                developerURL: 'https://phyks.me',
+            }
+        }),
         // generate dist index.html with correct asset hash for caching.
         // you can customize output by editing /index.html
         // see https://github.com/ampedandwired/html-webpack-plugin
+        //
         new HtmlWebpackPlugin({
             filename: config.build.index,
             template: 'index.html',
@@ -117,11 +132,6 @@ const webpackConfig = merge(baseWebpackConfig, {
                 to: config.build.assetsSubDirectory,
                 ignore: ['.*']
             },
-      {
-        from: path.resolve(__dirname, '../manifest.webmanifest'),
-        to: config.build.assetsRoot,
-        ignore: ['.*']
-      },
             {
                 from: path.resolve(__dirname, '../humans.txt'),
                 to: config.build.assetsRoot,

config/index.js

@@ -75,6 +75,6 @@ module.exports = {
 
     // OpenGraph-related variables
     ogURL: 'https://cyclo.phyks.me',
-    ogImage: 'https://cyclo.phyks.me/static/icon192.png',
+    ogImage: 'https://cyclo.phyks.me/static/icon.svg',
   }
 }

index.html

@@ -13,8 +13,6 @@
         <meta property="og:image" content="<%= htmlWebpackPlugin.options.ogImage %>" />
 
         <link type="text/plain" rel="author" href="humans.txt" />
-        <link rel="manifest" href="manifest.webmanifest">
-        <link rel="shortcut icon" type="image/png" href="static/icon192.png">
 
         <title>Cyclassist: your bike companion!</title>
     </head>

manifest.webmanifest

@@ -1,39 +0,0 @@
-{
-    "name": "Cyclassist",
-    "short_name": "Cyclassist",
-    "description": "Report and share issues with bike routes!",
-    "start_url": ".",
-    "display": "standalone",
-    "icons": [
-        {
-            "src": "static/icon48.png",
-            "sizes": "48x48",
-            "type": "image/png"
-        },
-        {
-            "src": "static/icon72.png",
-            "sizes": "72x72",
-            "type": "image/png"
-        },
-        {
-            "src": "static/icon96.png",
-            "sizes": "96x96",
-            "type": "image/png"
-        },
-        {
-            "src": "static/icon144.png",
-            "sizes": "144x144",
-            "type": "image/png"
-        },
-        {
-            "src": "static/icon168.png",
-            "sizes": "168x168",
-            "type": "image/png"
-        },
-        {
-            "src": "static/icon192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        }
-    ]
-}

package.json

@@ -11,6 +11,7 @@
         "build": "node build/build.js"
     },
     "dependencies": {
+        "app-manifest-webpack-plugin": "^1.1.3",
         "es6-promise": "^4.2.4",
         "isomorphic-fetch": "^2.2.1",
         "leaflet": "^1.3.1",