Update manifest on navigation

gatsbyjs · Sep 5, 2019 · 7e77d8f · 7e77d8f
1 parent 148d236
commit 7e77d8f
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 0 deletions.
diff --git a/packages/gatsby-plugin-manifest/src/__tests__/gatsby-browser.js b/packages/gatsby-plugin-manifest/src/__tests__/gatsby-browser.js
@@ -0,0 +1,64 @@
+import { onRouteUpdate } from "../gatsby-browser"
+
+describe(`gatsby-plugin-manifest`, () => {
+  const pluginOptions = {
+    name: `My Website`,
+    start_url: `/`,
+    localize: [
+      {
+        start_url: `/es/`,
+        lang: `es`,
+      },
+    ],
+  }
+
+  beforeEach(() => {
+    global.__PATH_PREFIX__ = ``
+    document.head.innerHTML = `<link rel="manifest" href="/manifest.webmanifest">`
+  })
+
+  test(`has manifest in head`, () => {
+    const location = {
+      pathname: `/`,
+    }
+    onRouteUpdate({ location }, pluginOptions)
+    expect(document.head).toMatchInlineSnapshot(`
+      <head>
+        <link
+          href="/manifest.webmanifest"
+          rel="manifest"
+        />
+      </head>
+    `)
+  })
+
+  test(`changes href of manifest if navigating to a localized app`, () => {
+    const location = {
+      pathname: `/es/`,
+    }
+    onRouteUpdate({ location }, pluginOptions)
+    expect(document.head).toMatchInlineSnapshot(`
+      <head>
+        <link
+          href="/manifest_es.webmanifest"
+          rel="manifest"
+        />
+      </head>
+    `)
+  })
+
+  test(`keeps default manifest if not navigating to a localized app`, () => {
+    const location = {
+      pathname: `/random-path/`,
+    }
+    onRouteUpdate({ location }, pluginOptions)
+    expect(document.head).toMatchInlineSnapshot(`
+      <head>
+        <link
+          href="/manifest.webmanifest"
+          rel="manifest"
+        />
+      </head>
+    `)
+  })
+})
diff --git a/packages/gatsby-plugin-manifest/src/gatsby-browser.js b/packages/gatsby-plugin-manifest/src/gatsby-browser.js
@@ -0,0 +1,26 @@
+import { withPrefix as fallbackWithPrefix, withAssetPrefix } from "gatsby"
+
+const withPrefix = withAssetPrefix || fallbackWithPrefix
+
+exports.onRouteUpdate = function({ location }, pluginOptions) {
+  const { localize } = pluginOptions
+  const manifestFilename = getManifestForPathname(location.pathname, localize)
+
+  const manifestEl = document.head.querySelector(`link[rel="manifest"]`)
+  if (manifestEl) {
+    manifestEl.setAttribute(`href`, withPrefix(manifestFilename))
+  }
+}
+
+function getManifestForPathname(pathname, localizedApps) {
+  let suffix = ``
+  if (Array.isArray(localizedApps)) {
+    const appOptions = localizedApps.find(app =>
+      RegExp(`^${app.start_url}.*`, `i`).test(pathname)
+    )
+    if (appOptions) {
+      suffix = `_${appOptions.lang}`
+    }
+  }
+  return `manifest${suffix}.webmanifest`
+}