Jak wymusić opróżnianie pamięci podręcznej CSS po stronie klienta?

Załóżmy, że zmieniliśmy wiele funkcji modułu (szablony, układy, CSS) i zamierzamy przenieść te zmiany na stronę produkcyjną, ale wielu klientów ma buforowane CSS w swoich przeglądarkach. Oto pytanie. Jak wymusić opróżnianie pamięci podręcznej CSS klienta i unikanie zmiany nazwy pliku ( styles.css-> styles-v2.css). Jest jeden logiczny sposób, ale nie działa on w Magento, ponieważ sprawdza istniejący plik (tak jak ta metoda działa dla plików JS), patrz poniżej:

<action method="addCss">
    <stylesheet>css/styles.css?1</stylesheet>
</action>  

Jakieś pomysły?

Jednym ze sposobów radzenia sobie z tym jest umożliwienie łączenia CSS. Następnie możesz po prostu wyczyścić pamięć podręczną, a nowy scalony plik zostanie utworzony z nową nazwą pliku.

System -> Configuration -> Developer -> CSS settings -> Merge CSS Files

O ile mi wiadomo, kod skrótu scalonego pliku CSS pozostaje taki sam, nawet jeśli zmienione zostaną pliki podstawowe - tylko jeśli nowe pliki zostaną dodane do zestawu scalonych plików, skrót zostanie zmieniony. - @Alex

Innym sposobem radzenia sobie z tym jest zamiast użycia layout.xml,

po prostu włóż je do swojego page/html/head.phtml

Lub stwórz blok zawierający <style>znacznik z numerem wersji i umieść go w pliku XML w swojej głowie, aby można go było ładować tylko na określonych stronach i nadal trzymać się układów XML.

Możesz użyć modułu OpenSource Aoe_JsCssTstamp, który dodaje informacje o znacznikach czasu do scalonych plików CSS. Znaczniki czasu dla zwykłych (niepołączonych) plików CSS nie są jeszcze obsługiwane, ale byłoby to łatwe do wdrożenia.

Na github „Magento Cachebuster” znajduje się bezpłatne rozszerzenie, które właśnie to robi. To dotyczy

https://github.com/gknoppe-guidance/magento-cachebuster

Moduł zapewnia buforowanie pamięci podręcznej poprzez automatyczną zmianę identyfikatora URI utworzonego przez Magento dla> plików statycznych poprzez dodanie znacznika czasu pliku do nazwy pliku:

Przed: http://www.example.com/js/varien/js.js Po: http://www.example.com/js/varien/js.1324429472.js

Używam do tego własnego rozszerzenia Speedster Advanced. Ale podstawową zasadą jest to, że nazwa scalonych plików css i js zawiera znacznik czasu ostatnio zmodyfikowanego pliku - patrz Mage_Core_Model_Design_Package::getMergedCssUrl(). Za każdym razem, gdy edytujesz dowolny plik css, tworzona jest nowa nazwa pliku, co powoduje, że przeglądarki żądają nowego pliku zamiast ponownego użycia wersji z pamięci podręcznej. Ponieważ blok głowy może być buforowany, konieczne jest odświeżenie pamięci podręcznej Magento.

Zaimplementowałem również narzędzie do usuwania pamięci podręcznej dla plików css. Myślę, że najlepszym sposobem jest rozszerzenie Mage_Page_Block_Html_Head i najechanie na poniższą funkcję i zaktualizowanie tablicy $ skinItems o pożądane zmiany.

protected function &_prepareStaticAndSkinElements($format, array $staticItems, array $skinItems, $mergeCallback = null)
{
    $designPackage = Mage::getDesign();
    //$skinItems: contains all css
    foreach ($skinItems as $params => $rows) {
        foreach ($rows as $key=>$name) {
            $file = $designPackage->getFilename($name, array('_type' => 'skin'));
            $skinItems[$params][$key] = $name . "?fmt=" . filemtime($file);
        }
    }
    return parent::_prepareStaticAndSkinElements($format, $staticItems, $skinItems, $mergeCallback);

}

Mam inspirację stąd. Źródło

Istnieje proste, ale uciążliwe obejście, które nie wymaga żadnych wtyczek i po prostu korzysta z wbudowanych funkcji Magento - przydatne, jeśli po prostu musisz to zrobić szybko na istniejącej stronie bez ryzyka instalowania dodatkowego kodu.

Chodzi o to, że możesz użyć scalonego systemu CSS do wygenerowania nazwy pliku pomijania pamięci podręcznej.

Ponieważ nazwa scalonego pliku CSS jest skrótem wszystkich plików, które są scalane, po prostu dodajesz do motywu dodatkowy pusty plik css z datownikiem dla nazwy.

Więc:

1. Włącz scalanie plików CSS w Konfiguracja> Zaawansowane> Deweloper
2. W układach motywów znajdź, gdzie dodajesz pliki CSS do nagłówka (zazwyczaj page.xml) i dodajesz dodatkowy plik arkusza stylów, nazywaj go jak chcesz, o ile nazwa jest unikalna, np. <action method="addCss"><stylesheet>css/cachebust_091014.css</stylesheet></action>
3. W folderze skórki CSS utwórz nowy plik css o tej nazwie, dla zawartości pliku po prostu wstawiłem komentarz z informacją o tym, do czego służy plik

