如何：我想让我的网站完全离线

Question

我想将我的网站存储在用户的浏览器中，以便他们第二次访问它时，他们应该能够在不连接到互联网的情况下使用它。我研究过

SessionStorage

和

LocalStorage

但对我来说还不够。我的网站是一个简单的时钟，有 3 个文件，一个 javascript 文件，一个 css 文件和一个 index.html 网站链接文字 告诉我如何将文件存储在用户的存储中并稍后访问。 我受到 YouTube 网站和 Mega 云存储网站的启发。在 YouTube 网站上，当我离线访问它时，它会显示一个漂亮的动画，表明您已离线。我确信它不是浏览器生成的。 同样在大型网站上，它会下载用户存储中的文件，然后以某种方式将它们传输到浏览器的下载部分。

我尝试搜索整个网络，但没有找到任何有用的信息。 我希望这个网站完全离线。即使用户离线，他们也应该能够使用它。

Answer 1

实现您想要做的事情的最佳方法是使用 Service Worker。您可以使用 JavaScript 和 Service Worker 使网站离线加载。 Service Worker 是在浏览器后台运行并拦截网络请求的脚本。您可以使用 Service Worker 缓存静态资源，例如 HTML、CSS 和 JavaScript 文件，以便在用户离线时可以从本地存储加载它们。

这些网站可以帮助您了解如何使用 js Service Worker 实现它的基本概念，并提供示例和一些有用的详细信息：

1. https://googlechrome.github.io/samples/service-worker/basic/
2. https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers
3. https://web.dev/learn/pwa/service-workers/
4. https://www.geeksforgeeks.org/service-workers-in-javascript/

用于使网站离线加载的最佳技术取决于您的具体需求。如果你只需要离线存储少量数据，那么LocalStorage也是一个不错的选择。如果您需要存储大量数据或离线执行复杂任务，那么 IndexedDB 或 Web Workers 是更好的选择。