要检测代码是否在 Service Worker 的离线模式下运行,您可以使用 navigator.onLine
属性和 window.addEventListener
监听 online
和 offline
事件
// 检查初始状态
if (navigator.onLine) {
console.log('当前在线状态:', '在线');
} else {
console.log('当前在线状态:', '离线');
}
// 监听 online 事件
window.addEventListener('online', () => {
console.log('在线状态变化: 变为在线');
});
// 监听 offline 事件
window.addEventListener('offline', () => {
console.log('在线状态变化: 变为离线');
});
请注意,navigator.onLine
并非绝对可靠,因为它依赖于浏览器和底层网络技术。在某些情况下,它可能给出不准确的结果。因此,更重要的是始终为离线情况设计良好的用户体验并通过渐进增强来适应这种场景。
领取专属 10元无门槛券
手把手带您无忧上云