Як змусити клієнтів оновити файли JavaScript?

Наразі ми працюємо в приватній бета-версії, тому все ще вносимо досить швидкі зміни, хоча, очевидно, коли використання починає наростати, ми сповільнимо цей процес. Зважаючи на це, одна з проблем, з якою ми стикаємося, полягає в тому, що після видалення оновлення з новими файлами JavaScript клієнтські браузери все ще використовують кешовану версію файлу, і вони не бачать оновлення. Очевидно, що під час виклику служби підтримки ми можемо просто повідомити їх, щоб ctrlF5оновити оновлення, щоб вони отримували актуальні файли з сервера, але бажано було б обробити це до цього часу.

Наша теперішня думка полягає в тому, щоб просто приєднати номер версії до імені файлів JavaScript, а потім, коли будуть внесені зміни, збільшити версію на скрипт та оновити всі посилання. Це безумовно робить роботу, але оновлення посилань на кожен реліз може стати громіздким.

Оскільки я впевнений, що ми не перші, хто займається цим, я подумав, що викину це громаді. Як ви забезпечуєте, щоб клієнти оновлювали кеш-пам'ять під час оновлення коду? Якщо ви використовуєте описаний вище метод, чи використовуєте ви процес, який спрощує зміни?

Наскільки я знаю, загальним рішенням є додавання ?<version>до src-посилання сценарію.

Наприклад:

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

Я припускаю, що на даний момент немає кращого способу, ніж знайти-замінити для збільшення цих "номерів версій" у всіх тегах сценарію?

Можливо, система контролю версій зробить це для вас? Більшість систем контролю версій, наприклад, автоматично вводить номер редакції під час реєстрації.

Це виглядатиме приблизно так:

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

Звичайно, завжди є кращі рішення, як це .

Додавання поточного часу до URL - це справді поширене рішення. Однак ви також можете керувати цим на рівні веб-сервера, якщо цього хочете. Сервер може бути налаштований для надсилання різних заголовків HTTP для файлів javascript.

Наприклад, щоб змусити файл кешувати не більше 1 дня, ви надішлете:

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

Для бета-версії, якщо ви хочете змусити користувача завжди отримувати останню інформацію, ви використовуєте:

Cache-Control: no-cache, must-revalidate

Google Page-Speed: Не включайте рядок запиту в URL для статичних ресурсів. Більшість проксі-сервісів, особливо поміщені на версії 3.0, не кешують ресурси з "?" у їхній URL-адресі, навіть якщо у відповіді присутній заголовок кеш-керування: публічний. Щоб увімкнути кешування проксі для цих ресурсів, видаліть рядки запитів із посилань на статичні ресурси та замість цього закодуйте параметри в самі імена файлів.

У цьому випадку ви можете включити версію в URL-адресу ex: http://abc.com/ v1.2 /script.js і використовувати apache mod_rewrite для перенаправлення посилання на http://abc.com/script.js . Після зміни версії браузер клієнта оновить новий файл.

Це використання призупинено: https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache

Ця відповідь запізнюється лише на 6 років, але я не бачу такої відповіді в багатьох місцях ... HTML5 запровадив кеш-програм, який використовується для вирішення цієї проблеми. Я виявив, що новий код сервера, про який я писав, зламав старий JavaScript, який зберігається в браузерах людей, тому я хотів знайти спосіб закінчення терміну дії їх JavaScript. Використовуйте файл маніфесту, який виглядає приблизно так:

CACHE MANIFEST
# Aug 14, 2014
/mycode.js

NETWORK:
*

і генерувати цей файл із новою позначкою часу щоразу, коли ви бажаєте, щоб користувачі оновлювали кеш-пам'ять. Як бічна примітка, якщо ви додасте це, браузер не буде перезавантажуватись (навіть коли користувач оновлює сторінку), поки маніфест не повідомить про це.

Як щодо додавання розміру файлів як параметра завантаження?

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

Тому щоразу, коли ви оновлюєте файл, параметр "filever" змінюється.

Як щодо того, коли ви оновлюєте файл та результати оновлення в тому ж розмірі файлу? які шанси?

Не всі браузери кешують файли із написом "?" у цьому. Що я зробив, щоб переконатися, що він був кешований максимально, я включив версію у ім’я файлу.

Тому замість цього stuff.js?123я зробивstuff_123.js

Я використовував mod_redirect(я думаю) в apache to have stuff_*.jsto gostuff.js

Для сторінок ASP.NET я використовую наступне

ПЕРЕД

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

ПІСЛЯ (примусове перезавантаження)

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

Додавання DateTime.Now.Ticks працює дуже добре.

Для ASP.NET я думаю, що наступне рішення з розширеними параметрами (режим налагодження / випуску, версії):

Файли Js або Css, включені таким чином:

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

Global.JsPostfix та Global.CssPostfix обчислюється таким чином у 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();
    }
    ...
}

Загальна практика в даний час полягає в генерації хеш-коду вмісту як частини імені файлу, щоб змусити браузер, особливо IE, перезавантажувати файли javascript або файли css.

Наприклад,

продавець. a7561fb0e9a071baadb9 .js
main. b746e3eb72875af2caa9 .js

Зазвичай це робота для інструментів збирання, таких як webpack. Ось більше деталей , якщо хто -то хоче спробувати , якщо ви використовуєте Webpack.

Якщо ви генеруєте сторінку, що посилається на файли JS, простим рішенням додається остання часова мітка файлу до створених посилань.

Це дуже схоже на відповідь Huppie, але працює в системах управління версіями без заміни ключових слів. Це також краще, ніж додати поточний час, оскільки це запобіжить кешування навіть тоді, коли файл зовсім не змінився.

