how to check website offline status in js

https://developer.mozilla.org/en-US/docs/Web/API/NavigatorOnLine/Online_and_offline_events

navigator.onLine

const online = window.navigator.onLine;



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);

});

https://bug336359.bmoattachments.org/attachment.cgi?id=220609

http://html5-demos.appspot.com/static/navigator.onLine.html

https://caniuse.com/#feat=online-status

offline demo

https://alligator.io/react/whats-new-in-react-16.9/

Service Workers

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

how to check website offline status in js的更多相关文章

  1. partition_show , a new version to check partition table status in sqlserver

    Dear all: I had put "partition_show" before . but this time it makes faster. partition_sho ...

  2. android network develop(2)----network status check

    Check & Get network status Normally, there will be two type with phone network: wifi & mobil ...

  3. 大熊君学习html5系列之------Online && Offline（在线状态检测）

    一,开篇分析 Hi,大家好,给大家拜个晚年!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例,让大家一步一步的 ...

  4. angular.js的ui-router总结

     ui-route     先有个网址,再在这个网址下写路由   子路由的搭建   我们的布局/模板文件 index.html 我们通过建立一个主文件来引入我们所需要的所有资源以开始我们的项目 ,这里 ...

  5. exit status 3221225477 npm run dev 报错

    Fatal error in , line 0 # Check failed: U_SUCCESS(status). # # # #FailureMessage Object: 000000B5882 ...

  6. 使用 GitHub API 进行数据分析 (Node.js)

    使用 GitHub API 进行数据分析 (Node.js) Node.js 的访问 GitHub 的 API 库,通过 npm 或者 yarn 安装: yarn add github-api 官方示 ...

  7. html5 js 监听网络在线与离线

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  8. JS代码静态分析及挖掘

    JavaScript 已经成为现代 Web 浏览器开发中最普遍的技术之一.使用客户端 JavaScript 框架(如 AngularJS,ReactJS 和 Vue.js)构建的应用程序已向前端输送了 ...

  9. 将css和js缓存到localStorage缓存，提高网页响应速度

    适用于小站点,这很极致,很快速~~ /** * Created by SevenNight on 2016/9/21 0021. * 插件功能:使用localStorage缓存js和css文件,减少h ...

随机推荐

  1. 任何Python线程执行前，必须先获得GIL锁，然后，每执行100条字节码，解释器就自动释放GIL锁，让别的线程有机会执行

    任何Python线程执行前,必须先获得GIL锁,然后,每执行100条字节码,解释器就自动释放GIL锁,让别的线程有机会执行 多线程 - 廖雪峰的官方网站 https://www.liaoxuefeng ...

  2. BigDecimal add方法问题：调用add后，求和结果没变

    import java.math.BigDecimal; public class DecimalAdd { public static void main(String[] args) { BigD ...

  3. Pod和容器的LimitRange原理和实践总结

    一.背景介绍 通常情况下,Pod中的容器可以无限制的使用节点上的CPU和内存资源,在共享资源和资源有限的情况下,若不加以限制,某个集群或命名空间的资源可能会消耗殆尽,导致其他节点上优先级低的Pod发生 ...

  4. Windows操作Redis及Redis命令

    Windows操作Redis及Redis命令 一.Windows下操作Redis 设置密码 打开redis服务 Windows 下的redis命令行 二.redis常用命令大全 key String ...

  5. 详解Java8特性之新的日期时间 API

    详解Java8特性之新的日期时间 API http://blog.csdn.net/timheath/article/details/71326329 Java8中时间日期库的20个常用使用示例 ht ...

  6. Golang之如何（优雅的）比较两个未知结构的json

    这是之前遇到的一道面试题,后来也确实在工作中实际遇到了.于是记录一下,如何(优雅的)比较两个未知结构的json. 假设,现在有两个简单的json文件. { "id":1, &quo ...

  7. （8）Linux文件目录结构一览表

    1.使用 Linux 时,通过命令行输入 ls -l / 可以看到,在 Linux 根目录(/)下包含很多的子目录(称为一级目录),例如 bin.boot.dev 等.同时,各一级目录下还含有很多子目 ...

  8. Codeforces Round #657 (Div. 2) B. Dubious Cyrpto（数论）

    题目链接:https://codeforces.com/contest/1379/problem/B 题意 给出三个正整数 $l,r,m$,判断在区间 $[l,r]$ 内是否有 $a,b,c$ 满足存 ...

  9. Uva 10815 Andy's First Dictionary（字符串）

    题目链接:https://vjudge.net/problem/UVA-10815 题意 找出一段文本中的所有单词,以小写形式按照字典序输出. 思路 用空白符替换文本中所有非字母字符后再次读入. 代码 ...

  10. zjnu1745 DOMINE (状压dp+1*2铺砖)

    Description Mirko has a chessboard with N rows and just three columns. Slavica has written an intege ...