在 Safari 中为网站重新加载 javascript 和 css 文件

Posted 2023-02-22

【中文标题】在 Safari 中为网站重新加载 javascript 和 css 文件

【英文标题】：Reload javascript and css files for a website in Safari

【发布时间】：2017-09-13 17:12:50

【问题描述】：

这让我发疯。每个浏览器和设备都有自己的方式来清除缓存并重新加载 .js 和 .css 文件。例如，我可以在 Chrome 中执行此操作的唯一方法是转到我的登录页面，按 F12 加载调试器并继续。这似乎是唯一的方法来做到这一点。

在 Windows 中的旧版 Safari 中，您可以从菜单中执行此操作，就像您在 IMac 桌面上的 Safari 中执行的操作一样。

但是你在 iPhone 或 iPad 上是怎么做的？？？？？？

我正在使用 IMac 调试手机，但无论我怎么做，.js 文件都保持不变。当我在页面上查看网站时，更改就在那里。

我尝试过让手机崩溃，双击刷新按钮，将其置于私密模式并返回。没有任何效果。有趣的是，我在私人移动中尝试过它，在“开发”菜单中，我可以看到 .js 文件的两个版本 - 一个有更改，一个没有更改。当我回到非私有模式时，旧的 .js 文件（没有更改）在那里。

我还尝试删除我网站的网站数据，但没有成功。

谁知道怎么做？？？？？？

谢谢，

汤姆

【参考方案1】：

在包含您的 JS 或 CSS 时附加一个查询字符串，并在您更新代码时更改它。它将使该文件的缓存本地版本无效。

<script src="test.js?1234567"></script>

通常使用时间戳。

【讨论】：

它不适用于 Mac webkit 浏览器 (Chrome/Safai)。

使用（动态）时间戳将导致 CSS 永远不会被缓存。你不想这样。

【参考方案2】：

转到 Safari -> 首选项 -> 单击高级选项卡底部的高级选项卡单击“在栏中显示开发菜单”复选框并关闭首选项。然后你可以在有Safari、文件、编辑、查看等的程序栏中打开开发菜单，然后点击清空缓存。

【讨论】：

我试过了。我一直在尝试在 IMac 和 iPhone 上进行停止和启动 safari 的所有组合，并选择 Empty Caches，但似乎无法弄清楚什么是有效的。我做了足够多的时间，最终它得到了刷新。但是每次更改都要花 20 分钟来刷新缓存，这是非常令人沮丧的。

【参考方案3】：

在 ios 10 中，您可以通过转到设置 > Safari 并单击“清除历史记录和网站数据”来清除缓存。

对我来说，这有点矫枉过正，因为我不想为 every 网站删除 everything。所以，我要做的是直接浏览到 js 或 css 文件，如果它是较旧的缓存版本，则重新加载它。

【讨论】：

我也不想清除每个站点的所有内容。我正在调试我的应用程序并进行更改。我只想刷新我的应用程序/页面的 .js 和 .css 文件。

@tshad 这已在 iOS 11 中得到解决。您现在可以转到“设置”>“Safari”>“高级”>“网站数据”。这允许您清除各个域的网站数据。

在我的情况下，我什至找不到单个网站数据，因此直接浏览 css 文件是强制 Safari 刷新其样式表缓存的好方法。工作了一个款待。赞成。

【参考方案4】：

我认为没有一种“简单”的方法可以做到这一点。我已经尝试了以上所有方法，包括修改 css 和 js 查询字符串。最接近有效的是 Rockadile 的评论。

打开设置--Safari--网站数据

然后清除您要刷新的站点

提示：如果您正在调试页面，请使用 IP 地址，那么它将显示在此列表的顶部。保持 safari 和网站数据都打开，以便您可以在两者之间切换。

这不像 ctl-F5 那样简单，但肯定比清除整个浏览器的缓存要少。

【参考方案5】：

2 个答案：

