Obecnie pracujemy nad nowym projektem z regularnymi aktualizacjami, z którego codziennie korzysta jeden z naszych klientów. Ten projekt jest rozwijany przy użyciu angular 2 i mamy problemy z pamięcią podręczną, czyli nasi klienci nie widzą najnowszych zmian na swoich maszynach.
Wydaje się, że głównie pliki html / css dla plików js są aktualizowane prawidłowo, bez większych problemów.
ng build
, dodanie-prod
tagu dodaje hash do wygenerowanych nazw plików. Wymusza to ponowne załadowanie wszystkiego opróczindex.html
. Ten post na githubie zawierał kilka wskazówek, jak go przeładować.Odpowiedzi:
angular-cli rozwiązuje ten problem, udostępniając
--output-hashing
flagę dla polecenia kompilacji (wersje 6/7, późniejsze wersje patrz tutaj ). Przykładowe użycie:Wiązanie i potrząsanie drzewem zawiera pewne szczegóły i kontekst. Running
ng help build
, dokumentuje flagę:Chociaż ma to zastosowanie tylko do użytkowników angular-cli , działa znakomicie i nie wymaga żadnych zmian w kodzie ani dodatkowych narzędzi.
Aktualizacja
Wiele komentarzy było pomocnych i słusznych wskazań, że ta odpowiedź dodaje skrót do
.js
plików, ale nic nie robiindex.html
. Jest zatem całkowicie możliwe, że plikiindex.html
pozostaną w pamięci podręcznej pong build
zniszczeniu pamięci podręcznej.js
.W tym momencie odłożę się do pytania Jak kontrolować buforowanie stron internetowych we wszystkich przeglądarkach?
źródło
Znalazłem sposób, aby to zrobić, po prostu dodaj querystring, aby załadować komponenty, na przykład:
Powinno to zmusić klienta do załadowania kopii szablonu z serwera, a nie przeglądarki. Jeśli chcesz, aby odświeżał się dopiero po pewnym czasie, możesz zamiast tego użyć tego ISOString:
I podciąg niektóre znaki, aby zmienił się dopiero po godzinie, na przykład:
Mam nadzieję że to pomoże
źródło
templateUrl: './app/shared/menu/menu.html?v=' + Math.random()
W każdym szablonie HTML po prostu dodaję następujące metatagi u góry:
W moim rozumieniu każdy szablon jest wolnostojący, dlatego nie dziedziczy konfiguracji meta bez buforowania w pliku index.html.
źródło
Połączenie odpowiedzi @ Jacka i odpowiedzi @ ranierbit powinno załatwić sprawę.
Ustaw flagę kompilacji ng dla --output-hashing, więc:
Następnie dodaj tę klasę w usłudze lub w pliku app.moudle
Następnie dodaj to do swoich dostawców w swoim module app.module:
Powinno to zapobiec problemom z buforowaniem w aktywnych witrynach dla komputerów klienckich
źródło
Miałem podobny problem z cache'owaniem pliku index.html przez przeglądarkę lub bardziej skomplikowanym przez środkowe cdn / proxy (F5 ci nie pomoże).
Szukałem rozwiązania, które w 100% weryfikuje, czy klient posiada najnowszą wersję index.html, na szczęście znalazłem takie rozwiązanie autorstwa Henrika Peinara:
https://blog.nodeswat.com/automagic-reload-for-clients-after-deploy-with-angular-4-8440c9fdd96c
Rozwiązanie rozwiązuje również przypadek, gdy klient pozostaje z otwartą przeglądarką przez kilka dni, klient sprawdza aktualizacje w określonych odstępach czasu i przeładowuje, jeśli zainstalowano nowszą wersję.
Rozwiązanie jest nieco skomplikowane, ale działa jak urok:
ng cli -- prod
tworzy zhaszowane pliki z jednym z nich o nazwie main. [hash] .jsPonieważ rozwiązanie Henrika Peinara było dla kątowej 4, nastąpiły drobne zmiany, tutaj umieszczam również poprawione skrypty:
VersionCheckService:
zmień na główny komponent aplikacji:
Skrypt post-build, który tworzy magię, post-build.js:
po prostu umieść skrypt w (nowym) folderze budowania, uruchom skrypt używając
node ./build/post-build.js
po zbudowaniu folderu dist za pomocąng build --prod
źródło
Możesz kontrolować pamięć podręczną klienta za pomocą nagłówków HTTP. Działa to w każdym frameworku internetowym.
Możesz ustawić dyrektywy w tych nagłówkach, aby mieć szczegółową kontrolę nad tym, jak i kiedy włączyć | wyłączyć pamięć podręczną:
Cache-Control
Surrogate-Control
Expires
ETag
(bardzo dobry)Pragma
(jeśli chcesz obsługiwać stare przeglądarki)Dobre buforowanie jest dobre, ale bardzo złożone we wszystkich systemach komputerowych . Zajrzyj na https://helmetjs.github.io/docs/nocache/#the-headers, aby uzyskać więcej informacji.
źródło