Feature: i18n manifest.json generation

[jlarmstrongiv]

I maintain astro-i18n-aut, an internalization (i18n) framework for Astro. Astro itself is preparing to support i18n in core.

It is possible to localize a PWA web manifest, but the current config assumes only one language.

There are issues in other vite-pwa packages describing similar functionality:

• https://github.com/vite-pwa/vite-plugin-pwa/issues/539
• https://github.com/vite-pwa/nuxt/issues/52

It would be wonderful to support i18n in @vite-pwa/astro

---

In the meantime, would I be able to add it myself if I:

• disable the manifest with manifest: false, and includeManifestIcons: false,
• create my own i18n webmanifest files using Astro endpoints
• use the cli to generate icons

[userquin]

@jlarmstrongiv you can generate the webmanifest using an endpoint (add proper cache headers, dont cache and must-revalidate: max-age with 0 and must-revalidate, check elk.zone for the headers), you will need to add them via runtimeCaching and will not work offline after first visit (the cache will be created on first request and them cached).

Beware, some OS/browser will have long refresh period and not all features in the webmanifest will be updated: https://web.dev/manifest-updates/

You will need to exclude manifest with false and add the logic to add the webmanifest properly.

[userquin]

@jlarmstrongiv you can check elk.zone repo:

• pwa configuration: https://github.com/elk-zone/elk/blob/main/config/pwa.ts
• we manually create 2 webmanifest variants per locale and theme: https://github.com/elk-zone/elk/blob/main/modules/pwa/i18n.ts using i18n json files (all variants are statically generated on build command)
• generate webmanifest variants: https://github.com/elk-zone/elk/blob/main/modules/pwa/index.ts#L83-L102
• if you want to check your webmanifest in dev you can add a Vite plugin via custom Astro integration (we're using Nuxt but the plugin can be used): https://github.com/elk-zone/elk/blob/main/modules/pwa/index.ts#L103-L152

[jlarmstrongiv]

Thank you @userquin! That’s extremely helpful.

I really like how your example supports dark mode and is excluded from the service worker cache. Seeing the header examples is helpful too.

[userquin]

@jlarmstrongiv here some pwa hints (user and develop) https://docs.elk.zone/pwa

Can be found in docs folder in elk repo (nuxt docus)