Repository navigation
Support for PWA together with localized app serving all languages on same url #56910
Description
Which @angular/* package(s) are relevant/related to the feature request?
service-worker
Description
Some use-cases require a localized ng app to have all translated bundles served on the same URL. A prominent example is https://google.com which serves all locales on the same url.
Setting that up with an Angular app is not easy but can be done – although combining it with PWA support seems impossible.
This is a wish/request for either support for a localized PWA serving all locales on the same url or documentation for how to implement it.
Background: Serving localized on same url
Using fx express we can serve the right bundle according to the preferred language. But because of angular/angular-cli#17416, it is required to serve all js-files with language in the url. I do what angular/angular-cli#17416 (comment) suggests, and serves the index.html at fx. https://server/index.html and the js-files at fx. https://server/{locale}/main.44242342.js. (angular/angular-cli#17416 (comment) gives more details into how to make it work with routing and all)
We have this working quite nicely at https://app.previsto.com serving 5 different languages on the same url and all deep links goes to the same content just with the app language in the user's preferred language.
Adding PWA
We cannot get PWA working though. We have tried to create a very simple app with ng new at https://github.com/michaelkrog/i18n-pwa-test. We have then:
- added the localize package (
ng add @angular/localize) - added the pwa package (
ng add @angular/pwa) - adjusted angular.json to build
en-USanddafor production builds - added an express script for serving both languages (defaults to
en-US)
The app serves fines, the service-worker registers itself, I can see files cached.
But the files are not served by the service-worker at any time.
Getting the test app running
To get the test app running, do this:
- Check out https://github.com/michaelkrog/i18n-pwa-test
cd i18n-pwa-testnpm iandnpm run serve
Proposed solution
Add documentation for how to serving multiple locales on the same url while preserving angulars PWA support.
Alternatives considered
ngx-translate to ensure just one build - but I prefer to stick with Angulars native i18n.
Activity
[-]Support for PWA together with i18n app serving all languages on same url[/-][+]Support for PWA together with localized app serving all languages on same url[/+]alan-agius4 commentedon Jul 9, 2024
A few months ago, we talked about internationalization (i18n) and URLs. While www.google.com supports multiple languages on a single domain, this method is not recommended. It conflicts with Google Search's guidelines to use different URLs for different language versions and might prevent Google from finding and crawling all your language variations. Therefore, I would be cautious about including it in the documentation.
For more information, check out Google's recommendations on managing multi-regional sites: https://developers.google.com/search/docs/specialty/international/managing-multi-regional-sites
michaelkrog commentedon Jul 9, 2024
@alan-agius4 I agree for SEO-purposes that different url's are required according to Google Search guidelines.
We also do that with our SSR-rendered webpage (fx https://previsto.com/en, https://previsto.com/da etc.).
But when it comes to an app behind a paywall, Search guidelines are no longer applicable, but UX is.
In our case we deliver a task management system. If a user copies a link to a task and shares that with international colleagues, we find the best UX is to have a single unique URL without any details about language (fx https://app.previsto.com/my-company/tasks/task-123). The task itself will be in whatever language the user wrote it in, but the app itself should be in the user's preferred language.
spock123 commentedon Jul 15, 2024
We generate a service worker for each language, use a root index.html to redirect incoming requests to the corresponding
/<lang>url. Each build has a service worker.The manifest.json file has the scope and start_url set to relative paths, like this:
michaelkrog commentedon Jul 18, 2024
@spock123 Thx.
But we don’t redirect the browser to a locale subpath for our app (we only do that for our website). All languages are served at the same url. Depending on their preferred language, we select which localized build to serve.
This way we have deep urls into our apps that does not define the language of the app.
Fx. if I as a danish user copy a deep url from the browser and gives it to a german colleague, the both of us will get a UI in our preferred language from the same deep url.
spock123 commentedon Jul 18, 2024
sondreb commentedon Jul 3, 2025
I build a lot of PWAs and have for many years, all in Angular. It's unfortunate that this is still not possible with the standard tooling.
JeanMeche commentedon Aug 29, 2025
With #63364 we've announced that the service-worker package in now in maintenance mode and will not receive feature PRs and feature requests.
The message is also visible here: https://angular.dev/ecosystem/service-workers
angular-automatic-lock-bot commentedon Sep 29, 2025
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.