WebApp manifest added to allow users "Add to Homescreen" documentations (#2377)

* manifest config added and src/images/react_logo.png added for icon * inverted commas fix as per linter * added legacy:true option for ios * legacy:true lint fix * added meta tags for ios and moved logo from src to static
5 years ago · 0726327dbb
4 changed files with 18 additions and 0 deletions
--- a/gatsby-config.js
+++ b/gatsby-config.js
@ -159,5 +159,18 @@ module.exports = {
    },
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-catch-links',
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options: {
+        name: 'React Docs',
+        short_name: 'React',
+        start_url: '/',
+        background_color: '#20232a',
+        theme_color: '#20232a',
+        display: 'standalone',
+        icon: 'static/logo-512x512.png',
+        legacy: true,
+      },
+    },
  ],
 };
--- a/src/html.js
+++ b/src/html.js
@ -19,6 +19,11 @@ export default class HTML extends React.Component {
            content="width=device-width, initial-scale=1.0"
          />
          <link rel="icon" href="/favicon.ico" />
+
+          <meta name="apple-mobile-web-app-capable" content="yes" />
+          <link rel="apple-touch-icon" href="/logo-180x180.png" />
+          <meta name="apple-mobile-web-app-title" content="React" />
+
          {this.props.headComponents}
        </head>
        <body {...this.props.bodyAttributes}>
--- a/static/logo-180x180.png
+++ b/static/logo-180x180.png
--- a/static/logo-512x512.png
+++ b/static/logo-512x512.png