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. virtualenv安装和配置

    安装命令 命令执行结束 配 执行命令:virtualenv testvir 执行完成:会在当前目录下生成如下文件夹 进入到testvir目录 进入Scripts目录: 进入虚拟环境:执行 activa ...

  2. cms_文章管理

    文章管理 文章管理前端页面 把引入的多个布局抽成了公共代码 <%@ page language="java" contentType="text/html; cha ...

  3. LOJ2130软件包

    题目描述Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖(即下载安装这个软 ...

  4. .htaccess 和 .user.ini

    .htaccess 仅能用于apache下,并且内容严格,不能有错误行,如:GIF89a .user.ini php 5.3.0开始引入,可设置除了:PHP_INI_SYSTEM 外的其他,包括(PH ...

  5. java的几种对象（PO,VO,DAO,BO,POJO）

    一.PO persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数 ...

  6. 一条sql查出数据库某张表的所有属性

    select t.TABLE_NAME,--表名 t.COLUMN_NAME,--字段名 t.DATA_TYPE,--字段属性 t.DATA_LENGTH,--类型长度 t.DATA_PRECISIO ...

  7. ACM-古老的密码（排序qsort）

    古老的密码 题目描述:给定两个长度一样且不超过100的字符串,判断是否能把其中一个字符串的各个字母重排,之后对26个字母做一个一一映射,使得两个字符串相同例如,JWPUDJSTVP重排后可以得到WJD ...

  8. MongoDB：原来我如此简单

    为什么要使用 MongoDB 张三大学毕业设计题目是<XXX博客论坛>,他在存储用户评论的时候遇到了一个问题:这些评论数据量非常大,但是价值不是很大,如果存储在 MySQL 数据库中就会浪 ...

  9. CCF CSP 202012-3 文件配额

    题目背景 小 H 同学发现,他维护的存储系统经常出现有人用机器学习的训练数据把空间占满的问题,十分苦恼. 查找了一阵资料后,他想要在文件系统中开启配额限制,以便能够精确地限制大家在每个目录中最多能使用 ...

  10. Codeforces Round #626 Div2 D,E

    比赛链接: Codeforces Round #626 (Div. 2, based on Moscow Open Olympiad in Informatics) D.Present 题意: 给定大 ...