Làm cách nào tôi có thể buộc khách hàng làm mới tệp JavaScript?

Chúng tôi hiện đang làm việc trong một phiên bản beta riêng tư và vì vậy vẫn đang trong quá trình thực hiện các thay đổi khá nhanh, mặc dù rõ ràng khi việc sử dụng đang bắt đầu tăng lên, chúng tôi sẽ làm chậm quá trình này. Điều đó đang được nói, một vấn đề chúng tôi đang gặp phải là sau khi chúng tôi đưa ra bản cập nhật với các tệp JavaScript mới, các trình duyệt máy khách vẫn sử dụng phiên bản được lưu trong bộ nhớ cache của tệp và họ không thấy bản cập nhật. Rõ ràng, trong một cuộc gọi hỗ trợ, chúng tôi chỉ cần thông báo cho họ để làm ctrlF5mới để đảm bảo rằng họ nhận được các tệp cập nhật từ máy chủ, nhưng tốt hơn là nên xử lý việc này trước thời điểm đó.

Suy nghĩ hiện tại của chúng tôi là chỉ cần đính kèm một số phiên bản vào tên của các tệp JavaScript và sau đó khi các thay đổi được thực hiện, hãy tăng phiên bản trên tập lệnh và cập nhật tất cả các tham chiếu. Điều này chắc chắn hoàn thành công việc, nhưng cập nhật các tài liệu tham khảo trên mỗi bản phát hành có thể trở nên cồng kềnh.

Vì tôi chắc chắn rằng chúng tôi không phải là người đầu tiên giải quyết vấn đề này, tôi đoán rằng tôi sẽ ném nó ra cộng đồng. Làm thế nào để bạn đảm bảo khách hàng cập nhật bộ đệm của họ khi bạn cập nhật mã của mình? Nếu bạn đang sử dụng phương pháp được mô tả ở trên, bạn có đang sử dụng quy trình đơn giản hóa thay đổi không?

Theo tôi biết một giải pháp phổ biến là thêm một ?<version>liên kết src của tập lệnh.

Ví dụ:

<script type="text/javascript" src="myfile.js?1500"></script>

Tôi cho rằng tại thời điểm này không có cách nào tốt hơn tìm kiếm thay thế để tăng các "số phiên bản" này trong tất cả các thẻ script?

Bạn có thể có một hệ thống kiểm soát phiên bản làm điều đó cho bạn? Hầu hết các hệ thống kiểm soát phiên bản đều có cách tự động chèn số sửa đổi khi đăng ký.

Nó sẽ trông giống như thế này:

<script type="text/javascript" src="myfile.js?$$REVISION$$"></script>

Tất nhiên, luôn có những giải pháp tốt hơn như thế này .

Áp dụng thời gian hiện tại vào URL thực sự là một giải pháp phổ biến. Tuy nhiên, bạn cũng có thể quản lý việc này ở cấp máy chủ web, nếu bạn muốn. Máy chủ có thể được cấu hình để gửi các tiêu đề HTTP khác nhau cho các tệp javascript.

Ví dụ: để buộc tệp được lưu trong bộ nhớ cache không quá 1 ngày, bạn sẽ gửi:

Cache-Control: max-age=86400, must-revalidate

Đối với phiên bản beta, nếu bạn muốn buộc người dùng luôn nhận được bản mới nhất, bạn sẽ sử dụng:

Cache-Control: no-cache, must-revalidate

Tốc độ trang của Google: Không bao gồm chuỗi truy vấn trong URL cho tài nguyên tĩnh. Hầu hết các proxy, đáng chú ý nhất là Squid lên đến phiên bản 3.0, không lưu trữ tài nguyên với dấu "?" trong URL của họ ngay cả khi kiểm soát bộ đệm: tiêu đề công khai có mặt trong phản hồi. Để bật bộ đệm ẩn proxy cho các tài nguyên này, hãy xóa các chuỗi truy vấn khỏi tham chiếu đến tài nguyên tĩnh và thay vào đó mã hóa các tham số vào chính tên tệp.

Trong trường hợp này, bạn có thể đưa phiên bản vào URL ex: http://abc.com/ v1.2 /script.js và sử dụng apache mod_rewrite để chuyển hướng liên kết đến http://abc.com/script.js . Khi bạn thay đổi phiên bản, trình duyệt máy khách sẽ cập nhật tệp mới.

Việc sử dụng này đã bị hủy bỏ: https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