Функцію jQuery getScript можна також використовувати для того, щоб js-файл дійсно завантажувався щоразу, коли сторінка завантажується.

Ось як я це зробив:

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

Перевірте функцію на веб-сторінці http://api.jquery.com/jQuery.getScript/

За замовчуванням $ .getScript () встановлює значення кешу на false. Це додає до URL-адреси запиту параметр запиту, який зазначається часом, щоб переконатися, що браузер завантажує скрипт щоразу, коли його запитують.

На PHP :

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

В HTML :

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

Як це працює:

У HTML напишіть filepathта ім’я так, як це робите, але лише у функції. PHP отримує filetimeфайл і повертає filepath+name+"?"+timeостанню зміну

Ми створювали SaaS для користувачів і надавали їм сценарій для долучення до сторінки їх веб-сайту, і не вдалося приєднати версію до сценарію, оскільки користувач додасть сценарій до свого веб-сайту для функціональності, і я не можу їх змусити змінювати версію кожного разу, коли ми оновлюємо сценарій

Отже, ми знайшли спосіб завантажувати новішу версію сценарію щоразу, коли користувач викликає оригінальний сценарій

посилання сценарію, надане користувачеві

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

файл сценарію

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
}

Пояснення:

Користувач додав сценарій, наданий їм на своєму веб-сайті, і ми перевірили, чи існує унікальний маркер, доданий до сценарію, існує чи не використовується селектор jQuery, і якщо ні, то завантажувати його динамічно новішим маркером (або версією)

Це виклик одного і того ж сценарію двічі, що може бути проблемою продуктивності, але це дійсно вирішує проблему змусити скрипт не завантажуватися з кешу, не розміщуючи версію у фактичному посиланні сценарію, наданому користувачеві або клієнту

Відмова від відповідальності: Не використовуйте, якщо продуктивність є великою проблемою у вашому випадку.

У mpc asp.net ви можете використовувати @ DateTime.UtcNow.ToString () для номера версії файлу js. Номер версії автоматично змінюється з датою, і ви змушуєте браузера клієнтів автоматично оновлювати файл js. Я використовую цей метод, і це добре працює.

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

location.reload (правда);

див. https://www.w3schools.com/jsref/met_loc_reload.asp

Я динамічно закликаю цей рядок коду, щоб переконатися, що javascript було відновлено з веб-сервера замість кешу браузера, щоб уникнути цієї проблеми.

Одне рішення - додавати рядок запиту із часовою позначкою до нього до URL-адреси під час отримання ресурсу. Це використовує той факт, що браузер не кешуватиме ресурси, вилучені з URL-адрес із рядками запитів.

Ви, мабуть, не хочете, щоб браузер взагалі не кешував ці ресурси; більше ймовірно, що ви хочете, щоб вони були кешовані, але ви хочете, щоб браузер отримав нову версію файлу, коли він стане доступним.

Найпоширенішим рішенням, здається, є вставка часової позначки або ревізійного номера у самому імені файлу. Це трохи більше роботи, тому що ваш код потрібно змінити, щоб вимагати правильних файлів, але це означає, що, наприклад, версія 7 вашого snazzy_javascript_file.js(тобто snazzy_javascript_file_7.js) кешована в браузері до випуску версії 8, а потім ваш код змінюється на отримувати snazzy_javascript_file_8.jsнатомість.

Перевага використання file.js?V=1над a fileV1.jsє те, що вам не потрібно зберігати на сервері кілька версій файлів JavaScript.

Проблема, з якою я бачу, file.js?V=1полягає в тому, що у вас може бути залежний код в іншому файлі JavaScript, який порушується при використанні нової версії утиліти бібліотеки.

З метою зворотної сумісності, я думаю, що набагато краще використовувати jQuery.1.3.jsдля своїх нових сторінок і нехай використовувати існуючі сторінки jQuery.1.1.js, поки ви не будете готові оновити старі сторінки, якщо це необхідно.

Використовуйте GETзмінну версії, щоб запобігти кешування браузера.

Додавання ?v=AUTO_INCREMENT_VERSIONдо кінця URL-адреси запобігає кешування браузера - уникаючи будь-яких кешованих сценаріїв.

Мій колега щойно знайшов посилання на цей метод одразу після того, як я опублікував (з посиланням на css) на http://www.stefanhayden.com/blog/2006/04/03/css-caching-hack/ . Приємно бачити, що інші користуються цим і, здається, працює. Я припускаю, що на даний момент немає кращого способу, ніж знайти-замінити для збільшення цих "номерів версій" у всіх тегах сценарію?

Хоча Django 1.4 має цю функціональну функцію, яка працює аналогічно посиланням на сайт "greenfelt" у наведеній вище відповіді.

Перестановка кешу в ASP.NET Core за допомогою помічника тегів допоможе це зробити для вас і дозволить вашому браузеру зберігати кешовані сценарії / css, поки файл не зміниться. Просто додайте помічник тегу asp-append-version = "true" у свій скрипт (js) або тег link (css):

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

У Дейва Пакетта є хороший приклад та пояснення перетворення кешу тут (внизу сторінки) Перетворення кешу

Найпростіше рішення? Не дозволяйте браузеру кешувати взагалі. Додайте поточний час (у мс) як запит.

(Ви все ще перебуваєте в бета-версії, тож ви можете зробити розумний випадок, коли ви не оптимізуєте продуктивність. Але YMMV тут.)

Один простий спосіб. Редагувати 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]

Нижче працювали для мене:

<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>