angular-service-worker - 如何查询 PWA 离线状态以通知用户

Question

我尝试制作一个 Angular 8 PWA 应用程序。到目前为止一切顺利，缓存在静态资源和 API 的离线模式下工作。

但我想通知用户离线状态，让他们知道显示的信息（API）不一定是最新的。

我试图找到有关从角度查询服务人员的指南或文档，但一无所获。什么是最好的方法 - 如果有的话 - 知道 service worker 是否使用缓存？

谢谢。

Answer 1

浏览器根据网络连接生成“离线”和“在线”事件，您可以监听此事件以通知用户：

window.addEventListener('online', hideOfflineIndicator); 
window.addEventListener('offline', showOfflineIndicator);

function showOfflineIndicator() {
    // Your code to inform the user they are offline.
}

function hideOfflineIndicator() {
    // Your code to inform the user they are back online.
}

这有很好的浏览器支持

可以在此处找到有关这些事件的更多信息