Angular Frontend на Azure не перезагружается на мобильном телефоне при нажатии новой магистрали - PullRequest
0 голосов
/ 31 октября 2019

Я использую лазурь, чтобы выдвинуть угловой сайт. Сайт будет в основном использоваться на мобильных устройствах. В настоящее время мы тестируем нашу бета-версию, но когда я обновляю веб-сайт до новой версии, телефон пользователя по-прежнему открывает старую версию.

Редактировать: В моем браузере происходит то же самое, когда я проверяю источники, я вижу, что индекс обновляется с правильным основным файлом, но загружается неправильный основной файл (main.a8d2 ...). Когда я перезагружаюсь, загружается правильная основная (здесь main.832a ....)

Wrong main file loaded

В Azure, в сервисе приложений мыдобавлен параметр приложения в конфигурации с именем WEBSITE_DYNAMIC_CACHE со значением 0 . Мы думали, что это заставит браузер не кэшировать наш сайт.


application setting


В наших лазурных девопах мы внесли следующие изменения вконвейер выпуска:

  • Удалите дополнительные файлы в месте назначения: в

azure devops pipeline


Что вынуждает службу приложения удалять все старые сети, которые у нее есть, при условии, что существует только один файл 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"
                }
              ]
            }
          }
        },

В моей веб-конфигурации у меня есть:


<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, гарантируется использование последней версии. Как заставить браузер использовать последнюю версию моего сайта?

Ответы [ 2 ]

1 голос
/ 01 ноября 2019

Вы упомянули, что последнюю версию можно использовать, если очищен кеш браузера. Это означает, что последняя версия успешно развернута в Azure. Проблема может заключаться в том, что в вашем приложении нет версий имен файлов, что приводит к сбою при обновлении кэша.

Ниже приведены возможные способы исправить это:

1, Вы можете использовать grunt-cache-breaker. Он добавит новые хэши или временные метки к файлам вашего приложения в качестве контроля версий файлов. Пожалуйста, проверьте здесь для получения дополнительной информации о grunt-cache-breaker.

2, Вы также можете использовать Etag HTTP-заголовок ответа, который является идентификатором для конкретной версииресурс. Пожалуйста, проверьте здесь для использования Etag с angular.

Пожалуйста, проверьте здесь для получения дополнительной информации об управлении кэшем http и заголовке etag

Надеюсь, вы найдетевыше полезно.

0 голосов
/ 06 ноября 2019

Я не заметил элемент кэширования в файле web.config, пока позже. Не спрашивайте меня, кто или как он туда попал, я бы предположил, что одному из коллег он понадобился для определенного теста и забыл удалить его.

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

После удаления этой строки мне пришлось очиститьвсе кешируют один последний раз вручную, с тех пор все работает как положено.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...