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.

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

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

Open
AndrewBogdanovTSS opened this issue Jun 26, 2023 · 2 comments

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.

@userquin
Copy link
Member

Checkout the pwa module in elk.zone gh repository.

@ziadsarour
Copy link

+1 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants