feat(gatsby-plugin-manifest): add icon_options as an option to suppor…

…t the purpose property (#12794)  ## Description Adds an option to specify PWA icon options, e.g. [`purpose`](https://www.w3.org/TR/appmanifest/#purpose-member). ## Related Issues Resolves #12793
gatsbyjs · Mar 27, 2019 · 127f232 · 127f232
1 parent e30d264
commit 127f232
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 0 deletions.
diff --git a/packages/gatsby-plugin-manifest/README.md b/packages/gatsby-plugin-manifest/README.md
@@ -188,6 +188,36 @@ module.exports = {
 }
 ```
 
+## Custom icon options
+
+In order to specify manifest options merged with each item of the `icons` array, `icon_options` may be used as follows:
+
+```js
+// in gatsby-config.js
+module.exports = {
+  plugins: [
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options: {
+        name: `GatsbyJS`,
+        short_name: `GatsbyJS`,
+        start_url: `/`,
+        background_color: `#f7f0eb`,
+        theme_color: `#a2466c`,
+        display: `standalone`,
+        icon: `src/images/icon.png`, // This path is relative to the root of the site.
+        icon_options: {
+          // For all the options available, please see:
+          // https://developer.mozilla.org/en-US/docs/Web/Manifest
+          // https://w3c.github.io/manifest/#purpose-member
+          purpose: `maskable`,
+        },
+      },
+    },
+  ],
+}
+```
+
 ## Legacy option
 
 iOS 11.3 added support for service workers but not the complete webmanifest spec. Therefore iOS won't recognize the icons defined in the webmanifest and the creation of `apple-touch-icon` links in `<head>` is needed. This plugin creates them by default. If you don't want those icons to be generated you can set the `legacy` option to `false` in plugin configuration:

diff --git a/packages/gatsby-plugin-manifest/src/gatsby-node.js b/packages/gatsby-plugin-manifest/src/gatsby-node.js
@@ -54,6 +54,11 @@ exports.onPostBootstrap = async (args, pluginOptions) => {
     manifest.icons = defaultIcons
   }
 
+  // Specify extra options for each icon (if requested).
+  manifest.icons.forEach(icon => {
+    Object.assign(icon, pluginOptions.icon_options)
+  })
+
   // Determine destination path for icons.
   const iconPath = path.join(`public`, path.dirname(manifest.icons[0].src))