使用service worker时检测在线状态不起作用
使用service worker时检测在线状态不起作用
提问于 2020-03-11 03:58:04
我正在使用google workbox让服务人员可以离线访问一些内容。离线部分按预期工作。但我想给用户一条消息(fe。弹出窗口或)当客户端再次具有网络访问时。我试图通过浏览器的在线事件侦听器来实现这一点。我使用chrome打开页面，然后将chrome设置为脱机模式。之后，我导航到index2.htm，显示脱机内容(=works)。然后我再次将chrome设置为在线模式，但是online-event并没有被触发。有人知道为什么和如何解决这个问题吗？
我的文件：
sw.js
importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.0.0/workbox-sw.js');
if (workbox) {
precaching.precacheAndRoute([{
url: 'https://playground.test/index2.htm',
revision: 1
}]);
self.addEventListener('fetch', (event) => {
fetch(event.request)
.catch(function (e) {
return caches.match(event.request);
});
});
}index.htm
<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
</head>
<body>
<a href="index2.htm">Index2</a>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('/sw.js');
});
}
</script>
</body>
</html>index2.htm
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
<script src="offline.js"></script>
</head>
<body>
<h1>Page 2</h1>
</body>
</html>offline.js
window.addEventListener('load', () => {
const handleNetworkChange = () => {
if (navigator.onLine) {
alert('You are online again!');
}
};
window.addEventListener('online', handleNetworkChange);
});回答 1
Stack Overflow用户
发布于 2020-09-26 00:57:27
我也有同样的问题，我用下面的代码解决了这个问题：
const hasInternet = (url = 'https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png?x=' + Math.random()): Promise<boolean> => {
return new Promise(resolve => {
let img = new Image();
img.onload = function () { resolve(true); };
img.onerror = function () { resolve(true); };
img.src = url;
setTimeout(function () { resolve(false); }, 5000);
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60625052
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号