Angular 9 PWA offline not working – Hash mismatch (cacheBustedFetchFromNetwork)

[michaelholzknecht]

Hi there,

i have an angular PWA and it does not start offline (http error 504):
Using Angular CLI: 9.1.9 Node: 12.16.1 Angular: 9.1.11

ngsw/state log

Driver state: EXISTING_CLIENTS_ONLY (Degraded due to failed initialization: Hash mismatch (cacheBustedFetchFromNetwork): https://sandbox.lola-infra.at/favicon.ico: expected 2032ed1011b75c7da384289b8a1a1efc6d106924, got 1de8e3c15ab0fe47f30cb3a83ffa2498fef4c4c4 (after cache busting)
Error: Hash mismatch (cacheBustedFetchFromNetwork): https://sandbox.lola-infra.at/favicon.ico: expected 2032ed1011b75c7da384289b8a1a1efc6d106924, got 1de8e3c15ab0fe47f30cb3a83ffa2498fef4c4c4 (after cache busting)
    at PrefetchAssetGroup.<anonymous> (https://sandbox.lola-infra.at/ngsw-worker.js:734:35)
    at Generator.next (<anonymous>)
    at fulfilled (https://sandbox.lola-infra.at/ngsw-worker.js:174:62))
Latest manifest hash: 801989630e02e49f3f5e9ce3d100ed150f2f0709
Last update check: 37s751u

=== Version 801989630e02e49f3f5e9ce3d100ed150f2f0709 ===

Clients: 

=== Idle Task Queue ===
Last update tick: 36s890u
Last update run: 37s791u
Task queue:


Debug log:

[16m47s821u] Error(Hash mismatch (cacheBustedFetchFromNetwork): https://sandbox.lola-infra.at/favicon.ico: expected 2032ed1011b75c7da384289b8a1a1efc6d106924, got 1de8e3c15ab0fe47f30cb3a83ffa2498fef4c4c4 (after cache busting), Error: Hash mismatch (cacheBustedFetchFromNetwork): https://sandbox.lola-infra.at/favicon.ico: expected 2032ed1011b75c7da384289b8a1a1efc6d106924, got 1de8e3c15ab0fe47f30cb3a83ffa2498fef4c4c4 (after cache busting)
    at PrefetchAssetGroup.<anonymous> (https://sandbox.lola-infra.at/ngsw-worker.js:734:35)
    at Generator.next (<anonymous>)
    at fulfilled (https://sandbox.lola-infra.at/ngsw-worker.js:174:62)) initializeFully for 801989630e02e49f3f5e9ce3d100ed150f2f0709
[16m46s656u] Ignoring invalid request: 'only-if-cached' can be set only with 'same-origin' mode Driver.fetch(https://sandbox.lola-infra.at/login, cache: only-if-cached, mode: no-cors)
[10m25s419u] Error(Hash mismatch (cacheBustedFetchFromNetwork): https://sandbox.lola-infra.at/favicon.ico: expected 2032ed1011b75c7da384289b8a1a1efc6d106924, got 1de8e3c15ab0fe47f30cb3a83ffa2498fef4c4c4 (after cache busting), Error: Hash mismatch (cacheBustedFetchFromNetwork): https://sandbox.lola-infra.at/favicon.ico: expected 2032ed1011b75c7da384289b8a1a1efc6d106924, got 1de8e3c15ab0fe47f30cb3a83ffa2498fef4c4c4 (after cache busting)
    at PrefetchAssetGroup.<anonymous> (https://sandbox.lola-infra.at/ngsw-worker.js:734:35)
    at Generator.next (<anonymous>)
    at fulfilled (https://sandbox.lola-infra.at/ngsw-worker.js:174:62)) Error occurred while updating to manifest bc2988b7a29a92d6258fabcf3a918bc5ee4d7818
[1m19s499u] TypeError(Failed to fetch, TypeError: Failed to fetch) Driver.fetch(https://sandbox.lola-infra.at/)
[1m14s514u] TypeError(Failed to fetch, TypeError: Failed to fetch) Driver.fetch(https://sandbox.lola-infra.at/ngsw.json?ngsw-cache-bust=0.8623419988881935)
[1m14s513u] Check for update aborted. (Client or server offline.) 
[37s512u] Error(Hash mismatch (cacheBustedFetchFromNetwork): https://sandbox.lola-infra.at/favicon.ico: expected 2032ed1011b75c7da384289b8a1a1efc6d106924, got 1de8e3c15ab0fe47f30cb3a83ffa2498fef4c4c4 (after cache busting), Error: Hash mismatch (cacheBustedFetchFromNetwork): https://sandbox.lola-infra.at/favicon.ico: expected 2032ed1011b75c7da384289b8a1a1efc6d106924, got 1de8e3c15ab0fe47f30cb3a83ffa2498fef4c4c4 (after cache busting)
    at PrefetchAssetGroup.<anonymous> (https://sandbox.lola-infra.at/ngsw-worker.js:734:35)
    at Generator.next (<anonymous>)
    at fulfilled (https://sandbox.lola-infra.at/ngsw-worker.js:174:62)) Error occurred while updating to manifest bc2988b7a29a92d6258fabcf3a918bc5ee4d7818

.htaccess file for redirect the angular routes and https

# Generated with ngx-htaccess-generator v1.0.2
# https://julianpoemp.github.io/ngx-htaccess-generator/

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Redirection to HTTPS:
  RewriteCond %{HTTPS} !on
  RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}

  # Redirection of requests to index.html
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
  RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
  RewriteRule ^.*$ - [NC,L]
  RewriteRule ^(.*) index.html [NC,L]
</IfModule>

##############################

Randomly I get this error in the chrome dev console when I try offline and then go online and start the pwa:

Uncaught (in promise) Error: Response not Ok (fetchAndCacheOnce): request for https://sandbox.lola-infra.at/index.html returned response 504 Gateway Timeout
    at PrefetchAssetGroup.<anonymous> (ngsw-worker.js:631)
    at Generator.next (<anonymous>)
    at fulfilled (ngsw-worker.js:174)

Also the Lighthouse-Test in the chrome dev tools gives me no errors.
Anyone an idea?

Thanks a lot!
Michael

[gkalpak]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

From a quick look, it seems to be that the favicon returned from the server is different than the one that is present on disk when building the app.

[michaelholzknecht]

Thanks ... ahhh I just realised that my shell script changes the icons after ng build, I did't thought that this will have any effects!

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