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. 3分钟搞懂什么是WPF。

    先推荐下猛哥(刘铁猛)的书籍  <深入浅出WPF>. 一直以来,完美的用户体验是桌面应用程序和Web应用程序中的一大障碍.许多开发人员绞尽脑汁将界面设计得美观炫丽些.互 动感强些,但费了九 ...

  2. Webpack4.0各个击破（10）integration篇

    一. Integration 下文摘自webpack中文网: 首先我们要消除一个常见的误解,webpack是一个模块打包工具(module bundler),它不是一个任务执行工具,任务执行器是用来自 ...

  3. SpringCloud-常用组件介绍

    SpringCloud-常用组件介绍 分布式系统开发用于分布式环境(多个服务器不在同一个机房,同一个业务服务在多台服务器运行) Spring Cloud 是基于Springboot的分布式云服务架构, ...

  4. Excel三个下拉互斥

    Excel三个下拉互斥 描述:Excel有三个下拉列表,若选择了其中任意一个下拉,其他两个均不可以在选择. 尝试了很多种办法,级联,数据有效性等等,最后都没实现. 老大,最后用VBA实现. 附上代码: ...

  5. GeoServer发布Shapfile、PostGIS数据

    GeoServer发布Shapfile.PostGIS数据 一.GeoServer发布Shapfile数据 1.1 创建工作区 1.1.1 工作区 1.2 在工作区中加入新的数据存储 1.2.1 数据 ...

  6. centos7 快速搭建redis集群环境

    本文主要是记录一下快速搭建redis集群环境的方式. 环境简介:centos 7  + redis-3.2.4 本次用两个服务6个节点来搭建:192.168.116.120  和  192.168.1 ...

  7. Spring Boot：定时任务与图片压缩处理

    一.定时任务 1.创建定时任务 2.@Scheduled 二.图片压缩处理 1.添加thumbnailator依赖 2.创建图片处理类 3.基本使用方法 一.定时任务 项目中可以采用定时任务进行一些操 ...

  8. C语言--指针数组大小

    #include <stdio.h> #include <string.h> int main(void) { char *str[3]={ "Hello,thisi ...

  9. Redis 实战 —— 14. Redis 的 Lua 脚本编程

    简介 Redis 从 2.6 版本开始引入使用 Lua 编程语言进行的服务器端脚本编程功能,这个功能可以让用户直接在 Redis 内部执行各种操作,从而达到简化代码并提高性能的作用. P248 在不编 ...

  10. HttpRunner（1）自我介绍

    前言 首先,我们无论学习哪个框架,都要带着问题,带着思考去学习 思考1:HttpRunner是什么? 思考2:HttpRunner的设计模式是什么? 思考3:为什么我们要学习HttpRunner?他的 ...