Comment détecter le statut hors ligne/en ligne avec JavaScript

La technologie de navigation hors ligne est devenue de plus en plus populaire au cours des deux dernières années. La plus courante est celle des applications mobiles HTML5, et de nombreuses applications Web ordinaires utilisent également ces technologies. Cependant, l'émergence de nouvelles technologies apporte parfois des problèmes supplémentaires à nous, développeurs WEB. Par exemple, comment déterminer si l'utilisateur est en ligne ou hors ligne ? Heureusement, là où il y a une lance, il y a un bouclier. L'objet navigator en JavaScript nous aide à résoudre ce problème.

Recommandations d'apprentissage associées : tutoriel vidéo javascript

navigator.onLine

navigator.onLine l'attribut peut nous fournir un booléen Valeur, utilisée pour déterminer si l'utilisateur est connecté à Internet. Vous pouvez y accéder comme ceci :

if(navigator.onLine) { // true|false
	// ...
}

Il n’y a rien de plus simple que ça !

Événement

En plus de détecter cette valeur d'attribut hors ligne/en ligne, nous pouvons également lier les événements offline et online :

function updateIndicator() {
	// 这时可以根据offline/online按钮的颜色
}

// 根据网络连接情况更新在线状态
window.addEventListener('online',  updateIndicator);
window.addEventListener('offline', updateIndicator);
updateIndicator();

Bien sûr, ancien- technologie scolaire Des méthodes correspondantes sont également fournies ici, en utilisant les méthodes body et ononline sur la balise onoffline.

Je peux imaginer de nombreux endroits où ces événements et propriétés seraient nécessaires. Par exemple, lorsque l'utilisateur travaille et que le réseau est déconnecté, si notre application WEB peut détecter cet état, les écrits de l'utilisateur peuvent être enregistrés dans le stockage Web local, puis soumis au serveur une fois le réseau restauré. De cette manière, la déconnexion n'affectera pas l'écriture de l'utilisateur. Ceci n'est qu'un exemple simple, je pense que vous pouvez en trouver d'autres.

Il est à noter que cette API n'est pas si fiable que ça. La technologie d'actualisation planifiée la plus ancienne peut être utilisée comme enregistrement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!