Skip to content

Service Worker with Critical lib #25267

Closed
Closed
Service Worker with Critical lib#25267
Labels
area: service-workerIssues related to the @angular/service-worker package
Milestone
needsTriage

Description

@fabienbranchel
fabienbranchel
opened on Aug 2, 2018

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 :

capture d ecran 2018-08-02 a 15 41 44

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

capture d ecran 2018-08-02 a 15 40 07

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

Activity

  1. IgorMinar
    added
    area: service-workerIssues related to the @angular/service-worker package
    on Aug 2, 2018
  2. ngbot
    added this to the needsTriage milestone on Aug 2, 2018

  3. gkalpak commented on Aug 3, 2018

    @gkalpak
    gkalpak
    on Aug 3, 2018
    Member

    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]
  4. gkalpak
    closed this as completedon Aug 3, 2018

  5. angular-automatic-lock-bot commented on Sep 14, 2019

    @angular-automatic-lock-bot
    angular-automatic-lock-botbot
    on Sep 14, 2019

    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.

  6. angular-automatic-lock-bot
    locked and limited conversation to collaborators on Sep 14, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: service-workerIssues related to the @angular/service-worker package

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions