Question

我正在使用azure推送有角度的网站。该网站将主要用于移动设备。我们目前正在测试Beta版本，但是当我将网站更新为新版本时，用户的手机仍会打开旧版本。

编辑：在我的浏览器中，发生了同样的事情，当我检查源代码时，我看到索引已使用正确的主文件更新，但是加载了错误的主文件（main.a8d2。）。当我重新加载正确的main（在这里main.832a ....）

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

在我们的Azure开发版本中，我们对发布管道进行了以下更改：

在目标位置删除其他文件：在

哪个会强制应用程序服务删除它仍然拥有的所有旧的main，从而确保只有一个main.js文件，即更新中的当前文件。

编辑： 对于捆绑，我使用的是带角度的包装盒中的包装，参考。 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"
                }
              ]
            }
          }
        },

在我的webconfig中，我有：


<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响应标头，该标头是资源特定版本的标识符。请检查here中是否使用了带有角度的Etag。

请检查here，以获取有关http缓存控制和etag标头的更多信息

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

Answer 2

直到后来我才注意到web.config文件中的缓存元素。不要问我是谁或如何进入的，我假设其中一位同事需要它进行特定的测试，却忘了删除它。

<clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="365.00:00:00" />

删除该行之后，我不得不最后一次手动清除每个实体缓存，从那时起一切都按预期工作。

按下新的主管道后，天蓝色的Angular Frontend不会在移动设备上重新加载

2 个答案: