12

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.

Jelly
  • 184
  • 13
  • which version of angular-cli do you use? – dev-assassin May 09 '20 at 04:10
  • 1
    I don't think that it's real. The thing is that all your trasnlations are a part of a JS code, therefore different l18ns would have different code. Thus you can't "combine" them using one worker. These're actually different apps in the end. Perhaps you could work around this using `ngx-translate` which would require changing the translating architecture. However, its translations are independent of the app and therefore you are able to cache all of them in one app instalation – Sergey May 10 '20 at 08:30
  • @Sergey Thanks for answer. Yes, applications have different js code, but Angular hashes file names, so they have different names in each language app. Theoretically, if it were possible to cache the files specified in two index.html, this would solve the problem. Do you know if this can be achieved using any SW library or native implementation? I know the ngx-translate library, but this is the last resort, because the application is really big, so it would take a long time to change the architecture. – Jelly May 11 '20 at 10:55
  • 1
    @Jelly I think that you could make it by hande in two ways. 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 – Sergey May 11 '20 at 12:14
  • Also, why would you want to install both apps in one place? Your actual apps are hosted on different urls and therefore to switch between them it requires page reload. Thus it's reasonable to install each version individually. – Sergey May 11 '20 at 12:18
  • So, concluding said above. 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. – Sergey May 11 '20 at 12:21
  • @Sergey You're right, my idea of ​​installing two applications at once is a bit strange ;), but the next step is to put this in the google store. In this case, I do not want to break it into two PWA applications because I will have to duplicate my product in the store. – Jelly May 11 '20 at 12:35
  • You've given some nice ideas, can you sum up your comments as an answer? Then I will be able to grant you a bounty. – Jelly May 11 '20 at 12:39

3 Answers3

4

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.

Sergey
  • 7,184
  • 13
  • 42
  • 85
0

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.

Janne Harju
  • 976
  • 1
  • 14
  • 29
0

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.

Simon
  • 194
  • 13