Teraz pchnij to na żywo i opróżnij pamięć podręczną magento, scalony plik css będzie teraz miał inną nazwę, a twoje pamięci podręczne zostaną zniszczone!

Jest to kłopotliwe, ponieważ za każdym razem, gdy chcesz zepsuć pamięć podręczną, musisz zmienić nazwę tego pliku, ale nie wymaga to nic innego niż wbudowane funkcje Magento, więc jest to przydatne, jeśli utkniesz i potrzebujesz szybkiej poprawki!

=> Zamiast używać tego kodu:

<action method="addCss">
    <stylesheet>css/styles.css?1</stylesheet>
</action>

=> Spróbuj użyć tego kodu:

<reference name="head">
    <block type="core/text" name="foocss">
        <action method="setText">
            <css><![CDATA[<link rel="stylesheet" type="text/css" href="foo.css?1" media="all" />]]></css>
        </action>
    </block>
</reference>

Ale to nie jest bardzo miłe ...

Znalazłem moduł, który doda ciąg zapytania na końcu wszystkich CSS i JS w układach xml. Ciąg zapytania można skonfigurować od administratora.

https://github.com/mklooss/Loewenstark_Head

Podstawowym pomysłem jest zastąpienie, _prepareStaticAndSkinElementsaby uwzględnić ciąg zapytania, jak to zrobiono w module pokazanym poniżej.

protected function &_prepareStaticAndSkinElements($format, array $staticItems, array $skinItems, $mergeCallback = null)
{
    $version = Mage::getStoreConfig("design/head/meta_version_tag");
    $format = sprintf($format, "%s?v{$version}", "%s");
    return parent::_prepareStaticAndSkinElements($format, $staticItems, $skinItems, $mergeCallback);
}

Jeśli rozumiem proponowane rozwiązanie w twoim pytaniu, możesz to zrobić za pomocą niewielkiej modyfikacji pliku podstawowego ( tak naprawdę nie edytuj pliku podstawowego ):

Mage / Page / Block / Html / Head.php

Dodaj coś w rodzaju? V = 1 do wiersza 198, aby wszystkie pliki css miały dołączone:

$html .= $this->_prepareStaticAndSkinElements('<link rel="stylesheet" type="text/css" href="%s?v=1"%s />' . "\n",

Myślę, że Fooman Speedster Advanced ( http://www.magentocommerce.com/magento-connect/fooman-speedsteradvanced-4030.html ) może być rozwiązaniem:

„Po instalacji w pełni zautomatyzowany, z automatyczną wersją po aktualizacji plików Javascript / CSS”

W tym celu zbudowałem bezpłatny moduł:

http://www.magentocommerce.com/magento-connect/frontend-flush-2048.html

Daj mi znać, jeśli nie działa zgodnie z oczekiwaniami, ale zbudowałem go tak, aby połączone pliki js i css miały inny skrót, jeśli zawartość jednego z połączonych plików uległa zmianie. Domyślnie Magento zmienia skrót mieszanego pliku tylko wtedy, gdy zmieniła się nazwa jednego z dołączonych plików.

AKTUALIZACJA

Stworzyłem również bezpłatny i prosty moduł minify dla tych z was, którzy w to wierzą.

http://www.magentocommerce.com/magento-connect/minify-7771.html

Jest naprawdę fajny moduł stworzony przez Fabrizio Branca, który robi dokładnie to, co Cię interesuje. Nazywa się AOE_JsCSSTStamp . Co to robi? Dodaje znacznik czasu do zasobów CSS i JS. Po opróżnieniu pamięci podręcznej CSS / JS znaczniki czasu są ponownie tworzone.

Przeglądarka zobaczy inną nazwę pliku - dlatego ponownie pobierze zasoby i zostanie udostępniona w najnowszej wersji zamiast buforowanej w przeglądarce.

Po prostu edytuj metodę getCssJsHtml w Mage_Page_Block_Html_Head , dodaj taki ciąg przez kilka dni po edycji css i to wszystko ... to po prostu działa

// static and skin css
        $html .= $this->_prepareStaticAndSkinElements('<link rel="stylesheet" type="text/css" href="%s?foo=WHAT_YOU_WANT_HERE"%s />' . "\n",
            empty($items['js_css']) ? [] : $items['js_css'],
            empty($items['skin_css']) ? [] : $items['skin_css'],
            $shouldMergeCss ? [Mage::getDesign(), 'getMergedCssUrl'] : null
        );

Kilka lat później i nie znajdując żadnego przydatnego rozszerzenia, które nie scaliłoby plików i jest proste, stworzyłem własne. Główną ideą jest to, że po opróżnieniu pamięci podręcznej zaktualizuje znacznik czasu. Innymi słowy - kiedy zmienisz niektóre css/js, po prostu opróżnij pamięć podręczną, a znacznik czasu zostanie zaktualizowany.

Kod źródłowy jest tutaj -> https://github.com/archonkulis/ANSolutions_CssJsTimestamp

Działa na wersji 1.9+ . Nie jestem pewien co do starszych wersji, ale najprawdopodobniej również powinien działać.

Utwórz kopię motywu pod nową nazwą (themev2) - zarówno skórką, jak i aplikacją / projektem itp. Następnie wybierz nowy motyw w panelu administratora.