Przed daje rozwiązanie Chciałem tylko zwrócić uwagę na problemy z przeglądarką warunkiem jest nieaktywny-flag
nieaktywny flag innej przeglądarki zawiera różnych meanging
się. w przypadku niektórych przeglądarek oznacza to, że nie ma dostępu do Internetu
b. w przypadku niektórych przeglądarek oznacza to, że intranet nie istnieje. niektóre przeglądarki dopuszczają tryb offline, więc nawet jeśli nie ma internetu, w rzeczywistości nie jesteś offline.
nie wszystkie przeglądarki obsługują niedostępny w spójny sposób
Kolejny problem miałem z użyciem flagi oparciu przeglądarka jest scenariusz rozwoju, gdzie posiadające internet nie jest to konieczne, a które nie powinny wywołać tryb offline (dla ja blokuję wszelką interakcję z użytkownikiem Jeśli moja witryna przejdzie w tryb offline). Możesz rozwiązać ten problem, dodając inny wskaźnik informujący o tym, czy jesteś w dev/prod, itp.
I najbardziej imp., Dlaczego zależy nam na sprawdzeniu, czy przeglądarka znajduje się w trybie offline, ponieważ dbamy tylko o to, nasza strona internetowa jest osiągalna lub nie, nie obchodzi nas, czy internet jest tam, czy nie. Nawet jeśli przeglądarka mówi nam, że jest offline, nie jest to dokładnie to, czego chcemy. istnieje niewielka różnica między tym, co chcemy, a tym, co zapewnia przeglądarka.
Więc biorąc pod uwagę wszystkie wyżej, mam rozwiązać ten problem przy użyciu dyrektywy offline, który używam do blokowania interakcji użytkownika, jeśli użytkownik nie jest zalogowany
csapp.directive('csOffline', ["$http", '$interval', "$timeout", "$modal", function ($http, $interval, $timeout, $modal) {
var linkFn = function (scope) {
scope.interval = 10; //seconds
var checkConnection = function() {
$http({
method: 'HEAD',
url: document.location.pathname + "?rand=" + Math.floor((1 + Math.random()) * 0x10000)
})
.then(function (response) {
$scope.isOnline = true;
}).catch(function() {
$scope.isOnline = false;
});
};
scope.isOnline = true;
$interval(checkConnection, scope.interval * 1000);
scope.$watch('isOnline', function (newVal) {
console.log("isOnline: ", newVal);
//custom logic here
});
};
return {
scope: {},
restrict: 'E',
link: linkFn,
};
}]);
miałem zamiar użyć offline.js było zbyt dużo i większość z nich nie potrzebowałem, więc jest to rozwiązanie, które wymyśliłem, które jest wyłącznie w angular.js.
należy zauważyć, że przechwytywacz HTTP jest wywoływany podczas tych wywołań, chciałem tego uniknąć, dlatego użyłem $.ajax dla połączeń
$.ajax({
type: "HEAD",
url: document.location.pathname + "?rand=" + Math.floor((1 + Math.random()) * 0x10000),
contentType: "application/json",
error: function() {
scope.isOnline = false;
},
success: function (data, textStatus, xhr) {
var status = xhr.status;
scope.isOnline = status >= 200 && status < 300 || status === 304;
}
}
);
można wymienić logikę wewnątrz isOnline prawda/fałsz, ze cokolwiek zwyczaj logiki chcesz.
O wsparciu: http://caniuse.com/#search=onLine –
Tak, należy sprawdzanie kodów stanu HTTP, ale nie koniecznie dla statusu 0. Sprawdź poprawne zakresy kodów. Zobacz http://stackoverflow.com/questions/23851424/how-to-detect-when-online-offline-status-changes. – user2943490