Skip to content

Support for PWA together with localized app serving all languages on same url #56910

@michaelkrog

Description

@michaelkrog

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-US and da for 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.

Skærmbillede 2024-07-09 kl  11 06 18 Skærmbillede 2024-07-09 kl  11 21 46 Skærmbillede 2024-07-09 kl  11 23 55

Getting the test app running

To get the test app running, do this:

  1. Check out https://github.com/michaelkrog/i18n-pwa-test
  2. cd i18n-pwa-test
  3. npm i and npm 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: service-workerIssues related to the @angular/service-worker package

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions