Dzięki PWA możemy obsłużyć, gdy połączenie urządzenia jest w dół z trybem offline. Ale jak wykryjemy stałą połączenie sieciowe i automatycznie przeładuj / ponownie aktywuj aplikację?

21
Hank Phung 26 czerwiec 2017, 11:59

4 odpowiedzi

Najlepsza odpowiedź

Możesz monitorować offline i online Wydarzenia, które są powszechnie obsługiwane. Ponadto można przetestować łączność, próbując pobrać HEAD z adresu URL serwera docelowego:

// Test this by running the code snippet below and then
// use the "Offline" checkbox in DevTools Network panel

window.addEventListener('online', handleConnection);
window.addEventListener('offline', handleConnection);

function handleConnection() {
  if (navigator.onLine) {
    isReachable(getServerUrl()).then(function(online) {
      if (online) {
        // handle online status
        console.log('online');
      } else {
        console.log('no connectivity');
      }
    });
  } else {
    // handle offline status
    console.log('offline');
  }
}

function isReachable(url) {
  /**
   * Note: fetch() still "succeeds" for 404s on subdirectories,
   * which is ok when only testing for domain reachability.
   *
   * Example:
   *   https://google.com/noexist does not throw
   *   https://noexist.com/noexist does throw
   */
  return fetch(url, { method: 'HEAD', mode: 'no-cors' })
    .then(function(resp) {
      return resp && (resp.ok || resp.type === 'opaque');
    })
    .catch(function(err) {
      console.warn('[conn test failure]:', err);
    });
}

function getServerUrl() {
  return document.getElementById('serverUrl').value || window.location.origin;
}
<fieldset>
  <label>
    <span>Server URL for connectivity test:</span>
    <input id="serverUrl" style="width: 100%">
  </label>
</fieldset>
<script>document.getElementById('serverUrl').value = window.location.origin;</script>

<p>
  <i>Use Network Panel in DevTools to toggle Offline status</i>
</p>

Jeden Technika obsługi tego:

  • Offline Event

    • Pokaż ikonę offline / status
    • Włącz tylko funkcje, które są dostępne w trybie offline (za pomocą danych buforowanych)
  • wydarzenie online

    • Pokaż ikonę online / Status
    • Włącz wszystkie funkcje
46
tony19 26 marzec 2019, 20:03

Większość usług, które widziałem, użyj następującej praktyki: z wzrastającym do określonej limitu czasu, próbując skontaktować się z serwerem. Gdy pojawi się maksymalna wartość limitu czasu, pojawia się wskaźnik z ręcznym przyciskiem recoconekta, który wskazuje, ile czasu wystąpi następna próba ponownego podłączenia

2
layonez 26 czerwiec 2017, 09:10

Wspólną praktyką w PWA jest podążać za Powłoki aplikacji podejście do Twojego podanie. Umożliwiłoby to pamięć skorupę aplikacji przy wejściu, a następnie załadować dane na podstawie połączenia.

Najczęstszą metodą buforowania i służenia w tym podejściu jest służenie z pamięci podręcznej z awarią do sieci, gdzie za każdym razem, gdy żądany zasób nie jest dostępny w pamięci podręcznej, wysyłasz żądanie za pośrednictwem sieci i pamięci podręcznej odpowiedzi. Następnie służyć z pamięci podręcznej.

Pozwala to na bardziej pełen wdzięku degradacji, gdy znajdujesz się w połączeniu, np. W pociągu.

Przykład wdrażania tego:

const cacheName = "my-cache-v1"

self.addEventListener('fetch', (event) => {
  if (event.request.method === 'GET') {
    event.respondWith(
      caches.match(event.request).then((response) => {
        if (response) {
          return response;
        }
        return fetch(event.request).then((response) => {
          return caches.open(cacheName).then((cache) => {
            cache.put(event.request.url, response.clone());
            return response;
          });
        });
      })
    );
  }
});

W powyższym przykładzie (tylko jeden z wymaganych kroków w Pracownik serwisowy cykl życia), musiałbyś także usunąć nieaktualne wpisy pamięci podręcznej.

3
LeonH 23 luty 2018, 13:31

Uważaj za zdarzenie online, które tylko mówi tylko urządzenie, jeśli jest podłączony. Można go podłączyć do hotspotu WiFi bez rzeczywistej łączności internetowej (z powodu poświadczeń na przykład).

19
Nicolas Hoizey 4 lipiec 2017, 15:24