web-dev-qa-db-fra.com

Progressive Web App: comment détecter et gérer lorsque la connexion est rétablie

Avec un PWA, nous pouvons gérer lorsque la connexion de l'appareil est interrompue avec le mode hors ligne. Mais comment détecter une connexion réseau fixe et recharger/réactiver automatiquement l'application?

javascriptprogressive-web-appsofflineapps
14
Hank Phung

Vous pouvez surveiller les événements offline et online , qui sont largement pris en charge . De plus, vous pouvez tester la connectivité en tentant de récupérer HEAD à partir de l'URL du serveur cible:

// 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>

Un technique pour gérer cela:

  • Événement hors ligne

    • afficher l'icône/l'état hors ligne
    • activer uniquement les fonctionnalités disponibles hors connexion (via les données mises en cache)

  • Événement en ligne

    • afficher l'icône/le statut en ligne
    • activer toutes les fonctionnalités
38
tony19

Soyez prudent avec l'événement online, qui indique uniquement au périphérique s'il est connecté. Il peut être connecté à un hotspot WiFi sans véritable connectivité Internet (en raison des informations d'identification par exemple).

18
Nicolas Hoizey

Une pratique courante dans les PWA est de suivre l'approche Application Shell de votre application. Cela vous permettrait de mettre en cache le shell d'application à l'entrée, puis de charger les données en fonction de la connexion.

La méthode la plus courante pour mettre en cache et servir dans cette approche consiste à servir du cache avec repli sur le réseau, où chaque fois que la ressource demandée n'est pas disponible dans le cache, vous envoyez la demande via le réseau et mettez en cache la réponse. Servez ensuite à partir du cache.

Cela permet une dégradation plus gracieuse lorsque vous êtes sur une connexion inégale, comme dans le train.

Un exemple de mise en œuvre de ceci:

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;
          });
        });
      })
    );
  }
});

Dans l'exemple ci-dessus (une seule des étapes requises dans un cycle de vie Service Worker ), vous devez également supprimer les entrées de cache obsolètes.

3
LeonH

La plupart des services que j'ai vus utilisent la pratique suivante: avec une augmentation à un certain délai d'expiration, en essayant de contacter le serveur. Lorsque la valeur de délai maximal est atteinte, un indicateur avec un bouton de reconnexion manuelle apparaît qui indique dans combien de temps la prochaine tentative de reconnexion se produira

2
layonez