0.3.0 • Published 5 years ago
wcomponent-check-connexion v0.3.0
Web Component - Check Connexion
Installation
run this in your work directory
npm i wcomponent-check-connexion
You can pick one of three directory according of the use you want :
dist-src
: ES2018 filedist-web
: ESM distribution optimized for browsers & bundlers
include the package with in html files :
<script src="node_modules/wcomponent-check-connexion/dist-web/index.min.js" async></script>
or in js ESM files :
import CheckConnexion from "wcomponent-check-connexion/dist-src/index.min";
Use
add <check-connexion></check-connexion>
anywhere in your html file.
This web component allow your users to know if they are connected to internet with a message, and the application can catch an event called connexion-changed
fired in document
to check user's connexion.
The event can be catch with something like that :
document.addEventListener('connexion-changed', ({detail}) => {
//detail contains a bool wich is indicating the state of the connexion
//do wathever you want with it
})
there is some parameters you can add :
timeToCount
: number (3), the number of test you'll make before deciding your user have a slow connexion,threshold
: number (2000), max duration (ms) for the average of test's duration,offlineTimeout
: number (2000), duration (ms) before the application pass offline,message
: text ("Disconnected"), the message you want to display when the app is offline,intervalCheckLatency
: number (6000), the interval (ms) between each connexion test
example:
<check-connexion
timeToCount="5"
threshold="1000"
offlineTimeout="1000"
message="You aren't connected"
intervalCheckLatency="2000"
>
</check-connexion>