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. FreeWheel核心业务团队混沌工程实践之路

    https://mp.weixin.qq.com/s/0monDPkAlMk7Yhq9swW7gQ 原创 郭彦梅 InfoQ 2020-11-17  

  2. Hive语法小释

    阅读本文你可以获取: 1.数据库的查询 2.hive表的基本操作(建表三种常用方式.删除表.修改表.加载数据.内外表转换.添加分区.复制数据) 3.SQL到HiveQL的的一些不同点 1.   基本操 ...

  3. （014）每日SQL学习：oracle下lag和lead分析函数

    /*语法*/ lag(exp_str,offset,defval) over() Lead(exp_str,offset,defval) over() --exp_str要取的列 --offset取偏 ...

  4. redis6.0多线程

    https://www.sohu.com/a/331991216_268033 执行还是单线程     读写解析多线程   6.0 https://segmentfault.com/a/1190000 ...

  5. HTTPS学习（二）：原理与实践

    div.example { background-color: rgba(229, 236, 243, 1); color: rgba(0, 0, 0, 1); padding: 0.5em; mar ...

  6. spark join 广告用户特征 与广告特征的 join 拿到训练集

    spark join 广告特征做广播

  7. Excel 快速填充：填充柄+数据验证

    鼠标左键拖拽填充或者双击填充 右键拖拽填充: 可以填充等比数列.工作日等等 数据验证: 通过下拉箭头快速选择数据: 选择单元格区域-[数据]-[数据验证]-序列 数据科学交流群,群号:18915878 ...

  8. DOS windows 使用bat脚本获取 IP MAC 系统信息

    @echo select disk 0 >dpjs.txt @echo detail disk >>dpjs.txt diskpart /s dpjs.txt@echo ------ ...

  9. svn 启动项目报错，项目被lock

    问题描述 问题解决 (一)Eclipse SVN 插件处理 (二)SVN 客户端处理 (三)删除lock文件 问题描述 在使用开发工具开发项目时(如Eclipse),在做项目的中途,有时候Eclips ...

  10. c++ stl list使用总结（转）

    转自:http://blog.csdn.net/nupt123456789/article/details/8120397 #include <iostream> #include < ...