模拟 HTML5 缓存测试的离线模式

Posted 2023-03-04

【中文标题】模拟 HTML5 缓存测试的离线模式

【英文标题】：Simulate Offline Mode for HTML5 Cache Testing

【发布时间】：2011-02-08 11:44:55

【问题描述】：

我有一个需要离线支持的 html5 应用程序。我正在为应用程序使用本地 Apache 服务器，并试图找出模拟离线模式的最佳方法（目前，在 Firefox 中，我禁用了我的 Air-Port 来模拟离线模式，但这很痛苦）。有什么建议？如果存在不需要关闭 Internet 的方法，我愿意使用其他浏览器。

【参考方案1】：

对于火狐 ☰（汉堡菜单）->更多->离线工作

谷歌浏览器似乎没有此功能

编辑： 此外，另一种选择在开始时设置会稍微耗时一些，但可能值得。对于 Firefox/Chrome 应该有代理插件，为每个插件设置一个虚假/错误的配置文件，以便您代理不存在的东西......比如 127.0.0.20:8080。之后，您可以打开和关闭代理设置以模拟全栈测试。

【讨论】：

Chrome 还没有这个功能吗？

@ClayNichols Chrome 的优先级与此类内容有些偏离，至少考虑到托管错误页面的错误报告已经存在的年数，我是这么看的。

我认为这行不通。我有服务人员，所以我的页面应该离线工作。但相反，我收到一条错误消息，说 firefox 无法浏览网页。

Chrome 现在在开发工具的网络选项卡下有一个“离线”选项。我在 Firefox 上搜索类似内容，但找不到。文件 -> 离线工作正是我所需要的！！

正如@Nuno 提到的，或者使用 Devtools-> 设备工具栏（左上角的第二个图标，靠近“元素”选项卡）-> 在线/离线下拉列表

【参考方案2】：

对于 Firefox，从 ☰（汉堡菜单）中，选择 Web Developer > Work Offline。

对于 Chrome，打开 DevTools 并选择网络面板。默认情况下，限制设置为在线（禁用）。从下拉菜单中，您可以选择预设 Fast 3G 和 Slow 3G，但要模拟离线模式，您需要选择离线。

【讨论】：

它现在出现在☰ -> More -> Work Offline 对我来说

现在也在菜单文件 -> 脱机工作。

【参考方案3】：

在 Chrome 中，您可以打开开发者工具切换到网络选项卡并将限制设置为离线

【参考方案4】：

其他答案已过时。这个出现在 Firefox v92 中的唯一位置是 File > Work Offline。

按ALT 键可以在Firefox 的左上角访问File 菜单。

【讨论】：

macOS上也是这样

Linux 上也有。

注意：当您选择“脱机工作”时，与“localhost”（例如，localhost:8080）的连接似乎没有被禁用——这使得在您开发时很难测试脱机模式本地 PWA（尚未将其设置为在 HTTPS 服务器上运行......）