Angular PWA / Service worker offline translation width ngx-translate

Question

i have an angular pwa app using @ngx-translate/core and @ngx-translate/http-loader for translations. So I wonder if it's possible to get the translations working if the device is offline.

Is there a way to cache the http-loader requests, maybe in a dataGroup in the ngsw-config.json file?

Answer 1

If you follow the standard pattern and use json files as your locale information, then you would use asset groups (see below):

{
  "name": "translate",
  // Use lazy. You don't want to install unless they use the translation
  "installMode": "lazy", 
  // Use prefetch because you want it to update every time the app updates
  "updateMode": "prefetch",
  "resources": {
    "files": "/assets/i18n/*.json"
  }
}

See https://christianlydemann.com/how-to-cache-http-requests-in-an-angular-pwa/ and https://angular.io/guide/service-worker-config