Service Worker Prefetch doesnt work if server is configured to Ignore Query String on Javascript Files

[x] Bug report

Current behavior

If the server (usually CDN) is configured to Ignore Query String for static resources such as JavasScript files, then the Prefetch mode of Service Worker doesn’t work.

Expected behavior

To save bandwidth of the origin server, CDNs such as Cloud Flare (https://support.cloudflare.com/hc/en-us/articles/200168256-What-are-Cloudflare-s-caching-levels-) has an option to Ignore Query String for static resources. Service Worker prefetch mode should work properly with such cases.

Minimal reproduction of the problem with instructions

Configure the server hosting the javascript bundles to ignore query string and return same file irrespective of the passed query string. And monitor the network tab while loading the website. You will notice that it just fetch the first bundle then make another request for the same bundle with ngsw-cache-bust query string and then stops and doesn’t prefetch rest of the resources.

What is the motivation / use case for changing the behavior?

Service worker should support various common configurations of the CDNs.

Environment

Angular CLI: 7.0.0-beta.4
Node: 8.11.4
OS: win32 x64
Angular: 7.0.0-beta.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.9.0-beta.4
@angular-devkit/build-angular      0.9.0-beta.4
@angular-devkit/build-optimizer    0.9.0-beta.4
@angular-devkit/build-webpack      0.9.0-beta.4
@angular-devkit/core               0.8.3
@angular-devkit/schematics         0.8.3
@angular/cdk                       7.0.0-beta.2
@angular/cdk-experimental          6.4.1
@angular/cli                       7.0.0-beta.4
@angular/fire                      5.0.2
@angular/flex-layout               6.0.0-beta.18
@angular/material                  7.0.0-beta.2
@angular/material-moment-adapter   7.0.0-beta.2
@angular/pwa                       0.8.3
@ngtools/webpack                   7.0.0-beta.4
@schematics/angular                0.8.3
@schematics/update                 0.9.0-beta.4

Browser:
- [x] All
 
For Tooling issues:
- Node version: v8.11.4
- Platform:  Windows

[naveedahmed1]

@gkalpak after further investigation I found that the service worker works with Ignore Query String as well. What’s actually was causing the issue is different optimizations at CDN level which could alter the original response; for example in my case it was Auto Minify option for html, javascript and css.

With these optimizations enabled the response returned from the CDN is not the same file which we uploaded to server and on which the hash was calculated. Since CDN modifies the response the hash calculated by service worker in browser isn’t same, which breaks service worker.

[angular-automatic-lock-bot[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.}