启用 Angular PWA 后，即使使用 --output-hashing=all 也必须清除缓存

Question

我有一个启用了 PWA 的 Angular 应用程序。客户必须在部署后清除缓存才能看到更改。无论他们是使用手机上安装的 PWA 还是只是在浏览器中打开网站。即使在计算机上，我们也必须清除缓存才能看到更改。

我使用以下命令来构建应用程序：

ng build --aot --output-hashing=all

该网站使用 nginX 提供服务。

我的

angular.json

文件中也有 hashing=all ：

"configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "8mb",
                  "maximumError": "16mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "8mb",
                  "maximumError": "16mb"
                }
              ],
              "outputHashing": "all"
            },

我怀疑我实现 PWA 的方式有问题。 这是

ngsw-config.json

文件：

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

这是

manifest.webmanifest

文件：

{
  "name": "secret",
  "short_name": "secret",
  "theme_color": "#027e41",
  "background_color": "#fafafa",
  "display": "standalone",
  "scope": "./",
  "start_url": "./",
  "icons": [
    {
      "src": "assets/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "assets/icons/icon-96x96.png",
      "sizes": "96x96",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "assets/icons/icon-128x128.png",
      "sizes": "128x128",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "assets/icons/icon-144x144.png",
      "sizes": "144x144",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "assets/icons/icon-152x152.png",
      "sizes": "152x152",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "assets/icons/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "assets/icons/icon-384x384.png",
      "sizes": "384x384",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "name": "secret",
      "src": "assets/icons/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "any"
    }
  ]
}

这是 nginx 配置：

location / {
        alias   /home/farmtech/frontend/farmtech-frontend/;
        add_header 'Service-Worker-Allowed' '/';
        add_header Clear-Site-Data "cookies, cache, storage";
        index  index.html;

        # kill cache
        add_header Last-Modified $date_gmt;
        add_header Cache-Control 'no-store, no-cache';
        if_modified_since off;
        expires off;
        etag off;
    }

并且我在

<meta name="cache-control" content="no-cache" />

 中有 

index.html

标签

Answer 1

更改 package.json 中的版本号默认应为“0.0.0”，您可以将其视为“majorrelease.minorrelease.bugfix”

这利用了 Angulars 自动缓存“破坏”技术。