Menu
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:
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.
744
To set up the Angular service worker in your project, use the CLI command ng add @angular/pwa . It takes care of configuring your application to use service workers by adding the @angular/service-worker package along with setting up the necessary support files.
Adding a service worker to an Angular application is one of the steps for turning an application into a Progressive Web App (also known as a PWA). At its simplest, a service worker is a script that runs in the web browser and manages caching for an application. Service workers function as a network proxy.
Let us create a new application and convert it into PWA application. Run the web server and set our production build of the application as root folder. Open browser and enter http://localhost:8080. Now, go to Developer tools -> Network and select Offline option.
Progressive Web Application considers service workers as the primary technology. It allows deep platform integration, such as offline support, background sync, rich caching, and push notifications. The “ng add angular pwa” command generated the ngsw-config.json file, It is solely responsible for service workers.
It takes care of configuring your application to use service workers by adding the @angular/service-worker package along with setting up the necessary support files. Adds the @angular/service-worker package to your project. Enables service worker build support in the CLI. Imports and registers the service worker in the application module.
The ngsw-worker.js file will be available in the production build. Finally, after you verify all the static files add ngsw-config.json. In this file used to add the static files like .js, .css, images, font files, and external URLs. Now, it is ready to check with PWA enabled application. The PWA has to work in the production build.
Adding a service worker to your project link To set up the Angular service worker in your project, use the CLI command ng add @angular/pwa. It takes care of configuring your application to use service workers by adding the service-worker package along with setting up the necessary support files.
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.
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
