Angular Сервисный работник не кэширует ресурсы после развертывания на страницах Github - PullRequest
Новая
       86

Angular Сервисный работник не кэширует ресурсы после развертывания на страницах Github

0 голосов
/ 24 апреля 2020

Я разработал демонстрационное приложение Angular PWA (Angular v9.1.3), реализующее стратегии performance и freshness.

Локально работает отлично, даже в автономном режиме. Но после развертывания на страницах Github он больше не работает должным образом: стратегия

  1. performance продолжает получать все запросы из сети, а не из кеша
  2. В автономном режиме приложение не работает, так как кажется, что ничего не кэшируется


Я использую angular-cli-ghpages для развертывания на gh-страницах с помощью следующей команды (angular -pwa -ilerplate - это Имя репо): 

    ng deploy --base-href=/angular-pwa-boilerplate/


После развертывания я настраиваю свойство start_url файла веб-манифеста на "/ angular -pwa -ilerplate /", чтобы отразить структуру подкаталога.

Несмотря на то, что путь области видимости является правильным и приложение можно установить, работник службы не кэширует ни ресурсы, ни ответы Http (хотя локально все в порядке).

Я читал много статей об этом, но все исправления не работали:

  1. Используйте относительный путь ./ для файла рабочего сервиса:
    ServiceWorkerModule.register('./ngsw-worker.js', ...)
  2. Установите относительные значения для scope и start_url в файле манифеста:
    "scope": " . ",
    " start_url ":" "./"


Здесь DEMO и Github Repo

Похоже также, что еще некоторая текущая работа над этим топи c.

ОБНОВЛЕНИЕ

Я заметил, что если я оставлю start_url: "/" (следовательно, не настраивая его на base-href), Angular Service Worker и его стратегии кэширования будут работать как garm также на gh-страницах.


Однако приложение больше не устанавливается:

enter image description here

1 Ответ

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

Это то, что вы видите, если получаете доступ к отладочной информации : 

NGSW Debug Info:

Driver state: EXISTING_CLIENTS_ONLY (Degraded due to: Hash mismatch (cacheBustedFetchFromNetwork): https://pacoita.github.io/angular-pwa-boilerplate/manifest.webmanifest: expected cbcd3fc3623610507d05fab49a40b0fcb22f47bb, got 69c8bc4c8eb903528013fe49ac2c8a521b120901 (after cache busting)
Error: Hash mismatch (cacheBustedFetchFromNetwork): https://pacoita.github.io/angular-pwa-boilerplate/manifest.webmanifest: expected cbcd3fc3623610507d05fab49a40b0fcb22f47bb, got 69c8bc4c8eb903528013fe49ac2c8a521b120901 (after cache busting)
    at PrefetchAssetGroup.<anonymous> (https://pacoita.github.io/angular-pwa-boilerplate/ngsw-worker.js:734:35)
    at Generator.next (<anonymous>)
    at fulfilled (https://pacoita.github.io/angular-pwa-boilerplate/ngsw-worker.js:174:62))
Latest manifest hash: 4f36c4b0eb2e39ccabb57986bc3191e39cabad0c
Last update check: 1m45s215u

=== Version 4f36c4b0eb2e39ccabb57986bc3191e39cabad0c ===

Clients: 

=== Idle Task Queue ===
Last update tick: 1m50s390u
Last update run: 1m45s381u
Task queue:


Debug log:

[2m40s282u] Ignoring invalid request: 'only-if-cached' can be set only with 'same-origin' mode Driver.fetch(https://pacoita.github.io/angular-pwa-boilerplate/, cache: only-if-cached, mode: no-cors)
[2m34s503u] Error(Hash mismatch (cacheBustedFetchFromNetwork): https://pacoita.github.io/angular-pwa-boilerplate/manifest.webmanifest: expected cbcd3fc3623610507d05fab49a40b0fcb22f47bb, got 69c8bc4c8eb903528013fe49ac2c8a521b120901 (after cache busting), Error: Hash mismatch (cacheBustedFetchFromNetwork): https://pacoita.github.io/angular-pwa-boilerplate/manifest.webmanifest: expected cbcd3fc3623610507d05fab49a40b0fcb22f47bb, got 69c8bc4c8eb903528013fe49ac2c8a521b120901 (after cache busting)
    at PrefetchAssetGroup.<anonymous> (https://pacoita.github.io/angular-pwa-boilerplate/ngsw-worker.js:734:35)
    at Generator.next (<anonymous>)
    at fulfilled (https://pacoita.github.io/angular-pwa-boilerplate/ngsw-worker.js:174:62)) initializeFully for 4f36c4b0eb2e39ccabb57986bc3191e39cabad0c
[2m6s104u] TypeError(Failed to fetch, TypeError: Failed to fetch) Driver.fetch(https://pacoita.github.io/angular-pwa-boilerplate/)

ПРИМЕЧАНИЕ. Информация об отладке обычно доступна как /ngsw/state, но это не работать при подаче из подпути. Это будет исправлено с angular / angular # 31082 . Я только что взломал мой путь к отладочной информации.

Судя по данным отладки, существует несоответствие ha sh для manifest.webmanifest, из-за которого ServiceWorker не работает должным образом. Это означает, что содержимое файла, который подается в браузер, отличается от содержимого файла, когда был создан файл ngsw.json (во время ng build). Это потому, что вы изменяете файл после сборки.

Чтобы избежать этого, вы должны изменить исходный файл перед сборкой (и позволить изменениям распространиться на встроенные артефакты.

Есть ли у вас также пытался использовать --baseHref параметр ng build (т.е. ng build --prod --baseHref=/angular-pwa-boilerplate/ ...)? Это должно обеспечить автоматическое обновление любых URL-адресов (включая manigest.webmanifest).

...