Câu trả lời này chỉ trễ 6 năm, nhưng tôi không thấy câu trả lời này ở nhiều nơi ... HTML5 đã giới thiệu Cache ứng dụng được sử dụng để giải quyết vấn đề này. Tôi đã tìm thấy mã máy chủ mới mà tôi đang viết đang làm hỏng javascript cũ được lưu trữ trong trình duyệt của mọi người, vì vậy tôi muốn tìm cách hết hạn javascript của họ. Sử dụng tệp kê khai trông như thế này:

CACHE MANIFEST
# Aug 14, 2014
/mycode.js

NETWORK:
*

và tạo tệp này với dấu thời gian mới mỗi lần bạn muốn người dùng cập nhật bộ đệm của họ. Là một lưu ý phụ, nếu bạn thêm phần này, trình duyệt sẽ không tải lại (ngay cả khi người dùng làm mới trang) cho đến khi bảng kê khai cho biết.

Làm thế nào về việc thêm các kích thước tập tin như là một tham số tải?

<script type='text/javascript' src='path/to/file/mylibrary.js?filever=<?=filesize('path/to/file/mylibrary.js')?>'></script>

Vì vậy, mỗi khi bạn cập nhật tệp, tham số "filever" sẽ thay đổi.

Làm thế nào về khi bạn cập nhật tệp và kết quả cập nhật của bạn trong cùng kích thước tệp? tỷ lệ cược là gì?

Không phải tất cả các tệp bộ nhớ cache của trình duyệt với '?'trong đó. Những gì tôi đã làm để đảm bảo nó được lưu trữ càng nhiều càng tốt, tôi đã đưa phiên bản vào tên tệp.

Vì vậy, thay vì stuff.js?123, tôi đã làmstuff_123.js

Tôi đã sử dụng mod_redirect(tôi nghĩ) trong apache have stuff_*.jsđể đistuff.js

Đối với các trang ASP.NET tôi đang sử dụng như sau

TRƯỚC

<script src="/Scripts/pages/common.js" type="text/javascript"></script>

SAU (tải lại lực lượng)

<script src="/Scripts/pages/common.js?ver<%=DateTime.Now.Ticks.ToString()%>" type="text/javascript"></script>

Thêm DateTime.Now.Ticks hoạt động rất tốt.

Đối với ASP.NET tôi cho rằng giải pháp tiếp theo với các tùy chọn nâng cao (chế độ gỡ lỗi / phát hành, phiên bản):

Các tệp Js hoặc Css được bao gồm theo cách đó:

<script type="text/javascript" src="Scripts/exampleScript<%=Global.JsPostfix%>" />
<link rel="stylesheet" type="text/css" href="Css/exampleCss<%=Global.CssPostfix%>" />

Global.JsPostfix và Global.CssPostfix được tính theo cách sau trong Global.asax:

protected void Application_Start(object sender, EventArgs e)
{
    ...
    string jsVersion = ConfigurationManager.AppSettings["JsVersion"];
    bool updateEveryAppStart = Convert.ToBoolean(ConfigurationManager.AppSettings["UpdateJsEveryAppStart"]);
    int buildNumber = System.Reflection.Assembly.GetExecutingAssembly().GetName().Version.Revision;
    JsPostfix = "";
#if !DEBUG
    JsPostfix += ".min";
#endif      
    JsPostfix += ".js?" + jsVersion + "_" + buildNumber;
    if (updateEveryAppStart)
    {
        Random rand = new Random();
        JsPosfix += "_" + rand.Next();
    }
    ...
}

Thực tế phổ biến hiện nay là tạo mã băm nội dung như một phần của tên tệp để buộc trình duyệt, đặc biệt là IE tải lại các tệp javascript hoặc tệp css.

Ví dụ,

nhà cung cấp. a7561fb0e9a071baadb9 .js
chính. b746e3eb72875af2caa9 .js

Nó thường là công việc cho các công cụ xây dựng như webpack. Dưới đây là chi tiết hơn nếu bất cứ ai muốn dùng thử nếu bạn đang sử dụng webpack.

Nếu bạn đang tạo trang liên kết đến các tệp JS, một giải pháp đơn giản là nối thêm dấu thời gian sửa đổi cuối cùng của tệp vào các liên kết được tạo.

