1

I have an internationalized angular web application with angular-i18n. With this system, angular creates a dedicated application for each language.

To provide multi-language on the web server, I have one url per language (mywebsite.com/en, mywebsite.com/de, mywebsite.com/fr, etc.), each url pointing to the application corresponding to the language.

The application can be installed on the device (with angular-pwa).

The problem is as follows:

When the user changes language, he is redirected to another url (for example from mywebsite.com/en to mywebsite.com/fr). In the case of the installed application, if he leaves it and restarts it, the language change does not persist. There is also another problem: not being on the same url as the installed application causes the browser bar to be displayed, which is not desirable in an installed pwa.

For the change to persist, the application would have to change its target url or reinstall itself when the user changes language. But I don't find anywhere how to do that...

How to solve this problem?

--

Edit:

I just find this question: Apply changes to an installed PWA (different base URL)

My problem is very similar.

Cheapfun
  • 11
  • 2
  • maybe use localstorage o sessionstorage o cookies for save last choice of specific user –  Aug 17 '20 at 14:13
  • This behavior is not desired. The user should be able to change the language by changing the url, which would not be possible with an automatic redirection based on the previous choice. – Cheapfun Aug 17 '20 at 14:40

1 Answers1

0

  1. Update to Angular 8 as this fixes bug with shared cache (adds lang prefix to caches).

  2. Be careful with modifying files post-build, for example changing html lang="" as this breaks hashes.

3.You can check some debug info by going to /ngsw/state. If you run your app from subdirectory (and you probably do if you're using i18n). this can be accessed only from the root of the origin, as in the ngsw-worker.js:

if (requestUrlObj.path === '/ngsw/state') {
    // Allow the debugger to handle the request, but don't affect SW state in any other way.
   event.respondWith(this.debugger.handleFetch(req));
   return;
}

So if you want it to work for example for /fr/ then replace '/ngsw/state' with '/fr/ngsw/state'.

Albin
  • 1
  • 1
  • I don't understand how that helps me. I'm on Angular 9 and the service-worker is working very well and as desired. My problem is to be able to "change" the application installed on the device when I change the language. – Cheapfun Aug 18 '20 at 11:42