JoseJPR/tutorial-navigator-network-connection

📡Check with JavaScript the status of the network connection from your web application and show the user a personalized message.

Tutorial JavaScript Navigator Network Connection

📡Check with JavaScript the status of the network connection from your web application and show the user a personalized message.

📐 How to work with this project

1️⃣ Installation

npm i

2️⃣ Run

npm run start

3️⃣ Usage

Open: http://localhost:3000

🎮 How to include and work with this library in your project?

1️⃣ Include the library in your project.

Copy the "check-connection.js" file into your project.

2️⃣ Create a new js file, for example "app.js" and add the following lines:

import checkConnection from './check-connection.js';

window.addEventListener("load", () => {
  /**
   * This Example show how you can create a new instance of checkConnection class
   * for show top banner with #contentMessage id and with a delay for hide in 1000 milliseconds.
   */
  const instanceCheckConnection = new checkConnection(
    'contentMessage',
    '✅ The network connection has been restored',
    '🚫 The network connection has been lost',
    1000
  );
  // Active for show top banner if the connection change.
  instanceCheckConnection.active();
  /**
   * You can desactive this component with the next line:
   * instanceCheckConnection.desactive();
   */ 
});

3️⃣ Add the reference to your js file in your html file, for example "app.js" (it is important to add it as a module):

<script type="module" src="js/app.js"></script>

📂 Code Scaffolding

/
├── assets 🌈                   # Images Sources.
├── src 📦                      # Express Server Application.
├── public 👀                   # Front Demo Application.
|   ├── style                   # Style CSS sources.
|   ├── js                      # JS file library and example.
|   └── ...
└── ...

📌 More Info

Mozilla Developers Navigator.onLine
W3C The Network Information API

⛽️ Review and Update Dependencies

To review and update all of this project's npm dependencies you will need to install globally the "npm-check-updates" package.

# Install and Run
$npm i -g npm-check-updates
$ncu

License

MIT

Happy Code

Created with JavaScript, lot of ❤️ and a few ☕️

This README.md file has been written keeping in mind

GitHub Markdown
Emoji Cheat Sheet