0

tengo una aplicación en angular donde he configurado un alert donde notifico si hay una nueva versión para instalar, la parte donde configuro el services worker fue la de este sitio: services worker in angular

y me funciona correctamente en local porque cuando ejecuto

ng build --configuration production

y luego ejecuto en otra terminal estando en el directorio /dist

http-server

y luego de eso sin detener el servicio de http-server la aplicación funciona correctamente, ahora viene lo importante que deseo, que me notifique si hay una nueva versión que instalar, lo que hago es lo siguiente

Realizo algunos pequeños cambios en la aplicación y vuelvo a ejecutar ng build --configuration production (sin detener http-server) luego cuando termina de compilar automaticamente me muestra el mensaje que hay una nueva version disponible que hay que instalar

Ahora bien, ya esta misma aplicación que tengo en /dist y lo cargo en un servidor privado remoto (digitalocean) y subo actualizaciones ahi, me da el siguiente error:

{
    "type": "VERSION_INSTALLATION_FAILED",
    "version": {
        "hash": "53d69fb3207e6116f9e36ef379a1cddf737d8e6f"
    },
    "error": "Hash mismatch (cacheBustedFetchFromNetwork): https://midominio.com/index.html: expected 0efe491b9fcfab801c6e215cca547665314f7ee6, got e81f58bba71654d3e4fdd8e39416048d2ebe0520 (after cache busting)
Error: Hash mismatch (cacheBustedFetchFromNetwork): https://midominio.com/index.html: expected 0efe491b9fcfab801c6e215cca547665314f7ee6, got e81f58bba71654d3e4fdd8e39416048d2ebe0520 (after cache busting)
    at PrefetchAssetGroup.cacheBustedFetchFromNetwork (https://midominio.com/ngsw-worker.js:476:21)
    at async PrefetchAssetGroup.fetchFromNetwork (https://midominio.com/ngsw-worker.js:451:19)
    at async PrefetchAssetGroup.fetchAndCacheOnce (https://midominio.com/ngsw-worker.js:430:21)
    at async https://midominio.com/ngsw-worker.js:535:9
    at async https://midominio.com/ngsw-worker.js:521:9
    at async https://midominio.com/ngsw-worker.js:521:9
    at async https://midominio.com/ngsw-worker.js:521:9
    at async https://midominio.com/ngsw-worker.js:521:9
    at async https://midominio.com/ngsw-worker.js:521:9
    at async https://midominio.com/ngsw-worker.js:521:9"
}

mi configuracion de nginx es la siguiente:

server {

        server_name midominio.com;

        location ~* \.(eot|ttf|woff|woff2)$ {
                add_header Access-Control-Allow-Origin *;   
        }
        
        location / {
              root /var/www/html/dist;
              # Add index.php to the list if you are using PHP
              index index.html index.htm index.nginx-debian.html;
              try_files $uri $uri/ /index.html;
        }

        location /api {
                rewrite /api/(.*) /$1  break;
                proxy_pass http://127.0.0.1:5000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

        location /socket.io {
                # rewrite /socket.io/(.*) /$1  break;
                proxy_pass http://127.0.0.1:5000/socket.io/;
                proxy_set_header  X-Real-IP $remote_addr;
                proxy_set_header  X-Real-Port $remote_port;
                #include nginxconfig.io/proxy.conf;
                proxy_http_version      1.1;
                proxy_cache_bypass      $http_upgrade;
                proxy_set_header Upgrade                $http_upgrade;
                proxy_set_header Connection             "upgrade";
                proxy_set_header Host                   $host;
                proxy_set_header X-Real-IP              $remote_addr;
                proxy_set_header X-Forwarded-For        $proxy_add_x_forwarded_for;
                proxy_set_header X-Forwarded-Proto      $scheme;
                proxy_set_header X-Forwarded-Host       $host;
                proxy_set_header X-Forwarded-Port       $server_port;
        }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/midominio.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/midominio.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

Cuando lo ejecuto con http-server en local me funciona de maravilla, cuando lo paso a nginx ya me manda el error mostrado anteriormente, ¿es posible que le falte alguna configuración a nginx?

Cualquier luz de ayuda que me proporcionen se los agradecería mucho.

2 respuestas 2

0

El software calcula un hash para los artefactos después de la compilación, y estos son almacenados en ngsw.json, que se genera en base a ngsw-config.json. Cuando se va a aplicar la actualización, se verifica el hash de los archivos obtenidos contra ngsw.json y si alguno no coincide se genera este error.

Lo que diría que está ocurriendo en tu caso es que el archivo que genera la ofensa (index.html) ha sido modificado de alguna manera después de finalizado el build y después de que se ha calculado y almacenado este hash.

Si la modificación no la estás haciendo intencionalmente en alguna acción post-build, puede ser algo que se esté haciendo de manera automática por alguna otra herramienta que uses para desplegar los archivos al servidor remoto.

Por ejemplo, hay algunos clientes FTP que optimizan los espacios vacíos con tal de mejorar el tiempo de carga/descarga. También hay otros agentes que minimizan algunos archivos con el mismo objetivo.

También hay clientes FTP que cambian entre CRLF/LF dependiendo del sistema operativo de origen y destino de una transferencia, lo cual afectaría el cálculo del hash.

Sugiero que hagas una comparación byte a byte del archivo original con el que se está quedando en el servidor, lo que seguramente arrojará luz sobre cuál podría ser el origen de dicha modificación.

Tomado y adaptado de aquí, a dónde llegué desde aquí

1
  • 1
    estoy usando git y github para subir la aplicación desde mi maquina local hasta el servidor remoto, voy a verificar si al subir las actualizaciones genera alguna modificación. Commented el 14 may. a las 20:00
0

Después de muchos intento de varias maneras encontré como resolver este problema.

en el archivo ngsw-config.json tenia esta configuración

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

eliminé estas dos lineas /index.html y /manifest.webmanifest el resultado final fue:

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/*.css",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

despues de eso hice ng build --configuration production subi los cambio al servidor y automaticamente me comenzó a mostrar el mensaje de que existe nueva versión de la aplicación y me dejo de mostrar ese mensaje de service worker, Hash mismatch (cacheBustedFetchFromNetwork)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.