README
connectivity-state
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.
Example
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 } = e.target;
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>
<connectivity-state></connectivity-state>
<script>
{
document.querySelector('connectivity-state').onchange = (e) => {
const { online } = e.target;
console.log(`You are now ${online ? 'connected to' : 'dosconnected from'} the interent.`);
};
}
</script>
New in version 3
- Dropped support for Polymer library. It is now a plain web component.
- Added
aria-hidden
attribute - Deprecating
online-changed
event. Usechange
event instead. This event is kept for compatibility with Polymer.
Development
git clone https://github.com/@advanced-rest-client/connectivity-state
cd connectivity-state
npm install
Running the demo locally
npm start
Running the tests
npm test