当推送新的 main 时，azure 上的 Angular 前端不会在移动设备上重新加载

Question

我正在使用 azure 来推送一个 Angular 网站。该网站将主要在移动设备上使用。我们目前正在测试我们的测试版，但是当我将网站更新到新版本时，用户的手机仍然打开旧版本。

编辑:在我的浏览器上也发生了同样的情况，当我检查源时，我看到索引已使用正确的主文件更新，但加载了错误的主文件(main.a8d2.. .)。当我重新加载时，会加载正确的 main(此处为 main.832a....)

在 Azure 中，我们在应用服务的配置中添加了一个名为 WEBSITE_DYNAMIC_CACHE 的应用程序设置，其值为 0。我们认为这会迫使浏览器不缓存我们的网站。

<小时/>

<小时/>

在我们的 azure devops 中，我们对发布管道进行了以下更改:

• 删除目标位置的其他文件:开启

<小时/>

<小时/>

这会强制应用服务删除其仍然拥有的所有旧主电源，确保只有一个 main.js 文件，即更新中的当前文件。

<小时/>

编辑:为了捆绑，我使用盒子里的东西和 Angular ，引用。 https://angular.io/cli/build我已经使用 ng build --prod 命令进行构建，现在我已将其更改为 ng build --prod="true"。正是在安装和构建过程中，一个版本被放置在我的主文件后面。

我的 .yml 文件步骤:

- script: |
    npm install -g @angular/cli
    npm install
    ng build --prod="true"
  displayName: 'npm install and build'

<小时/>

在我的 angular.json 中，我的构建有以下配置:

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/PaySlip",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/web.config"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },

在我的网络配置中，我有:

<configuration>
    <system.webServer>
    <staticContent>
      <clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
            <mimeMap fileExtension=".json" mimeType="application/json" />
     </staticContent>
        <rewrite>
        <rules>
            <rule name="redirect all requests" stopProcessing="true">
                <match url="^(.*)$" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
                </conditions>
                <action type="Rewrite" url="index.html" appendQueryString="true" />
            </rule>
        </rules>
    </rewrite>
    </system.webServer>
</configuration>

我预计当用户导航到我们的网站时，他们会获得我们网站的最新版本。然而他们最终仍然使用旧版本。在加载最新版本之前，我必须手动清除其完整缓存并多次重新加载其页面。本地 Firefox 在我的电脑上也做了同样的事情。只有当我手动清除我的firefox浏览器的缓存时，才能确保使用最新版本。如何强制浏览器使用我网站的最新版本？

Answer 1

您提到如果清除浏览器缓存就可以使用最新版本。这意味着最新版本已成功部署到azure。问题可能是您的应用没有文件名版本控制，这会导致更新缓存失败。

以下是解决此问题的可能方法:

1、您可以使用grunt-cache-breaker。它将向您的应用程序文件附加新的哈希值或时间戳作为文件版本控制。请查看here有关 grunt-cache-breaker 的更多用法。

2、您还可以使用Etag HTTP响应 header ，它是资源特定版本的标识符。请查看here用于将 Etag 与 Angular 结合使用。

请查看here有关 http 缓存控制和 etag header 的更多信息

希望以上内容对您有所帮助。