[gatsby-plugin-manifest] the plugin rewrite the manifest href with assetsPrefix

[tracy-liucui]

Description

The manifest plugin rewrites the manifest href with assetsPrefix.

Steps to reproduce

// gatsby-config.js
module.exports = {
  assetPrefix: env.CDN_URL,
  plugins:[
    'gatsby-plugin-manifest',
    'gatsby-plugin-offline'
  ]
}

Expected result

According to the document(https://www.gatsbyjs.org/docs/asset-prefix/#usage-with-gatsby-plugin-offline)

Certain essential resources need to be available on your content server (i.e. the one used to serve pages). This includes sw.js, as well as resources to precache: the Webpack bundle, the app bundle, the manifest (and any icons referenced), and the resources for the offline plugin app shell

Our app locates the assets in a different domain(CDN), but we expect the manifest file(and all the files mentioned above) should be loaded from the same domain with the app.

Actual result

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-plugin-manifest/src/gatsby-browser.js#L15

The manifest href doesn't have assetPrefix in the static generated HTML after gatsby build, but is overwritten after rendered in browser with assetsPrefix from above line.

Environment

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.14.1 - ~/.nvm/versions/node/v12.14.1/bin/node
    npm: 6.13.4 - ~/.nvm/versions/node/v12.14.1/bin/npm
  Languages:
    Python: 2.7.16 - /usr/local/bin/python
  Browsers:
    Chrome: 81.0.4044.138
    Firefox: 68.0.2
    Safari: 13.1
  npmPackages:
    gatsby: 2.20.29 => 2.20.29 
    gatsby-plugin-manifest: 2.3.6 => 2.3.6 
    gatsby-plugin-module-resolver: 1.0.3 => 1.0.3 
    gatsby-plugin-offline: 3.1.4 => 3.1.4 
    gatsby-plugin-react-helmet: 3.2.1 => 3.2.1 
    gatsby-plugin-styled-components: 3.2.3 => 3.2.3 
    gatsby-plugin-typescript: 2.3.3 => 2.3.3 
  npmGlobalPackages:
    gatsby-cli: 2.12.12
    gatsby: 2.20.8

[pvdz]

Can you create a minimal reproduction and post it in a repo? Thanks!

[tracy-liucui]

@pvdz thanks for responding, here is a repo for reproducing the issue https://github.com/tracy-liucui/gatsby-reproduction

Steps to reproduce

1. npm run build
2. make a assets directory inside public and copy all the static files into assets
3. serve the public directory by any static file server

Issue1: The public/index.html, the url for manifest becomes '//manifest.webmanifest'

Issue2: After I manually fix the url --> /manifest.webmanifest, then the manifest plugin rewrite the url to /assets/manifest.webmanifest in browser

=== In this example, I use assets subdirectory to simulate the cdn server, in our situation the manifest url becomes https://cdn.example.com/manifest.webmanifest

[tracy-liucui]

There is another issue we encountered also related to assetPrefix.

With the same reproduction repo, after npm run build in the sw.js

const offlineShell = `/assets/offline-plugin-app-shell-fallback/index.html`
const offlineShellWithKey = workbox.precaching.getCacheKeyForURL(offlineShell)
return await caches.match(offlineShellWithKey)

the offline-plugin-app-shell-fallback/index.html also has the asset prefix which we don't expect

[tracy-liucui]

@pvdz Sorry but can you take a look at the reproduction repo, thanks

[tracy-liucui]

@wardpeet is there any updates for this?

[pvdz]

Thanks for your repro :100:

In your repro, I first ran yarn and then gatsby build. After which this is generated:

  <link rel="manifest" href="/manifest.webmanifest"/>

(It's possible the double slash problem has already been fixed since this issue was reported)

I'm not sure about your next steps. Creating an asset folder in public and moving which static files there? Would you run gatsby build again after this or when would the plugin change it?

The sw.js has this:

  const offlineShell = `/offline-plugin-app-shell-fallback/index.html`
  const offlineShellWithKey = workbox.precaching.getCacheKeyForURL(offlineShell)
  return await caches.match(offlineShellWithKey)

Could you please confirm whether this problem is still an issue, and if so, walk me through your manual steps? Which files do you update, which files do you move, which commands do you run afterwards?

Thank you :purple_heart:

[tracy-liucui]

@pvdz Thanks for your kind response.

I have updated the repo to include the whole public folder so you can easily just pull it down

Steps to reproduce:

• git pull
• run npx http-server in the root
• go to http://127.0.0.1:8080/

Then you will see:

I have confirmed the issue only happens when you have the localize settings and assetPrefix at the same time

  assetPrefix: 'assets',
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Example`,
        short_name: `Example`,
        display: `standalone`,
        start_url: `/en`,
        lang: 'en',
        background_color: `#fff`,
        localize: [
          {
            start_url: `/ja`,
            lang: `ja`,
          },
        ],
      },
    },

[tracy-liucui]

@pvdz Hi, is there any updates to this? I am happy to help to make a pull request if you can let me know how it is supposed to be 😄

[Lisenish]

Hello @pragmaticpat! Any progress on this?