第一个答案：如果您只需要强制刷新一次，请点击标签图标，然后选择私人并粘贴并转到 URL。私有会话将永远不会有任何内容的缓存版本，除非它被缓存在中间代理处。当然，它会缓存对同一文件的后续请求。您可以关闭私人会话并创建一个新会话，这与切换到设置应用程序的烦恼程度大致相当。

第二个答案：如果您是开发人员并且正在使用 Apache，您可以像这样设置一个 .htaccess 文件：

<filesMatch "\.(html|htm|js|css)$">
  FileETag None
  <ifModule mod_headers.c>
     Header unset ETag
     Header set Cache-Control "max-age=0, no-cache, no-store, must-revalidate"
     Header set Pragma "no-cache"
     Header set Expires "Wed, 21 Oct 2015 07:28:00 GMT"
  </ifModule>
</filesMatch>

【参考方案6】：

我发现此解决方案适用于 iOS Safari 和其他浏览器...

每当它检测到缓存的 Web 应用程序或网页与服务器的版本不匹配时，它会执行 window.location.reload(true) 强制页面重新加载以避免使用缓存。

您确实希望在发布您的网站的第一个版本之前使用此机制，否则一旦发布，您将无法再依赖永远升级您的 iOS 用户.如果您依赖客户端应用程序和服务器版本同步，这将是一场噩梦。 叹息 ...可悲的是，Safari 和 iOS Safari 似乎特别渴望take the throne once held by Internet Explorer。

部署期间

增加并保存内部版本号。 我使用一个看起来像 "major":1,"minor":0,"patch":0,"build":12 的 version.json 文件 将version.json 复制到客户端和服务器应用程序。

在服务器上：

用 php/Node/Ruby/C# 编写一个服务器 API，返回服务器的 version.json 使用 Web 服务器规则和响应标头来防止 API 结果被缓存。

在客户端应用或网页中：

要诊断问题，请显示客户端版本 + 客户端和服务器内部版本号。

页面加载时调用...

function onload() 
  var clientVersion = require("./version.json");
  // Might replace axios with new fetch() API or older XMLHttpRequest
  axios.get("/api/version").then(function(res) 
    var serverVersion = res.data;
    var lastReload = parseInt(localStorage.getItem("lastReload") || "0");
    var now = new Date().getTime();
    if (
      serverVersion.build !== clientVersion.build &&
      now - lastReload > 60 * 1000 // Prevent infinite reloading.
    ) 
      localStorage.setItem("lastReload", now);
      window.location.reload(true); // force page reload
    
  );

您可能更喜欢测试serverVersion.build > clientVersion.build 而不是serverVersion.build !== clientVersion.build。测试!== 的好处在于，它不仅可以让您升级版本，还可以回滚版本并确保客户端也能回滚。

如果客户端和服务器内部版本号不匹配，我会通过仅在 60 秒内执行一次重新加载来防止客户端无限重新加载。

请注意，此方法仅与匹配的内部版本号（= 部署号）有关，您可能更喜欢更复杂的东西。

这是一个用于增加内部版本号的简单节点应用程序。

const APP_DATA = "../app/src/assets"; // client folder
const FUNC_DATA = "../functions/data"; // server folder

var log = require("debug")("build:incr");
var fs = require("fs");

function readJson(path) 
  log(`Reading: $path`);
  const text = fs.readFileSync(path);
  return JSON.parse(text);


function writeJson(path, json) 
  log(`Writing: $path`);
  fs.writeFileSync(path, JSON.stringify(json));


let version = readJson("./version.json");

version.build++;

log("Version = ", version);
writeJson("./version.json", version);
writeJson(`$APP_DATA/version.json`, version);
writeJson(`$FUNC_DATA/version.json`, version);

【讨论】：

不错的解决方案。不幸的是，似乎不推荐将参数传递给location.reload。 ***.com/questions/55127650/…