Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dynamic manifest file #578

Open
jopms opened this issue Oct 16, 2023 · 6 comments · May be fixed by #811
Open

Dynamic manifest file #578

jopms opened this issue Oct 16, 2023 · 6 comments · May be fixed by #811

Comments

@jopms
Copy link

jopms commented Oct 16, 2023 •
edited
Loading

I have came up with a solution for changing the manifest file, but I don't think it is really appropriate.

I basically have a plugin in the vite.config to remove the href attribute from the <link rel='manifest' (..)>.

{
  name: 'remove-manifest-href',
  transformIndexHtml(html) {
    return html.replace(/<link\s+rel="manifest"\s+href="[^"]*"/, '<link rel="manifest"')
  },
    enforce: 'post'
  }
}

Then I create a manifest file and, and add the href to the <link rel='manifest'> again.

const changeManifestFile = (): void => {
  const dynamicManifestContent = {
    background_color: '#ffffff',
    description: 'Description',
    display: 'standalone',
    name: 'Name',
    scope: '/',
    short_name: 'Short name',
    start_url: '/',
    theme_color: '#ffffff'
  }

  const blob = new Blob([JSON.stringify(dynamicManifestContent)], { type: 'application/json' })

  const manifestUrl = URL.createObjectURL(blob)

  const linkElement = document.querySelector('link[rel="manifest"]')

  if (linkElement !== null) {
    linkElement.setAttribute('href', manifestUrl)
  }
}

If I just change the href it won't work, I need to have the build without it and then add it manually so I can set the manifest dynamically.

This solution works, but it does not seem right.

Is there any other way to do this?
If not, can we at least have the option to not generate the manifest.webmanifest and not have the href set in the link tag?
@userquin
Copy link
Member

You can use manifest: false in pwa options, the plugin will omit the generation.

@jopms
Copy link
Author

jopms commented Oct 16, 2023

Ok, makes it simpler. Do you know of other way to set the manifest dynamically?

@userquin
Copy link
Member

userquin commented Oct 16, 2023 •
edited
Loading

It depends on the permutations, beware, not all fields can be updated and some user agents can take long time to update.

You can try generate all and return the proper one , we use that approach in elk.zone github repo (nuxt 3), check modules/pwa/i18n.ts module, we generate 2 manifests per locale (dark and light theme variants).

You can also generate them in the server...

@jopms
Copy link
Author

jopms commented Oct 17, 2023

check modules/pwa/i18n.ts module

I'll do that.
Generating in the server is not really an option, but I can live with this solution.

@Rain-Emperor
Copy link

你好，为什么我这么写会报错？
Manifest: property 'start_url' ignored, URL is invalid.
Manifest: property 'scope' ignored, URL is invalid.
Manifest: property 'src' ignored, URL is invalid.

@Weibienaole
Copy link

你好，为什么我这么写会报错？ Manifest: property 'start_url' ignored, URL is invalid. Manifest: property 'scope' ignored, URL is invalid. Manifest: property 'src' ignored, URL is invalid.

你好，这个问题解决了吗？ 我也有相同的问题= . =

@AntoineMontane AntoineMontane linked a pull request Jan 13, 2025 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(api): allow overriding options AntoineMontane/vite-plugin-pwa
4 participants
@userquin @Rain-Emperor @Weibienaole @jopms