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

[Feature Request] i18n manifest.json generation based on provided localized options #52

Open
AndrewBogdanovTSS opened this issue Jun 26, 2023 · 2 comments · May be fixed by #179
Open

[Feature Request] i18n manifest.json generation based on provided localized options #52

AndrewBogdanovTSS opened this issue Jun 26, 2023 · 2 comments · May be fixed by #179

Comments

@AndrewBogdanovTSS
Copy link

Current behavior:

At the moment Nuxt PWA module supports a single-dimensional set of properties that only assumes 1 possible language for generated manifest.

manifest: {
      name: 'Nuxt Vite PWA',
      short_name: 'NuxtVitePWA',
      theme_color: '#ffffff',
      icons: [
        {
          src: 'pwa-192x192.png',
          sizes: '192x192',
          type: 'image/png',
        },
        {
          src: 'pwa-512x512.png',
          sizes: '512x512',
          type: 'image/png',
        },
        {
          src: 'pwa-512x512.png',
          sizes: '512x512',
          type: 'image/png',
          purpose: 'any maskable',
        },
      ],
    },

How should it be

In order to properly reflect i18n nature of the application vite-pwa-plugin should support a multidimensional manifest object where each key will be related to the application locale:

manifest: {
      en: {
          name: 'Nuxt Vite PWA EN',
          short_name: 'NuxtVitePWA EN',
          ...
       },
       fr: {
          name: 'Nuxt Vite PWA FR',
          short_name: 'NuxtVitePWA FR',
          ...
       },
       es: {
           name: 'Nuxt Vite PWA ES',
          short_name: 'NuxtVitePWA ES',
          ...
       }
    },

Specifying manifest options in the above way should result in the generation of 3 manifest files:

en.manifest.json
fr.manifest.json
es.manifest.json

Next I, as a developer, will be able able to dynamically point to different file based on the currently selected locale using useHeade composable updating the link

<!-- If English is detected, the script will load this into the page -->
<link rel="manifest" href="/path.../en.manifest.json">

<!-- If French is detected, the script will load this instead -->
<link rel="manifest" href="/path.../fr.manifest.json">

<!-- If Spanish is detected, the script will load this instead -->
<link rel="manifest" href="/path.../es.manifest.json">

Bonus point

Integrating the above switching with additional options that would define the locale strategy might also be a good idea. e.g. one of the options might be:

pwa: {
   i18n: {
     strategy: 'route'
   }
}

this will assume the language detection should be handled based on the application route, which should also be a default option since this is the most common way for taking i18n on the web.
@AndrewBogdanovTSS AndrewBogdanovTSS mentioned this issue Jun 26, 2023
Closed
@userquin
Copy link
Member

Checkout the pwa module in elk.zone gh repository.

@jlarmstrongiv jlarmstrongiv mentioned this issue Oct 4, 2023
Open
@ziadsarour
Copy link

+1 👍

@ziadsarour ziadsarour mentioned this issue Jun 11, 2024
Open
@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/i18n AntoineMontane/vite-pwa-nuxt
3 participants
@AndrewBogdanovTSS @userquin @ziadsarour