Как заставить клиентов обновлять файлы JavaScript?

Насколько я знаю, наиболее распространенным решением является добавление ?<version> к ссылке src скрипта.

Например:

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

I assume at this point that there isn't a better way than find-replace to increment these "version numbers" in all of the script tags?

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

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

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

Конечно, всегда есть лучшие решения, такие как Вот этот.

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

Одним из решений является добавление строки запроса с меткой времени к URL-адресу при извлечении ресурса. При этом используется тот факт, что браузер не будет кэшировать ресурсы, извлеченные из URL-адресов со строками запроса в них.

Однако вы, вероятно, не хотите, чтобы браузер вообще не кэшировал эти ресурсы; более вероятно, что вы хотите, чтобы они были кэшированы, но вы хотите, чтобы браузер загружал новую версию файла, когда она становится доступной.

Наиболее распространенное решение - встроить метку времени или номер версии в само имя файла. Это немного больше работы, потому что ваш код необходимо изменить, чтобы запрашивать правильные файлы, но это означает, например, что версия 7 вашего snazzy_javascript_file.js (то есть snazzy_javascript_file_7.js) кэшируется в браузере до тех пор, пока вы не выпустите версию 8, а затем ваш код изменится на получение snazzy_javascript_file_8.js.

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

(Вы все еще находитесь в стадии бета-тестирования, поэтому можете привести веские доводы в пользу отказа от оптимизации производительности. Но здесь YMMV.)

Если вы создаете страницу, которая ссылается на файлы JS, простое решение - добавить метку времени последнего изменения файла к созданным ссылкам.

Это очень похоже на ответ Хуппи, но работает в системах контроля версий без подстановки ключевых слов. Это также лучше, чем добавлять текущее время, поскольку это предотвратит кеширование, даже если файл вообще не изменился.

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

Например, чтобы принудительно кэшировать файл не дольше 1 дня, вы должны отправить:

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

Для бета-версии, если вы хотите заставить пользователя всегда получать последнюю версию, вы должны использовать:

Cache-Control: no-cache, must-revalidate

Не все браузеры кешируют файлы, содержащие '?'. Что я сделал, чтобы убедиться, что он был кэширован как можно больше, я включил версию в имя файла.

Так что вместо stuff.js?123 я сделал stuff_123.js

Я использовал mod_redirect (я думаю) в apache, чтобы have stuff_*.js перейти на stuff.js

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

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

Я считаю, что для обеспечения обратной совместимости гораздо лучше использовать jQuery.1.3.js для ваших новых страниц и позволить существующим страницам использовать jQuery.1.1.js, пока вы не будете готовы обновить старые страницы, если это необходимо.

Используйте переменную версии GET, чтобы предотвратить кеширование браузера.

Добавление ?v=AUTO_INCREMENT_VERSION в конец вашего URL-адреса предотвращает кеширование браузера - избегая любых и всех кешированных скриптов.

Google Page-Speed: не включайте строку запроса в URL-адрес для статических ресурсов. Большинство прокси, в первую очередь Squid до версии 3.0, не кэшируют ресурсы с символом "?" в их URL, даже если в ответе присутствует заголовок Cache-control: public. Чтобы включить кэширование прокси для этих ресурсов, удалите строки запроса из ссылок на статические ресурсы и вместо этого закодируйте параметры в самих именах файлов.

В этом случае вы можете включить версию в URL ex: http://abc.com/v1.2 / script.js и использовать apache mod_rewrite для перенаправления ссылки на http://abc.com/script.js. Когда вы меняете версию, клиентский браузер обновит новый файл.

Несмотря на то, что это зависит от платформы, Django 1.4 имеет эта функция, который работает аналогично ссылке на сайт «greenfelt» в выше ответ.

В 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 последнего изменения.

Для 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();
    }
    ...
}

Для страниц 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 работает очень хорошо.

This usage has been deprected: 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:
*

и создавайте этот файл с новой отметкой времени каждый раз, когда вы хотите, чтобы пользователи обновляли свой кеш. В качестве примечания: если вы добавите это, браузер перезагрузит нет (даже когда пользователь обновит страницу), пока манифест не сообщит об этом.

Функцию jQuery getScript также можно использовать, чтобы гарантировать, что файл js действительно загружается каждый раз при загрузке страницы.

Вот как я это сделал:

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

Проверить функцию на http://api.jquery.com/jQuery.getScript/

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

Как насчет добавления размера файла в качестве параметра загрузки?

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

Таким образом, каждый раз, когда вы обновляете файл, параметр filever изменяется.

Как насчет того, когда вы обновляете файл и ваше обновление приводит к тому же размеру файла? Каковы шансы?

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

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

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

