Angular 9 PWA Hash mismatch (cacheBustedFetchFromNetwork)

Question

i have an angular PWA and it does not start offline (http error 504). When I check out the /ngsw/state I get this error:

Error: Hash mismatch (cacheBustedFetchFromNetwork): https://example.com/favicon.ico: expected 566d8535a3adc2f7210a8a890bdc50ec4f91f0e3, got 8e076950c4c615772d8d5d753e07377bab9f2f27 (after cache busting)
    at PrefetchAssetGroup.<anonymous> (https://example.com/ngsw-worker.js:734:35)
    at Generator.next (<anonymous>)
    at fulfilled (https://example.com/ngsw-worker.js:174:62))
Latest manifest hash: 5952e5e67f8b4ee7115ef9d519a346712927b608

Using Angular CLI: 9.1.9 Node: 12.16.1 Angular: 9.1.11

The lighthouse check on PWA gives me no errors and for redirecting the angular routes on the apache server I use .htaccess

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^.*$ - [NC,L]

RewriteRule ^(.*) /index.html [NC,L]

Anyone an idea? Thanks!

Answer 1

In my case, the problem was related to the fact that I was deploying the application using git (using post-receive git hook). By default, git replaces line endings. And this led to the fact that the files on the server were different from the original ones and their hashes was also different.

I compared the hash of the file index.html on server, it was different from the value in 'ngsw.json' file.

    sha1sum index.html
    04e691dbfae931bfd24513ac63d833bdfee3a1f6  index.html

After I disabled the line endings transformation:

    git config --local core.autocrlf false

and push project again problem disappeared and sha1sum index.html showed me the save hash as in the 'ngsw.json'.