Service Worker with Critical lib

[fabienbranchel]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

I use the Critical lib. When I use it, it's break the Angular Service Worker.

When using Critical, this is logs from Network panel :

When not using Critical, this is logs from Network panel :

As you may know, Critical handle the CSS. The script I use is just replace some CSS relative lines in my index.html. When using it, it's like preventing the SW to do all his work.

The issue is when we go offline, the refresh doesn't work, nothings seems to be cached by the SW.

Expected behavior

Using Critical and SW is ok with that.

Minimal reproduction of the problem with instructions

You can use this repo :
https://github.com/fabienbranchel/angular-sw-critical-css

In order to have this issue, you can use this following command (make an app build prod and apply Critical script) :

npm run branchel-prod-critical

In order to have the classic behavior, you can use this following command (make an app build prod) :

 npm run branchel-prod

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

Working stuff. :-)

Environment

Angular version: 6.1.0

Browser:
- [X] Chrome (desktop) version 68.0.3440.84 (64 bits)
- [X] Chrome (Android) version 67.0.3396.87

 
For Tooling issues:
- Node version: 10.6.0
- Platform:  macOS 10.13.6, Android 8.0.0

[gkalpak]

This happens, because the SW keeps a list of hashes for the known files (including index.html) and when receiving a file from the server compares the stored hash with the hashed content to see if they match. (The hash is based on the content, so if Critical is modifying the content after the hash has been computed (during ng build --prod) there will be a hash mismatch.)

This is currently working as expected. Maybe you could open an issue on CLI to add support for a way to hook into the build process at specific times (i.e. after index.html has been generated, but before the hash is computed).

As a work-around, you could run the following command at the end to re-compute the hashes (but it might have unexpected side-effects - I haven't thoroughly tested it):

./node_modules/.bin/ngsw-config <path/to/project/dist> <path/to/ngsw-config.json> [/optional/base/href]

[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.}