Angular PWA ha sh проблема с кэшированием файлов - PullRequest
2 голосов
/ 31 марта 2020

Похоже, что после fre sh сборки с azure мой PWA обслуживает неправильные файлы

Вот мои runtime.*.js после новой сборки

enter image description here

Как вы можете видеть, runtime.*.js служит моим html документом ??

затем после жесткого refre sh

enter image description here

это правильный файл ...

Теперь я знаю, что сервисный работник кэширует связанные файлы ... но зачем ему менять файл на html документ после новой azure сборки ??

Это мой ngsw-config.json

{
    "index": "/index.html",
    "assetGroups": [
        {
            "name": "app",
            "installMode": "prefetch",
            "resources": {
                "files": ["/favicon.ico", "/index.html", "/manifest.json", "/*.bundle.css", "/*.bundle.js", "/*.chunk.js"]
            }
        },
        {
            "name": "assets",
            "installMode": "lazy",
            "updateMode": "prefetch",
            "resources": {
                "files": ["/assets/**", "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"]
            }
        }
    ]
}

Что я взял из многочисленных уроков о том, как правильно настроить Angular PWA.

Я нашел эту статью https://blog.ailon.org/quick-tip-pwa-manifest-and-azure-dd16664a3f43, и она говорит вам, что azure неправильно обслуживает .json файлов, и для исправления этого вы можете сделать следующее в вас web.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>
    <!-- IIS URL Rewrite for Angular routes -->
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

, но я все еще получаю это при каждой новой сборке с azure

Что я делаю неправильно? Это работник службы? или это проблема с azure?

Это мой azure конвейер

enter image description here

и это мой релиз-конвейер

enter image description here

Как я могу решить эту проблему ??

Любая помощь будет признательна!

1 Ответ

1 голос
/ 09 апреля 2020

В Начало было Ха sh

Пользователь нажимает на домашнюю ссылку вашего SPA.

Angular обслуживается страницы как site.com/#/home. Это было хорошо, как путь. Часть после # никогда не отправляется на сервер. Angular маршрутизатор может прочитать из UrL, какой маршрут и компонент обслуживать.

Изменение UseHashingStrategy: false

Затем Angular сказал, что мы будем использовать site.com/home в качестве пути. Вместо прямого запроса к серверу файл /home angular перехватывает его и обслуживает компонент. Но для этого Angular маршрутизатор должен быть загружен первым. В противном случае любой, кто попытается открыть site.com/home напрямую, получит 404.

Чтобы исправить это, Angular предлагает откат к индексу. html путем переписывания пути на сервере. В ответе для страниц (/home) кандидата 404, обслуживайте индексный файл, чтобы сначала можно было загрузить маршрутизатор, а затем обслуживать правильную страницу.

Правила перезаписи вашего файла webconfig делают именно это. После развертывания, когда html страница запрашивает файл *. js времени выполнения, Azure обслуживает индекс. html файл ....

Это означает, что Azure не удалось найдите файл времени выполнения *. js на сервере. Вы получили индекс отступления. html

Надеюсь, это поможет понять, куда копать дальше. Я предполагаю, что после развертывания вы открываете индекс. html он загружается из кеша. Имея ссылку на старый js файл. Итак, запрос на время выполнения * (old_version) *. js (теперь удаленный после развертывания) дает вам запасной файл.

...