Tôi làm cách nào để trình duyệt có thể xem các thay đổi CSS và Javascript?

Question

Các tệp CSS và Javascript không thay đổi thường xuyên, vì vậy tôi muốn chúng được lưu vào bộ nhớ cache bởi trình duyệt web. Nhưng tôi cũng muốn trình duyệt web xem các thay đổi được thực hiện đối với những tệp này mà không yêu cầu người dùng xóa bộ nhớ cache của trình duyệt. Cũng muốn có một giải pháp hoạt động tốt với hệ thống kiểm soát phiên bản như Subversion.

---

Một số giải pháp tôi đã thấy sự tham gia thêm một số phiên bản vào cuối của tập tin dưới dạng một chuỗi truy vấn.

có thể sử dụng số phiên bản SVN để tự động này dành cho bạn: ASP.NET Display SVN Revision Number

Bạn có thể chỉ định cách bạn bao gồm Revision biến của tập tin khác? Đó là trong tệp HTML tôi có thể bao gồm số sửa đổi trong URL vào tệp CSS hoặc Javascript.

Trong số Subversion book nó nói về Bản sửa đổi: "Từ khóa này mô tả bản sửa đổi đã biết cuối cùng trong đó tệp này đã thay đổi trong kho lưu trữ".

Firefox cũng cho phép nhấn CTRL +R để tải lại tất cả mọi thứ trên một trang cụ thể.

Để làm rõ tôi đang tìm các giải pháp không yêu cầu người dùng thực hiện bất kỳ điều gì một phần.

Answer 1

Tôi nhận thấy rằng nếu bạn gắn dấu thời gian sửa đổi cuối cùng của tệp vào cuối URL, trình duyệt sẽ yêu cầu các tệp khi nó được sửa đổi. Ví dụ: trong PHP:

function urlmtime($url) { 
    $parsed_url = parse_url($url); 
    $path = $parsed_url['path']; 

    if ($path[0] == "/") { 
     $filename = $_SERVER['DOCUMENT_ROOT'] . "/" . $path; 
    } else { 
     $filename = $path; 
    } 

    if (!file_exists($filename)) { 
     // If not a file then use the current time 
     $lastModified = date('YmdHis'); 
    } else { 
     $lastModified = date('YmdHis', filemtime($filename)); 
    } 

    if (strpos($url, '?') === false) { 
     $url .= '?ts=' . $lastModified; 
    } else { 
     $url .= '&ts=' . $lastModified; 
    } 

    return $url; 
} 

function include_css($css_url, $media='all') { 
    // According to Yahoo, using link allows for progressive 
    // rendering in IE where as @import url($css_url) does not 
    echo '<link rel="stylesheet" type="text/css" media="' . 
     $media . '" href="' . urlmtime($css_url) . '">'."\n"; 
} 

function include_javascript($javascript_url) { 
    echo '<script type="text/javascript" src="' . urlmtime($javascript_url) . 
     '"></script>'."\n"; 
} 

Answer 2

Một số giải pháp tôi đã thấy liên quan đến việc thêm số phiên bản vào cuối tệp dưới dạng chuỗi truy vấn.

<script type="text/javascript" src="funkycode.js?v1"> 

Bạn có thể sử dụng số phiên bản SVN để tự động for you này bằng cách đưa từ LastChangedRevision trong file html của bạn sau khi nơi v1 xuất hiện phía trên. Bạn cũng phải thiết lập kho lưu trữ của mình để thực hiện việc này.

Tôi hy vọng điều này sẽ làm rõ thêm câu trả lời của tôi?

Firefox cũng cho phép nhấn CTRL + R để tải lại mọi thứ trên một trang cụ thể.

Answer 3

Theo ý kiến ​​của tôi, tốt hơn là làm cho phần số phiên bản của chính tệp đó, ví dụ: myscript.1.2.3.js. Bạn có thể đặt máy chủ web lưu trữ tệp này vĩnh viễn và chỉ cần thêm tệp js mới khi bạn có phiên bản mới.

Answer 4

Khi bạn phát hành một phiên bản mới của CSS của bạn hoặc thư viện JS, gây ra những điều sau đây xảy ra:

1. sửa đổi tên tập tin để bao gồm một chuỗi phiên bản độc đáo
2. sửa đổi các tập tin HTML mà tham khảo thư viện để điểm tại tập tin phiên bản

(điều này thường là một vấn đề khá đơn giản cho một kịch bản phát hành)

Bây giờ bạn có thể đặt Expires cho CSS/JS là năm trong tương lai. Bất cứ khi nào bạn thay đổi nội dung, nếu HTML tham chiếu trỏ đến một URI mới, các trình duyệt sẽ không còn sử dụng bản sao được lưu trong bộ nhớ cache cũ nữa.

Điều này gây ra hành vi lưu vào bộ nhớ cache mà bạn muốn mà không yêu cầu bất kỳ điều gì của người dùng.

Answer 5

Tôi cũng tự hỏi làm thế nào để làm điều này, khi tôi tìm thấy câu trả lời của grom. Cảm ơn mã.

Tôi đã gặp khó khăn trong việc hiểu cách mã được sử dụng. (Tôi không sử dụng hệ thống kiểm soát phiên bản.) Tóm lại, bạn bao gồm dấu thời gian (ts) khi bạn gọi biểu định kiểu. Bạn không có ý định thay đổi biểu định kiểu thường xuyên:

<?php 
    include ('grom_file.php'); 
    // timestamp on the filename has to be updated manually 
    include_css('_stylesheets/style.css?ts=20080912162813', 'all'); 
?>