fix(PWA): appmanifest now supports i18n, patched version..

* gatsby-plugin-manifest now included as patched version in /packages to test i18n support
* move gatsby-plugin-manifest from devDependencies to dependencies

gatsby-config.js

@@ -188,7 +188,7 @@ module.exports = {
       options: {
         name: `GaiAma`,
         short_name: `GaiAma`,
-        start_url: `/?utm_source=a2hs`,
+        start_url: [`/en/?utm_source=a2hs`, `/de/?utm_source=a2hs`],
         background_color: `#fff`,
         theme_color: `#287482`,
         display: `standalone`,

package.json

@@ -72,6 +72,7 @@
     "gatsby-plugin-catch-links": "2.0.4",
     "gatsby-plugin-emotion": "2.0.5",
     "gatsby-plugin-layout": "1.0.3",
+    "gatsby-plugin-manifest": "2.0.5",
     "gatsby-plugin-nprogress": "2.0.5",
     "gatsby-plugin-offline": "2.0.6",
     "gatsby-plugin-react-helmet": "3.0.0",
@@ -117,7 +118,6 @@
     "eslint-plugin-prettier": "2.7.0",
     "eslint-plugin-react": "7.11.1",
     "flow-bin": "0.81.0",
-    "gatsby-plugin-manifest": "2.0.5",
     "gatsby-plugin-netlify": "2.0.1",
     "gatsby-plugin-netlify-cache": "1.0.0",
     "gatsby-plugin-sharp": "2.0.7",

packages/gatsby-plugin-manifest/common.js

@@ -0,0 +1,62 @@
+const fs = require(`fs`)
+
+// default icons for generating icons
+exports.defaultIcons = [
+  {
+    src: `icons/icon-48x48.png`,
+    sizes: `48x48`,
+    type: `image/png`,
+  },
+  {
+    src: `icons/icon-72x72.png`,
+    sizes: `72x72`,
+    type: `image/png`,
+  },
+  {
+    src: `icons/icon-96x96.png`,
+    sizes: `96x96`,
+    type: `image/png`,
+  },
+  {
+    src: `icons/icon-144x144.png`,
+    sizes: `144x144`,
+    type: `image/png`,
+  },
+  {
+    src: `icons/icon-192x192.png`,
+    sizes: `192x192`,
+    type: `image/png`,
+  },
+  {
+    src: `icons/icon-256x256.png`,
+    sizes: `256x256`,
+    type: `image/png`,
+  },
+  {
+    src: `icons/icon-384x384.png`,
+    sizes: `384x384`,
+    type: `image/png`,
+  },
+  {
+    src: `icons/icon-512x512.png`,
+    sizes: `512x512`,
+    type: `image/png`,
+  },
+]
+
+/**
+ * Check if the icon exists on the filesystem
+ *
+ * @param {String} srcIcon Path of the icon
+ */
+exports.doesIconExist = function doesIconExist(srcIcon) {
+  try {
+    return fs.statSync(srcIcon).isFile()
+  } catch (e) {
+    if (e.code === `ENOENT`) {
+      return false
+    } else {
+      throw e
+    }
+  }
+}

packages/gatsby-plugin-manifest/gatsby-node.js

@@ -0,0 +1,82 @@
+const fs = require(`fs`)
+const path = require(`path`)
+const Promise = require(`bluebird`)
+const sharp = require(`sharp`)
+const { defaultIcons, doesIconExist } = require(`./common.js`)
+
+sharp.simd(true)
+
+function generateIcons(icons, srcIcon) {
+  return Promise.map(icons, icon => {
+    const size = parseInt(icon.sizes.substring(0, icon.sizes.lastIndexOf(`x`)))
+    const imgPath = path.join(`public`, icon.src)
+
+    return sharp(srcIcon)
+      .resize(size)
+      .toFile(imgPath)
+      .then(() => {})
+  })
+}
+
+const writeManifest = ({ manifest, lang }) => {
+  const suffix = lang ? `_${lang}` : ``
+  fs.writeFileSync(
+    path.join(`public`, `manifest${suffix}.webmanifest`),
+    JSON.stringify(manifest)
+  )
+}
+
+exports.onPostBootstrap = (args, pluginOptions) =>
+  new Promise((resolve, reject) => {
+    const { icon } = pluginOptions
+    const manifest = { ...pluginOptions }
+
+    // Delete options we won't pass to the manifest.webmanifest.
+    delete manifest.plugins
+    delete manifest.icon
+
+    // If icons are not manually defined, use the default icon set.
+    if (!manifest.icons) {
+      manifest.icons = defaultIcons
+    }
+
+    // Determine destination path for icons.
+    const iconPath = path.join(`public`, path.dirname(manifest.icons[0].src))
+
+    //create destination directory if it doesn't exist
+    if (!fs.existsSync(iconPath)) {
+      fs.mkdirSync(iconPath)
+    }
+
+    if (Array.isArray(manifest.start_url)) {
+      const { start_url, ..._manifest } = manifest
+      start_url.map(x =>
+        writeManifest({
+          manifest: {
+            ..._manifest,
+            start_url: x,
+          },
+          lang: x.replace(/^\//, ``).split(`/`)[0],
+        })
+      )
+    } else {
+      writeManifest({ manifest })
+    }
+
+    // Only auto-generate icons if a src icon is defined.
+    if (icon !== undefined) {
+      // Check if the icon exists
+      if (!doesIconExist(icon)) {
+        reject(
+          `icon (${icon}) does not exist as defined in gatsby-config.js. Make sure the file exists relative to the root of the site.`
+        )
+      }
+      generateIcons(manifest.icons, icon).then(() => {
+        //images have been generated
+        console.log(`done generating icons for manifest`)
+        resolve()
+      })
+    } else {
+      resolve()
+    }
+  })

packages/gatsby-plugin-manifest/gatsby-ssr.js

@@ -0,0 +1,53 @@
+import React from 'react'
+import { withPrefix } from 'gatsby'
+
+export const onRenderBody = (
+  { pathname = `/`, setHeadComponents },
+  { icon, icons, start_url, theme_color }
+) => {
+  // If icons were generated, also add a favicon link.
+  if (icon) {
+    let favicon = `/icons/icon-48x48.png`
+
+    // The icon path could be different in hybrid mode
+    // this takes the first one of the possible icons
+    if (icons && icons.length) {
+      favicon = icons[0].src
+    }
+
+    setHeadComponents([
+      <link
+        key={`gatsby-plugin-manifest-icon-link`}
+        rel="shortcut icon"
+        href={withPrefix(favicon)}
+      />,
+    ])
+  }
+
+  const getLang = x => `${x}`.replace(/^\//, ``).split(`/`)[0]
+  const getSuffix = x =>
+    `_`.concat(x.map(getLang).find(x => x === getLang(pathname)))
+
+  const manifestLink = Array.isArray(start_url) ? (
+    <link
+      key={`gatsby-plugin-manifest-link`}
+      rel="manifest"
+      href={withPrefix(`/manifest${getSuffix(start_url)}.webmanifest`)}
+    />
+  ) : (
+    <link
+      key={`gatsby-plugin-manifest-link`}
+      rel="manifest"
+      href={withPrefix(`/manifest.webmanifest`)}
+    />
+  )
+
+  setHeadComponents([
+    manifestLink,
+    <meta
+      key={`gatsby-plugin-manifest-meta`}
+      name="theme-color"
+      content={theme_color}
+    />,
+  ])
+}

packages/gatsby-plugin-manifest/index.js

@@ -0,0 +1 @@
+// noop

packages/gatsby-plugin-manifest/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "gatsby-plugin-manifest",
+  "description": "Gatsby plugin which adds a manifest.webmanifest to make sites progressive web apps",
+  "version": "2.0.5",
+  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
+  "bugs": {
+    "url": "https://github.com/gatsbyjs/gatsby/issues"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.0.0",
+    "bluebird": "^3.5.0",
+    "sharp": "^0.20.2"
+  },
+  "homepage": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-manifest#readme",
+  "keywords": [
+    "gatsby",
+    "gatsby-plugin",
+    "favicon",
+    "icons",
+    "manifest.webmanifest",
+    "progressive-web-app",
+    "pwa"
+  ],
+  "license": "MIT",
+  "main": "index.js",
+  "peerDependencies": {
+    "gatsby": ">2.0.0-alpha"
+  },
+  "repository": "https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-manifest",
+  "scripts": {
+    "build": "babel src --out-dir . --ignore **/__tests__",
+    "prepare": "cross-env NODE_ENV=production npm run build",
+    "watch": "babel -w src --out-dir . --ignore **/__tests__"
+  }
+}