Điều này rất giống với câu trả lời của Huppin, nhưng hoạt động trong các hệ thống kiểm soát phiên bản mà không cần thay thế từ khóa. Nó cũng tốt hơn so với thời gian hiện tại, vì điều đó sẽ ngăn bộ nhớ đệm ngay cả khi tập tin không thay đổi.

Hàm getScript cũng có thể được sử dụng để đảm bảo rằng tệp js thực sự được tải mỗi khi trang được tải.

Đây là cách tôi đã làm nó:

$(document).ready(function(){
    $.getScript("../data/playlist.js", function(data, textStatus, jqxhr){
         startProgram();
    });
});

Kiểm tra chức năng tại http://api.jquery.com/jQuery.getScript/

Theo mặc định, $ .getScript () đặt cài đặt bộ đệm thành false. Điều này sẽ nối một tham số truy vấn được đánh dấu thời gian vào URL yêu cầu để đảm bảo rằng trình duyệt tải xuống tập lệnh mỗi khi được yêu cầu.

Trong PHP :

function latest_version($file_name){
    echo $file_name."?".filemtime($_SERVER['DOCUMENT_ROOT'] .$file_name);
}

Trong HTML :

<script type="text/javascript" src="<?php latest_version('/a-o/javascript/almanacka.js'); ?>">< /script>

Làm thế nào nó hoạt động:

Trong HTML, hãy viết filepathvà tên như bạn đã làm, nhưng chỉ trong hàm. PHP lấy filetimetệp và trả về filepath+name+"?"+timethay đổi mới nhất

Chúng tôi đã tạo SaaS cho người dùng và cung cấp cho họ tập lệnh để đính kèm trong trang web của họ và không thể đính kèm phiên bản với tập lệnh vì người dùng sẽ đính kèm tập lệnh vào trang web của họ cho các chức năng và tôi không thể ép buộc họ để thay đổi phiên bản mỗi lần chúng tôi cập nhật tập lệnh

Vì vậy, chúng tôi đã tìm ra cách tải phiên bản mới hơn của tập lệnh mỗi lần người dùng gọi tập lệnh gốc

liên kết tập lệnh được cung cấp cho người dùng

<script src="https://thesaasdomain.com/somejsfile.js" data-ut="user_token"></script>

tập tin kịch bản

if($('script[src^="https://thesaasdomain.com/somejsfile.js?"]').length !== 0) {
   init();
} else {
   loadScript("https://thesaasdomain.com/somejsfile.js?" + guid());
}

var loadscript = function(scriptURL) {
   var head = document.getElementsByTagName('head')[0];
   var script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = scriptURL;
   head.appendChild(script);
}

var guid = function() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
        return v.toString(16);
    });
}

var init = function() {
    // our main code
}

Giải trình:

Người dùng đã đính kèm tập lệnh được cung cấp cho họ trong trang web của họ và chúng tôi đã kiểm tra mã thông báo duy nhất được đính kèm với tập lệnh có tồn tại hay không sử dụng bộ chọn jQuery và nếu không thì tải nó một cách linh hoạt bằng mã thông báo mới hơn (hoặc phiên bản)

Đây là cuộc gọi cùng một kịch bản hai lần có thể là một vấn đề về hiệu năng, nhưng nó thực sự giải quyết được vấn đề buộc tập lệnh không tải từ bộ đệm mà không đưa phiên bản vào liên kết tập lệnh thực tế được cung cấp cho người dùng hoặc máy khách

Tuyên bố miễn trừ trách nhiệm: Không sử dụng nếu hiệu suất là một vấn đề lớn trong trường hợp của bạn.

Trong asp.net mvc, bạn có thể sử dụng @ DateTime.UtcNow.ToString () cho số phiên bản tệp js. Số phiên bản tự động thay đổi theo ngày và bạn buộc trình duyệt máy khách tự động làm mới tệp js. Tôi sử dụng phương pháp này và điều này là hoạt động tốt.

<script src="~/JsFilePath/JsFile.js?v=@DateTime.UtcNow.ToString()"></script>

location.reload (đúng);

xem https://www.w3schools.com/jsref/met_loc_reload.asp

Tôi tự động gọi dòng mã này để đảm bảo rằng javascript đã được truy xuất lại từ máy chủ web thay vì từ bộ đệm của trình duyệt để thoát khỏi vấn đề này.

Một giải pháp là nối một chuỗi truy vấn có dấu thời gian trong đó vào URL khi tìm nạp tài nguyên. Điều này lợi dụng thực tế là một trình duyệt sẽ không lưu trữ tài nguyên bộ đệm từ các URL có chuỗi truy vấn trong đó.