У Дэйва Пакета есть хороший пример и объяснение очистки кеша здесь (внизу страницы) Очистка кеша

Мы создавали 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, а если нет, то загружаем его динамически с более новым токеном (или версией).

Это вызов одного и того же скрипта дважды, что может быть проблемой производительности, но на самом деле решает проблему, заставляющую скрипт не загружаться из кеша, не помещая версию в фактическую ссылку скрипта, предоставленную пользователю или клиенту.

Disclaimer: Do not use if performance is a big issue in your case.

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

Например,

vendor.a7561fb0e9a071baadb9.js
main.b746e3eb72875af2caa9.js

Обычно это работа инструментов сборки, таких как webpack. Вот еще Детали, если кто-то хочет попробовать, если вы используете webpack.

В asp.net mvc вы можете использовать @ DateTime.UtcNow.ToString () для номера версии файла js. Номер версии автоматически меняется с датой, и вы заставляете браузер клиентов автоматически обновлять файл js. Я использую этот метод, и он хорошо работает.

<script src = "~/JsFilePath/[email protected]()"></script>

Ниже сработало для меня:

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

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

см. https://www.w3schools.com/jsref/met_loc_reload.asp

Я динамически вызываю эту строку кода, чтобы гарантировать, что javascript был повторно получен с веб-сервера, а не из кеша браузера, чтобы избежать этой проблемы.

Вы можете добавить версию файла к своему имени, чтобы она выглядела так:

https://www.example.com/script_fv25.js

fv25 => номер версии файла. 25

И в вашем .htaccess поместите этот блок, который удалит часть версии из ссылки:

RewriteEngine On
RewriteRule (.*)_fv\d+\.(js|css|txt|jpe?g|png|svg|ico|gif) . [L]

итоговая ссылка будет такой:

https://www.example.com/script.js

ПЕРЕДНИЙ ВАРИАНТ

Я сделал этот код конкретно для тех, кто не может менять настройки на бэкэнде. В этом случае лучший способ предотвратить очень длинный кеш - это:

new Date().getTime()

Однако для большинства программистов кэш может составлять несколько минут или часов, поэтому приведенный выше простой код вынуждает всех пользователей загружать «каждую просматриваемую страницу». Чтобы указать, как долго этот элемент будет оставаться без перезагрузки, я сделал этот код и оставил несколько примеров ниже:

// cache-expires-after.js v1
function cacheExpiresAfter(delay = 1, prefix = '', suffix = '') { // seconds
    let now = new Date().getTime().toString();
    now = now.substring(now.length - 11, 10); // remove decades and milliseconds
    now = parseInt(now / delay).toString();
    return prefix + now + suffix;
};

// examples (of the delay argument):
// the value changes every 1 second
var cache = cacheExpiresAfter(1);
// see the sync
setInterval(function(){
    console.info(cacheExpiresAfter(1), new Date().getSeconds() + 's');
}, 1000);

// the value changes every 1 minute
var cache = cacheExpiresAfter(60);
// see the sync
setInterval(function(){
    console.info(cacheExpiresAfter(60), new Date().getMinutes() + 'm:' + new Date().getSeconds() + 's');
}, 1000);

// the value changes every 5 minutes
var cache = cacheExpiresAfter(60 * 5); // OR 300

// the value changes every 1 hour
var cache = cacheExpiresAfter(60 * 60); // OR 3600

// the value changes every 3 hours
var cache = cacheExpiresAfter(60 * 60 * 3); // OR 10800

// the value changes every 1 day
var cache = cacheExpiresAfter(60 * 60 * 24); // OR 86400

// usage example:
let head = (document.head || document.getElementsByTagName('head')[0]);
let script = document.createElement('script');
script.setAttribute('src', '//unpkg.com/[email protected]/dist/sweetalert.min.js' + cacheExpiresAfter(60 * 5, '?'));
head.append(script);

// this works?
let waitSwal = setInterval(function() {
    if (window.swal) {
        clearInterval(waitSwal);
        swal('Script successfully injected', script.outerHTML);
    };
}, 100);

Простой прием, который мне подходит, чтобы предотвратить конфликты между старыми и новыми файлами javascript. Это означает: если возникнет конфликт и возникнет какая-то ошибка, пользователю будет предложено нажать Ctrl-F5.

Вверху страницы добавьте что-то вроде

<h1 id = "welcome"> Welcome to this page <span style = "color:red">... press Ctrl-F5</span></h1>

выглядит как

Пусть эта строка javascript будет последней, которая будет выполняться при загрузке страницы:

document.getElementById("welcome").innerHTML = "Welcome to this page"

В случае, если ошибки не возникнет, приветственное приветствие, показанное выше, будет почти незаметным и почти сразу будет заменено на