我有一个可以进入离线模式的应用程序。为此,我实现了一个侦听应用程序事件的HostListener。
@HostListener('window:offline', ['$event']) onOffline() {
this.isOnline = false;
}
这工作正常,我显示一条错误消息:
<div *ngIf="!isOnline">
<div class="network-div">
<mat-icon class="network-icon">cloud_off</mat-icon>
</div>
<p class="network-text">Network error - unable to connect.
Please try again or contact support if error persists, contact the NCR
support desk.</p>
</div>
当我离线时,我得到了所需的消息,但现在互联网已关闭,当我刷新时,我得到了通常的谷歌错误消息与dinasour。
由于它在离线模式下运行,我无法在我的角度组件中呈现错误HTML。我刷新时需要渲染上面的HTML。
当我点击开发者工具的“离线”时,我会渲染一个HTML,下面是截图:
我该怎么处理?
如果您正在注册服务人员,您可以尝试:
ngOnInit() {
if (!navigator.onLine) {
this.isOnline = false;
}
}
请注意,您应该在构建项目后进行检查并提供服务。
关于浏览器的缓存访问:How to Enable Offline Browsing in Firefox如果您在浏览器上将事件监听器附加到document.body,则Chrome无法运行。您可以为这些事件注册监听器:
一个javascript
window.addEventListener('load', function() {
var status = document.getElementById("status");
var log = document.getElementById("log");
function updateOnlineStatus(event) {
var condition = navigator.onLine ? "online" : "offline";
status.className = condition;
status.innerHTML = condition.toUpperCase();
log.insertAdjacentHTML("beforeend", "Event: " + event.type + "; Status: " + condition);
}
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
});