Project

General

Profile

Feature #7251

JavaScript & CSS are cached too aggressively by browsers, add URL fingerprint or other cache control mechanism

Added by Jim Pingle over 4 years ago. Updated about 4 years ago.

Status:
Resolved
Priority:
Normal
Assignee:
-
Category:
Web Interface
Target version:
2.4.0
Start date:
02/10/2017
Due date:
% Done:

100%

Estimated time:
Plus Target Version:
Release Notes:
Default

Description

JavaScript and CSS are cached too aggressively by browsers, so when any significant change happens, users must manually clear their browser cache or GUI behavior is unpredictable/erratic.

There are a few ways to combat this, such as URL fingerprinting (e.g. "blah.js?12345") or web server header changes. Adding one or more of these methods will ensure users do not have to take manual action when we make changes to JavaScript or CSS, and if we add a method that uses a file hash to identify the file, it could be fully automated (or nearly so).

More suggestions here: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching#invalidating-and-updating-cached-responses

Associated revisions

Revision 09ba8bb7 (diff)
Added by Steve Beaver over 4 years ago

Fixed: #7251
Force JS and CSS files to reload if hte file mtimes change

History

#1 Updated by Kill Bill over 4 years ago

There is the same problem with CSS.

#2 Updated by Jim Pingle over 4 years ago

  • Subject changed from JavaScript is cached too aggressively by browsers, add URL fingerprint or other cache control mechanism to JavaScript & CSS are cached too aggressively by browsers, add URL fingerprint or other cache control mechanism
  • Description updated (diff)

I knew I was forgetting something!

Updated subject/descr

Thanks

#3 Updated by Steve Beaver over 4 years ago

A simple way to deal with this might be to prevent caching on the login page. That way all the CSS and JS is re-loaded once but can be cached for the rest of the session.

This is also a nice solution:

<link rel="stylesheet" href="mycss.css?v=<?php echo filemtime('mycss.css') ?>"/>

I will do some testing.

#4 Updated by Steve Beaver over 4 years ago

The above solution seems to work as expected. I have added it to head.inc and foot.inc

#5 Updated by Steve Beaver over 4 years ago

  • Status changed from New to Feedback

#6 Updated by Steve Beaver over 4 years ago

  • % Done changed from 0 to 100

#7 Updated by Jim Pingle over 4 years ago

  • Status changed from Feedback to Resolved

Seems to work fine. I upgraded a VM that was on a snapshot from before all of the GET/POST conversion and when upgraded and synced to include this code, the client browser picked up the new javascript without any manual intervention.

Thanks!

#8 Updated by Kill Bill about 4 years ago

Works here as well. Yay, finally!

Also available in: Atom PDF