Tek sayfalı uygulamalarda tarayıcı önbelleği ile ilgilenmek

Tek sayfa uygulamalar için web tarayıcı önbelleğini doğru bir şekilde nasıl kullanabileceğimi bulmaya çalışıyorum.

Oldukça tipik bir tasarıma sahibim: SPA'yı uygulayan birkaç HTML, JS ve CSS dosyası ve SPA tarafından tüketilen bir miktar JSON verisi. Bir güncellemeyi zorlamak istediğimde sorunlar ortaya çıkıyor: Sitenin statik kısmını ve JSON'u oluşturan kodu aynı anda güncelliyorum, ancak istemci tarayıcılar genellikle statik kısmı önbelleğe aldı, bu nedenle eski kod yeni verileri işlemeye çalışıyor. (yapılan değişikliklere bağlı olarak) problemlerle karşılaşabilir. (Özellikle, IE, yeniden doğrulanmadan önbelleğe alınmış JS'yi kullanma konusunda Chrome veya Firefox'tan daha agresif görünüyor.)

Bununla başa çıkmanın en iyi yolu nedir?

1. JSON değişikliklerimin geriye dönük olarak uyumlu olduğundan ve tarayıcı önbelleklerinin makul bir süre içinde sona ereceğini varsayalım.
2. Hem statik JS'ye hem de JSON'a bir tür sürüm numarası yerleştirin, sonra window.location.reload(true);eşleşmiyorsa uygulayın.
3. Tarayıcıların, siteyi yüklemek için birkaç tur atmak anlamına gelse bile, her yükte tüm kaynakları yeniden değerlendirebilmelerini sağlamak için uygun başlıkların ( must-revalidateveya no-cacheveya her neyse; kaynaklar bunun nasıl yapılacağına bağlı olarak değişir) kombinasyonunu belirleyin.
4. Bir önbellek kontrolümü mikro yönetiyor ve bir güncelleme zorlamak istediğimde statik içeriğin süresinin dolmasını sağlamak için başlıkları sona erdiriyor.
5. Başka bir şey?

Önbellek bozucu bir çözüme ihtiyacınız var . Önbellek bozmanın rolü:

1. Kaynakları, içeriklerine bağlı olarak benzersiz bir adla yeniden adlandırın.
2. Bu kaynaklara yapılan tüm referansları güncelleyin.

Grunt tabanlı bir projede, yenilenmesi gereken tüm dosyalara içeriklerine göre benzersiz adlar verilmesini sağlamak için grunt-rev kullanmak yaygındır .

JSON dosyalarınızın önbellek bozan dosya adlarını Javascript'inizdeki referanslarla birlikte almasını sağlarsanız, istemciler her zaman Javascript'in beklediği JSON dosyalarını yükler.

Karma tabanlı dosya adlandırma işleminin avantajı, değiştirilmemiş dosyaların önbellek bozulduktan sonra aynı dosya adlarını elde etmesidir, böylece tarayıcılar, değişmediğinde önbellek içeriğini güvenle kullanmaya devam edebilir.

Açıkçası bu, projenizin üretim yapısının bir parçası olarak otomatik olmasını istediğiniz bir şeydir, böylece dosya adlarını ve referansları el ile değiştirmek zorunda kalmazsınız.

Doğru başlıkla birlikte başlıkları kullanabilir if-modified-since + last-modifiedveya if-none-match + etagbaşlıkları kullanabilirsiniz cache-control. ( Tarayıcı hataları olabilir , ancak son tarayıcılarda yönetemediğiniz hiçbir şey yoktur.)

Dosyalar statikse, o zaman kullanmanızı öneririm if-modified-since, çünkü iyi yapılandırılmış bir HTTP sunucusuyla otomatik olarak yapılabilir. Son indirmeden bu yana dosya değiştirilmezse 304 geri gönderilmelidir.

1 ve 2'nizin uzun vadede işe yarayacağını sanmıyorum. # 3 veya # 4 çalışabilir. # 3 daha basittir, ancak bu sorunla nasıl başa çıkılacağını bir kez öğrenmek zorundasınız. Öyleyse 4 numarayı denerdim, ama bu çözüm müşterilerinizin kullandığı tarayıcılara bağlı olabilir ... Örneğin IE8'in ajax önbelleğini güncelleyerek sorunları var ...

SPA'nıza Java Servlet Filtresi ekleyebilirseniz, işte size çalışan bir çözüm: CorrectBrowserCacheHandlerFilter.java

Temel olarak, tarayıcınız statik dosyaları istediğinde, sunucu her isteği aynı olana yönlendirir, ancak ?v=azErThedef statik dosyanın içeriğine bağlı olan bir karma sorgu parametresiyle ( örneğin).

Bunu yaptığınızda, tarayıcı, index.htmlörneğin (her zaman bir a alacağınız için) belirtilen statik dosyaları hiçbir zaman önbelleğe almaz 302 Moved Temporarily, ancak yalnızca karma sürümüne sahip olanları önbelleğe alır (sunucu 200onlara cevap verir). Böylece tarayıcı önbelleği, karma sürümüne sahip bu statik dosyalar için verimli bir şekilde kullanılacaktır.

Yasal Uyarı: Ben yazarıyım CorrectBrowserCacheHandlerFilter.java.