浏览器支持离线使用吗？这些技巧让你没网也能用

很多人以为浏览器只能联网才好使，其实现在的浏览器早就支持离线使用了。比如你在地铁、高铁上信号差，或者不想开流量的时候，照样能看之前浏览过的网页，关键是怎么设置和使用。

缓存机制让页面“记住”内容

当你打开一个网页时，浏览器会自动把部分资源存在本地，比如图片、CSS 和 JavaScript 文件。下次再打开同一页面，哪怕没网，也能加载出部分内容。这其实是浏览器的缓存机制在起作用。比如你常看的新闻网站，刷新时总感觉快，就是因为它从本地读取了缓存。

PWA：像App一样离线运行

现在很多网站支持 PWA（渐进式网页应用），比如知乎、微博、Google Keep。你可以把它们“安装”到桌面，就像装 App 一样。安装后即使断网，也能打开并查看之前加载过的内容。

以 Chrome 浏览器为例，在地址栏点击右上角的“+”号或“安装”按钮，就能把支持 PWA 的网站添加到主屏幕。之后离线状态下点开，依然能访问核心功能。

手动保存网页备用

遇到重要信息，比如旅行攻略或操作手册，可以直接保存整个页面。在电脑端浏览器中按 Ctrl+S（Mac 是 Cmd+S），选择“网页，完整”格式，就能把 HTML、图片、样式全存下来。以后没网络时双击这个文件，照样能看。

手机端也行，Safari 和某些安卓浏览器支持“保存为 PDF”或“离线阅读模式”，去掉广告只留正文，省流量又方便。

开发者模式下的离线调试

如果你是网站开发者，可以在浏览器开发者工具里模拟离线环境。打开 F12 面板，切换到 Network 标签，勾选 Offline，页面就会假装断网，用来测试网页的容错能力。

/* 在 Service Worker 中声明离线缓存 */
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open('my-site-cache').then(cache => {
      return cache.addAll([
        '/',
        '/styles/main.css',
        '/scripts/app.js',
        '/images/logo.png'
      ]);
    })
  );
});

这段代码能让网页通过 Service Worker 提前缓存资源，用户第一次访问后，第二次即使没网也能加载出来。

浏览器扩展也能离线用

不少浏览器插件本身就支持离线，比如翻译类、密码管理、笔记类工具。像 Grammarly 离线模式可以检查英文语法，LastPass 能读取本地保存的密码，不需要每次联网验证。

只要在扩展设置里开启离线功能，哪怕飞机起飞后关闭飞行模式，这些工具照常工作。