推荐答案
在 PWA 中，网络检测通常通过 navigator.onLine 属性和 online/offline 事件来实现。以下是一个简单的实现示例：
// www.javascriptcn.com code example
// 检测当前网络状态
if (navigator.onLine) {
console.log('在线');
} else {
console.log('离线');
}
// 监听网络状态变化
window.addEventListener('online', () => {
console.log('网络已连接');
});
window.addEventListener('offline', () => {
console.log('网络已断开');
});本题详细解读
1. navigator.onLine 属性
navigator.onLine 是一个布尔值，表示当前设备是否连接到网络。如果设备在线，navigator.onLine 返回 true，否则返回 false。
- 在线状态：设备连接到网络（无论是通过 Wi-Fi、以太网还是蜂窝网络）。
- 离线状态：设备未连接到任何网络。
2. online 和 offline 事件
online 和 offline 事件分别在设备从离线变为在线或从在线变为离线时触发。通过监听这两个事件，可以在网络状态发生变化时执行相应的操作。
online事件：当设备从离线状态变为在线状态时触发。offline事件：当设备从在线状态变为离线状态时触发。
3. 实际应用场景
- 缓存策略：在网络恢复时，可以检查是否有未同步的数据并进行同步。
- 用户体验优化：在网络断开时，可以显示友好的提示信息，提醒用户当前处于离线状态。
- 资源加载：在网络恢复时，可以重新加载之前因网络问题未能加载的资源。
4. 注意事项
- 浏览器兼容性：大多数现代浏览器都支持
navigator.onLine和online/offline事件，但在某些旧版浏览器中可能存在兼容性问题。 - 网络状态判断：
navigator.onLine只能判断设备是否连接到网络，但不能判断网络的实际可用性（例如，设备连接到 Wi-Fi 但无法访问互联网）。
通过结合 navigator.onLine 和 online/offline 事件，PWA 可以实现灵活的网络检测机制，从而提供更好的用户体验。