How to enable installation of the multi language Angular PWA with single service worker?

Question

I have prepared applications with localized language versions. For this purpose I used the native Angular i18n module , which prepared two application packages with the appropriate language in each.

Each version of the application is available under the individual location on my nginx server:

• myapp.com/en/...
• myapp.com/pl/...

I would like my application to be installed once as PWA and provide both language versions using a (single?) service worker.

Unfortunately all I could do now with @angular/pwa module is to provide a separate service workers for each application, which forces separate installations of each language version of my application.

My question is: Is there any way for the application to work in the way I described using @angular/pwa or Workbox ?

// By the way, it's a bit surprising that the creators of Angular didn't highlight the integration of @angular/localize with @angular/pwa.

Answer 1

You have N apps for each language. They are hosted on different domains. They are actually different apps. Therefore even if you install all of them in one URL you get to install all of them.

As an option of using one domain with different apps you could either create a config with all langs and their corresponding JS files, or make a parser for index.html. Then, you need to create your own worker which will insert the right scripts on page load (you can't do it on go since JS code would be already loaded). This will load the appropriate app. And there you have your workers for each app included I guess.

You may want to consider switching your i18n tool if you are about publishing it in Google Store as a hybrid app.

As another option you could provide a layer for your WebView and load different URL depending on language user's chosen.

Answer 2

I did have same kind problem. My app is never be in public network so there is same problem. Although I did have problem to PWA find service worker. It was complaining that service worker was not found even it was. I solved this problem by changing manifest file. Earlier I did have

"start_url": "/",

Then I changed it into

"start_url": "./",

Then it did found serviceworker correctly.

Answer 3

I posted a feature request (https://github.com/angular/angular/issues/43796) for Angular which is currently up for consideration. If it reaches 20 upvotes in the next 60 days the Angular Team will consider providing a native solution for having a single service worker that provides all installed languages and therefore solving the here mentioned issue.