Có lẽ bạn không muốn trình duyệt không lưu trữ các tài nguyên này; nhiều khả năng là bạn muốn chúng được lưu trong bộ nhớ cache, nhưng bạn muốn trình duyệt tìm nạp phiên bản mới của tệp khi nó được cung cấp.

Giải pháp phổ biến nhất dường như là nhúng dấu thời gian hoặc số sửa đổi vào chính tên tệp. Đây là một công việc nhiều hơn một chút, bởi vì mã của bạn cần được sửa đổi để yêu cầu các tệp chính xác, nhưng điều đó có nghĩa là, ví dụ, phiên bản 7 của snazzy_javascript_file.js(tức là snazzy_javascript_file_7.js) của bạn được lưu trữ trên trình duyệt cho đến khi bạn phát hành phiên bản 8, và sau đó mã của bạn thay đổi thành lấy snazzy_javascript_file_8.jsđể thay thế.

Ưu điểm của việc sử dụng file.js?V=1hơn mộtfileV1.js là bạn không cần lưu trữ nhiều phiên bản tệp JavaScript trên máy chủ.

Những rắc rối tôi gặp phải với file.js?V=1 là bạn có thể có mã phụ thuộc trong một tệp JavaScript khác bị hỏng khi sử dụng phiên bản mới của tiện ích thư viện.

Vì mục đích tương thích ngược, tôi nghĩ sẽ tốt hơn nếu sử dụng jQuery.1.3.jscho các trang mới của bạn và để các trang hiện có sử dụng jQuery.1.1.js, cho đến khi bạn sẵn sàng nâng cấp các trang cũ hơn, nếu cần.

Sử dụng một GETbiến phiên bản để ngăn bộ nhớ đệm trình duyệt.

Việc thêm ?v=AUTO_INCREMENT_VERSIONvào cuối url của bạn sẽ ngăn bộ nhớ đệm của trình duyệt - tránh bất kỳ và tất cả các tập lệnh được lưu trong bộ nhớ cache.

Đồng nghiệp của tôi vừa tìm thấy một tài liệu tham khảo về phương pháp đó ngay sau khi tôi đăng (tham khảo css) tại http://www.stefanhayden.com/blog/2006/04/03/css-caching-hack/ . Thật tốt khi thấy những người khác đang sử dụng nó và nó dường như hoạt động. Tôi cho rằng tại thời điểm này không có cách nào tốt hơn tìm kiếm thay thế để tăng các "số phiên bản" này trong tất cả các thẻ script?

Mặc dù là khung cụ thể, Django 1.4 có chức năng này hoạt động theo kiểu tương tự như liên kết đến trang web 'greenfelt' trong câu trả lời ở trên

Cache Busting trong ASP.NET Core thông qua trình trợ giúp thẻ sẽ xử lý việc này cho bạn và cho phép trình duyệt của bạn giữ các tập lệnh / css được lưu trong bộ đệm cho đến khi tệp thay đổi. Chỉ cần thêm thẻ helper asp-append-version = "true" vào thẻ script (js) hoặc thẻ liên kết (css) của bạn:

<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true"/>

Dave Paquette có một ví dụ điển hình và giải thích về bộ nhớ cache busting đây (cuối trang) chặn truy xuất cache

Giải pháp đơn giản nhất? Đừng để bộ nhớ cache của trình duyệt cả. Nối thời gian hiện tại (tính bằng ms) dưới dạng truy vấn.

(Bạn vẫn đang trong giai đoạn thử nghiệm, vì vậy bạn có thể đưa ra một trường hợp hợp lý vì không tối ưu hóa hiệu suất. Nhưng YMMV ở đây.)

Một cách đơn giản. Chỉnh sửa htaccess

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} \.(jpe?g|bmp|png|gif|css|js|mp3|ogg)$ [NC]
RewriteCond %{QUERY_STRING} !^(.+?&v33|)v=33[^&]*(?:&(.*)|)$ [NC]
RewriteRule ^ %{REQUEST_URI}?v=33 [R=301,L]

Dưới đây làm việc cho tôi:

<head>
<meta charset="UTF-8">
<meta http-equiv="cache-control" content="no-cache, must-revalidate, post-check=0, pre-check=0" />
<meta http-equiv="cache-control" content="max-age=0" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<meta http-equiv="pragma" content="no-cache" />
</head>