We recently added internationalization (i18n) to our angular application. This resulted in a new folder structure where the dist folder now contains a subfolder for each language and the different languages can be found under the respective URLs of the locale (e.g.example.com/en-US/, example.com/de/). This all works very fine.
However, we are also using service workers in our application allowing users to install it and use it offline. The problem is Angular creates a separate service worker for each language with the scope of this subfolder (e.g. /en-US/ instead of /). This means instead of having one PWA for the whole application, we now have a separate PWA for each language we are serving. This approach would be fine with us because most of our users are anyway just using a single language.
The problem with this setup is the backwards compatibility. Users that installed the app before i18n was added are not correctly receiving updates. Sometimes the update gets added when the page is reloaded but the update is lost after the app is restarted.
This probably has to do with the change of the URL of the installed app, because before you were installing https://example.com and now it is https://example.com/en-US or https://example.com/de and therefore the old service worker cannot correctly find the new service worker file.
This update problem is very severe for us and I would really appreciate if anyone could help us. So far I can think of two possible ways to go:
- Delete the service workers in the subfolder and create a single service worker in the root. However, Angular does not seem to automatically support this (according to this post).
- Somehow show the old service worker where it has to look for the new updates or that the scope has changed.
We would really much like to have a automatic solution because telling all our users to uninstall and re-install the app is a very difficult process.
Thank you already!
