How to fix Angular 8 Service Worker Hash mismatch errors when using server-side optimising packages (e.g. Pagespeed Module)

Question

I get Hash mismatch errors Error(Hash mismatch (cacheBustedFetchFromNetwork) since I implemented a PageSpeed module which edits the files after the @angular/service-worker is created (great package by the way!). Is it possible to have these work together in some way?

Everything works fine with the PageSpeed module disabled (and on localhost), but I'd like to create a boilerplate with multiple best-practises working together. I am running an app and reverse-proxy (jwilder nginx proxy) container on an Ubuntu Virtual Server.

I'm not sure what kind of code would be beneficial here, but here are the repo's I use:

Code for my app repo is here Code for reverse-proxy with some edited settings is here

I hope there can be some automated process of creating the service-worker in conjunction with doing the pagespeed optimisations in the right order, but I can't envision yet how that'd work.

The complete error message I get is:

Clients: 

=== Idle Task Queue ===
Last update tick: 5s342u
Last update run: 342u
Task queue:


Debug log:

[193u] Error(Hash mismatch (cacheBustedFetchFromNetwork): https://raw3.io/index.html: expected 7bd969964be1eec77b1db64c6ca8d6b26759f961, got 89dc3af453c7dacfa5518ff96d8a514c61cde1f1 (after cache busting), Error: Hash mismatch (cacheBustedFetchFromNetwork): https://raw3.io/index.html: expected 7bd969964be1eec77b1db64c6ca8d6b26759f961, got 89dc3af453c7dacfa5518ff96d8a514c61cde1f1 (after cache busting)
    at PrefetchAssetGroup.<anonymous> (https://raw3.io/ngsw-worker.js:699:35)
    at Generator.next (<anonymous>)
    at fulfilled (https://raw3.io/ngsw-worker.js:320:62)) Error occurred while updating to manifest 536ad256c5372555c8f73baed2eefa2280c723ae

score 1 · Answer 1 · answered Jul 27 '19 at 19:50

I am not familiar with PageSpeed, but from a quick look it seems that it does the optimizations on the fly (and caches them for future use). The current implementation of @angular/service-worker does not support scenarios in which the served files defer from the build artifacts (based on which the ngsw.json manifest file will have been generated). There is an issue to track this on thr Angular repo: #23613

If it were possible (afaict it is not) to run the optimization "offline" (e.g. as a build step), you could re-generate the ngsw.json manifest file (to take into account the updated file contents) by running:

node_modules/.bin/ngsw-config path/to/dist/directory path/to/ngsw-config.json [/base/href]

How to fix Angular 8 Service Worker Hash mismatch errors when using server-side optimising packages (e.g. Pagespeed Module)

1 Answers1