React 应用程序离线页面在浏览器重新加载时呈现

问题描述 投票:0回答:1

我有一个React应用程序https://codesandbox.io/p/sandbox/q6l8jp,它使用react-use-is-online npm包来检查在线和离线状态。该包运行完美,可以显示在线和离线状态的适当消息。但是,当我尝试在离线状态下重新加载浏览器时,我的应用程序无法呈现并显示浏览器的默认“无互联网”页面。

即使没有互联网连接,我也想加载我的应用程序并显示自定义错误消息。例如,YouTube 即使在离线状态下也会继续呈现其应用程序。我怎样才能实现这个目标?

javascript reactjs vite
1个回答
0
投票

在此输入图片描述

[1]:https://i.sstatic.net/AJPlEDe8.png 我尝试在离线状态下加载 https://www.youtube.com/ ,发现它是通过 Service Worker 返回的静态资源,这意味着离线缓存已经完成,我猜是为了给用户一个体验比较好,应该属于PWA级别。 您的网站在正常使用过程中,在断网的情况下仍能显示自定义信息,因为所需的资源已经下载完毕,逻辑也正常执行。 如果你尝试在网络关闭的情况下刷新你的网站,在没有离线缓存、没有网络的情况下请求资源,是不可能请求到任何内容的,更不可能执行你的判断逻辑!

© www.soinside.com 2019 - 2024. All rights reserved.