如何强制客户端刷新 JavaScript 文件?

front end technologyjavascriptweb development

本教程教我们强制客户端刷新 JavaScript 文件。

现在，问题是，为什么我们需要强制客户端刷新 JavaScript 文件?让我们通过示例问题来理解它。假设我们已经部署了应用程序，并且许多用户正在使用我们的应用程序。现在，为了提高应用程序的性能和 UI，我们将不断改进我们的应用程序，并在每次更新后升级其版本。显然，在升级应用程序版本后，我们也会将其推向生产。但有时，在用户的屏幕上，客户端 JavaScript 或 CSS 并未升级，即使我们已将新代码推送到生产环境，它仍会显示我们应用程序的旧版本。

你能想到为什么会发生此问题吗?好吧，继续阅读以了解答案。当用户第一次在浏览器中打开我们的应用程序时，浏览器会将该网页的缓存存储在本地存储中。因此，当用户下次从同一浏览器访问该网页时，由于存储的缓存，加载时间不会太长。所以，在我们的例子中，存储的缓存造成了问题。我们已经将应用程序的代码升级到生产环境，但浏览器从本地存储(或者我们可以说是缓存)获取 CSS 和 JavaScript 文件。浏览器不是从服务器重新加载新文件，而是从缓存中加载并向用户显示应用程序的旧版本。

我们在下面解释了一些在升级应用程序后从服务器重新加载 JavaScript 文件的解决方案。

硬重新加载浏览器

最简单的解决方案是硬重新加载浏览器。用户打开应用程序窗口后，可以按 ctrl + F5 或 ctrl + shift + R 硬重新加载浏览器。在 Mac 上，用户可以按 cmd + R。它将再次从服务器重新加载所有文件，如果您更新了 JavaScript 文件，它将替换客户端浏览器本地缓存中升级的文件。

硬重新加载浏览器的另一种方法是按住 ctrl 并单击浏览器左上角的重新加载按钮。 Mac 用户必须按下 cmd 键并单击重新加载按钮。

太棒了!此解决方案可行，就像您执行硬重新加载一样；它会从服务器重新加载所有文件。但是，每次升级应用程序时都告诉应用程序用户重新加载浏览器是否好?这不是一个好的做法。因此，我们提出了以下另一个最佳解决方案。

更改脚本标记中的文件路径

在此方法中，我们将更改 JavaScript 脚本标记中的源 URL，以使浏览器欺骗并从服务器重新加载所有已更改的文件。我们只需在文件的源 URL 后添加一些查询参数即可。

用户可以按照以下语法在源标记中编辑源 URL。

语法

旧脚本标记

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

新脚本标记

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

参数

version − 用户可以添加任何字符串作为版本来跟踪新版本。最常用的方法是添加任何版本，但用户也可以添加日期和时间以使其独一无二。

示例

以下示例演示了如何在应用程序版本升级时动态附加日期和时间。

<script type="text/javascript">  
   //get the date and time
   var currentDate = (new Date()).getTime();  
   
   //create new script element
   var newScriptElement = document.createElement("script");  
   newScriptElement.type = "text/javascript";  
   
   // add current date to URL as a query parameter
   newScriptElement.src = "script.js?" + currentDate;  
   
   // append new script element to body.
   document.body.appendChild(newScriptElement);  
</script>

用户可以看到，在上面的例子中，我们在脚本文件源 URL 中附加了日期和时间。当浏览器尝试使用更新后的 URL 查找脚本文件时，它将无法从本地缓存中获取它。之后，浏览器必须从服务器重新加载它。

此外，用户可以通过编辑 .htaccess 文件来实现这一点 −

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