This package has been deprecated

    Author message:

    This component is deprecated

    TypeScript icon, indicating that this package has built-in type declarations

    3.0.0 • Public • Published

    Published on NPM

    Build Status

    Published on


    An element that detects online/offline states and informs about it other compopnents.

    Checking conectivity in browser is a bit tricky task. Browser vendors can't agree on what the online/offline status means and therefore even if the browser says that it has a connection in reality it may not be connected to the internet. However it may have LAN access.

    Note: You can be sure that if the status is offline then the browser is offline. But when the status is onLine it may mean that there is a network connection but there's no internet connection (and therefore you are offline for the outside world).

    In the element, if the online attribute is set to false the app is offline but when it's set to true it probably is online but may not have access to the internet.


    In a Polymer template

    <connectivity-state online="{{isOnline}}"></connectivity-state>

    In a LitElement template

    import { LitElement, html } from 'lit-element';
    import '@advanced-rest-client/connectivity-state/connectivity-state.js';
    class SampleElement extends LitElement {
      render() {
        return html`
        <connectivity-state @change="${this._connectivityHandler}"></connectivity-state>
      _connectivityHandler(e) {
        const { online } =;
        console.log(`You are now ${online ? 'connected to' : 'dosconnected from'} the interent.`);
    customElements.define('sample-element', SampleElement);

    Imperative use

    <script type="module" src="@advanced-rest-client/connectivity-state/connectivity-state.js"></script>
      document.querySelector('connectivity-state').onchange = (e) => {
        const { online } =;
        console.log(`You are now ${online ? 'connected to' : 'dosconnected from'} the interent.`);

    New in version 3

    • Dropped support for Polymer library. It is now a plain web component.
    • Added aria-hidden attribute
    • Deprecating online-changed event. Use change event instead. This event is kept for compatibility with Polymer.


    git clone
    cd connectivity-state
    npm install

    Running the demo locally

    npm start

    Running the tests

    npm test


    npm i @advanced-rest-client/connectivity-state

    DownloadsWeekly Downloads






    Unpacked Size

    38.8 kB

    Total Files


    Last publish


    • carowright
    • jarrodek
    • twoplustwoone
    • lbauret