4

When I build an Angular application with a service worker, it creates a hash table with the hash of each file to detect when a new version of the app is available. This hash table is in ngsw.json.

Here is an example of the hash valueas.

Has table

If I want to clean unused css with PurifyCSS then dist/styles.*.css will change file content and therefore its hash, but the ngsw.json has the old hash.

In this situation, the angular service worker will fail because there will be a hash mismatch.

How cand I avoid this situation? Should I update the hash manually in ngsw.json after I run PurifyCSS? Is there some mechanism to update this value automatically or can PurifyCSS be executed before angular-cli generates the hash for each file?

This question is oriented in general for any kind of modification made over the dist files cached by the service worker, because the hash will change and therefore there will be a hash mismatch. This implieas that the service worker won't work.

Thank you in advance.

1

3 Answers 3

7

I discovered something very useful that appears in the official Angular documentation. You can recreate the ngsw.json file with a simple command after making all the modifications you want on the files in the dist folder.

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

This regenerates the ngsw.json and the service worker works correctly again.

https://angular.io/guide/service-worker-config

0
1

I just ran into that problem with my Angular Service Worker. I learned about it the hard way (fun fact: NGSW won't work in offline mode and won't cache results).

Anyway, here's how I addressed this issue.

Since Angular inlines components' CSS inside the .js dist outputs, the stand alone .css file output by Angular contains any global styling (i.e. styles.css) and for example, Bootstrap CSS. What I did was run purifyCSS and copy the cleaned output into src/styles.css. This way you don't have to do any SHA1 hash modification in the ngsw.json after building. The drawback is that whenever you add say, a module that relies on different Bootstrap selectors, you'll need to redo this process.

Unfortunately this is kind of clunky but I haven't found out a way to integrate the purifying process into the 'prebuild' process.

1
  • 1
    I have added an answer that may be helpful to you.
    – Mr. Mars
    Commented Aug 24, 2020 at 14:03
0

I had similar issue when deploying my app on vercel with sentry in the build step. Turns out, sentry adds comment to js files for tracking which changes it's sha1 checksum. Ended up modifying my package.json like that:

"scripts" {
   "build": "ng build --configuration production && npm run sentry:sourcemaps && npm run ngsw:generate",
   "sentry:sourcemaps": "sentry-cli sourcemaps inject ...",
   "ngsw:generate": "npx ngsw-config dist/app/browser ./ngsw-config.json",
   ...
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.