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. hive报错：Failed with exception java.io.IOException: rename for src path:

    在hive中,会有这样一种情形: 1.创建一个分区外部表A(比如A表有5个字段),并且向A表里指定的分区(比如20160928这个分区)里插入数据 2.发现A表缺少一些字段,因为存在元数据不实时更新的 ...

  2. ACID 原子性（atomicity，或称不可分割性）、一致性（consistency）、隔离性（isolation，又称独立性）、持久性（durability）。

    https://en.wikipedia.org/wiki/ACID https://zh.wikipedia.org/wiki/ACID //ACID compliant , row-level l ...

  3. 入 Go 必读：大型Go工程的项目结构及实战思考 原创 毛剑 QCon 今天

    入 Go 必读:大型Go工程的项目结构及实战思考 原创 毛剑 QCon 今天

  4. Java反序列化： 基于CommonsCollections4的Gadget分析 Java 序列化与反序列化安全分析

    Java反序列化: 基于CommonsCollections4的Gadget分析 welkin 京东安全 5天前 https://mp.weixin.qq.com/s/OqIWUsJe9XV39SPN ...

  5. forEach、for in、for of三者区别

    forEach更多的用来遍历数组for in 一般常用来遍历对象或jsonfor of数组对象都可以遍历,遍历对象需要通过和Object.keys()for in循环出的是key,for of循环出的 ...

  6. Python爬虫学习笔记(三)

    Cookies: 以抓取https://www.yaozh.com/为例 Test1(不使用cookies): 代码: import urllib.request # 1.添加URL url = &q ...

  7. 题解 P1248 【加工生产调度】

    题目 某工厂收到了 n 个产品的订单,这 n 个产品分别在 A.B 两个车间加工,并且必须先在 A 车间加工后才可以到 B 车间加工. 某个产品 i 在 A.B 两车间加工的时间分别为 Ai,Bi 怎 ...

  8. sql注入-原理&防御

    SQL注入是指web应用程序对用户输入数据的合法性没有判断或过滤不严,攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句,在管理员不知情的情况下实现非法操作,以此来实现欺骗数 ...

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

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

  10. Spark剖析-宽依赖与窄依赖、基于yarn的两种提交模式、sparkcontext原理剖析

    Spark剖析-宽依赖与窄依赖.基于yarn的两种提交模式.sparkcontext原理剖析 一.宽依赖与窄依赖 二.基于yarn的两种提交模式深度剖析 2.1 Standalne-client 2. ...