相关疑难解决方法(0)

我遇到了navigator.onLine属性的问题.

我正在运行WAMP的本地信息亭运行一个简单的网站.

在我测试它的笔记本电脑上它有效.我关闭WiFi并显示警告框.在运行WAMP软件的自助服务终端上断开互联网连接不会产生错误状态.有什么想法吗？

var online = navigator.onLine;

if (online == false) {

    alert("Sorry, we currently do not have Internet access.");
    location.reload();

}

我通过Safari及其“添加到主屏幕”选项安装了自定义的渐进式Web应用程序。

如果我导航到没有互联网连接的特定页面，则可以按预期获得野生动物园的本机脱机页面。该页面显示以下消息：

Safari无法打开页面，因为您的iPhone未连接到Internet。

如果我再次打开Internet连接，则PWA仍会显示本机Safari脱机页面，使用户无法重新加载该页面或导航至另一个页面。

简而言之，如果我一次没有连接互联网就访问我的PWA，则PWA将永远显示野生动物园的本机脱机页面。

这是iOS 12.2上渐进式Web应用程序的预期行为吗？

我的服务人员看起来像这样：

self.addEventListener('fetch', (evt) => {
    return;
});

即使我按照本文所述提供自定义的脱机页面，但是如果我再次打开Internet连接，PWA仍然停留在脱机页面上。

有没有办法检测用户是否已使用服务人员连接回网络/在线？

我想在用户返回网络时获取一些数据。

它可能可以在 fetch 事件处理程序中完成，但我更喜欢更少的 hacky 解决方案。

我想出的黑客解决方案的伪代码：

self.addEventListener('fetch', function(event) {
     event.respondWith(
         fetch(event.request)
              .then(function(res) {
                   // check previous status
                   // if previous status == offline, user is back online
                   // do back online stuff...
                   // set status to online if previous status is offline
              })
              .catch(function(err) {
                   // set status to offline
              })
        );
});

我一直在关注本教程https://codelabs.developers.google.com/codelabs/offline/#7

到目前为止，我能够让我的服务工作人员缓存脱机页面并加载它，但我只想在没有互联网访问时显示此offline.html 页面。现在它的工作方式是，每次我刷新页面时，即使可以访问互联网，它也会显示它，除非我选中Bypass for network开发人员工具中 Chrome 的“应用程序”选项卡中的复选框。

self.addEventListener('fetch', function(event) {
    console.log(event.request.url);
    event.respondWith(
        fetch('https://mysite/offline.html')
    );;
});