Angular 8 Service Worker Support for Conditionally Download ES5 or Es2015 bundles

[naveedahmed1]

This feature request is for @angular/pwa

Description

With Angular 8 we now have support for Differential Loading, and Angular compiler produces two bundles one for ES5 and other for ES2015 and browser can choose between modern or legacy JavaScript based on its own capabilities.

This works fine, unless we are using Angular Service worker, but when we have a progressive web app, Angular Service Worker prefetchs, all JavaScript bundles i.e. ES5 and ES2015 bundles.

So, there should be an option in service worker to download the bundles on the basis of browser capabilities and it should download either ES5 or Es2015 bundles not both.

Describe the solution you'd like

May be some option could be provided in ngsw-config.json file e.g. a property for assetGroups through which we could specify when assets in this group should be downloaded (legacy/modern browser).

[gkalpak]

For angular.io, we do the following in ngsw-config.json:

"assetGroups": [
  {
    "name": "app-shell",
    "installMode": "prefetch",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        ...
        "/*.js",
        "!/*-es5*.js"
      ],
      ...
    }
  }, {
    "name": "assets-lazy",
    "installMode": "lazy",
    "updateMode": "prefetch",
    "resources": {
      "files": [
        ...
        "/*-es5*.js",
      ]
    }
  }
],

I.e. we eagerly load the es2015 bundles and we only load and cache the es5 bundles when requested (i.e. on browsers that need them).

This is indeed not ideal, but we take advantage of the fact that most browsers that support ServiceWorkers also support the es2015 bundles.

Leaving this open as a feature request (to have a mechanism to fetch the right bundles), but it is low priority atm.
If anyone wants to work on it though, I won't stop them 😉 (but we need to decide how to implement this first)

[laurentgoudet]

This is indeed not ideal, but we take advantage of the fact that most browsers that support ServiceWorkers also support the es2015 bundles.

As this seems to be a reasonable approach, and the one most people would take, I'd argue that the @angular/service-worker schematic should be updated to exclude ES5 bundles from being prefetch by default, as this would:

• Prevent the Angular Service Worker from double (pre)fetching the JS bundles by default, when differential loading is used
• Have no impact when differential loading is not used

The few browser versions that support Service Workers but not <script type="module">, which according to https://caniuse.com/#feat=es6-module & https://caniuse.com/#feat=serviceworkers are basically Firefox < 60 (current is 76), Chrome < 61 (current is 83), Opera < 48 (current is 68), are all outside Angular's browser support ranges (and outdated).

The Angular Service Worker has also no support to load a different (es5) ngsw.json config for these browsers (nor the Angular CLI has support to built it), and realistically will never need to.

[dgp1130]

The tooling team was going through some old PRs and came across #17905. In the current state of affairs, differential loading is deprecated and disabled by default, while it's main motivation (IE11) is also deprecated and losing support in v13. Changing the schematic now introduces migration challenges to update existing apps and then likely will need to be migrated again once differential loading is removed.

@gkalpak's workaround is pretty easy for individual projects to change if this issue is important enough to them, but updating the schematics now is probably more effort than it is worth for a feature like differential loading in its current state, so I'm closing this issue.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}