Verbesserte Seitenentfernung in synchronem XMLHttpRequest ()

Es común que una página o aplicación tenga análisis u otros datos sin enviar en el momento en que un Nutzername la cierra. Para evitar la pérdida de datos, algunos sitios utilizan una llamada sincrónica para XMLHttpRequest () para mantener la página o aplicación abierta hasta que sus datos se pasen al Server. No solo existen mejores formas de guardar datos, sino que esta técnica crea una mala Benutzererfahrung al retrasar el cierre de la página hasta varios segundos.

Esta práctica debe cambiar y los Browser están respondiendo. los XMLHttpRequest ()
Die Spezifikation ist bereits für Missbilligung und Entfernung geplant. Chrome 80 unternimmt den ersten Schritt, indem es keine synchronen Aufrufe innerhalb verschiedener Ereignishandler zulässt vor dem Entladen, entladen, Pagehidey Sichtbarkeitsänderung wenn sie auf Entlassung gefeuert werden. WebKit ist auch kürzlich gelandet eine Verpflichtung, die die gleiche Verhaltensänderung implementiert.

In diesem Artikel werde ich kurz die Optionen für diejenigen beschreiben, die Zeit benötigen, um ihre Websites zu aktualisieren, und die Alternativen für beschreiben XMLHttpRequest ().

Vorübergehende Ausschlüsse

Chrome möchte nicht nur die Verbindung trennen XMLHttpRequest ()Aus diesem Grund stehen einige Opt-out-Optionen zur Verfügung. Für Websites im Internet Ein Herkunftsnachweis liegt vor. Con esto, agrega un token específico de origen a los Überschriften de su página que habilita la sincronización XMLHttpRequest () Anrufe. Diese Option endet kurz vor dem Start von Chrome 89, irgendwann im März 2021. Enterprise Chrome-Kunden können sie auch verwenden AllowSyncXHRInPageDismissal Richtlinienflag, das gleichzeitig endet.

Alternativen

Unabhängig davon, wie Sie die Daten an den Server senden, sollten Sie nicht darauf warten, dass die Seite heruntergeladen wird, um alle Daten auf einmal zu senden. Sie können nicht nur eine schlechte Benutzererfahrung erzielen, sondern auch Daten verlieren, wenn etwas schief geht. Laden Sie Ereignisse herunter oft nicht in mobilen Browsern aktiviert
weil da viele Möglichkeiten zu schließen una pestaña o Browser en sistemas operativos móviles sin la entladen Veranstaltung de disparo. Con
XMLHttpRequest ()Die Verwendung kleiner Nutzlasten war eine Wahl. Jetzt ist es eine Voraussetzung. Beide Alternativen haben ein Upload-Limit von 64 KB pro Kontext, wie in der Spezifikation vorgeschrieben.

Holen Sie sich Keepalive

das API abrufen
bietet ein robustes Mittel zur Handhabung von Interaktionen mit dem Server und eine konsistente Schnittstelle para su uso en diferentes API de plataforma. Entre sus opciones esta bleib am Leben, wodurch sichergestellt wird, dass eine Anforderung fortgesetzt wird, unabhängig davon, ob die Seite, auf der sie erstellt wurde, geöffnet bleibt oder nicht:

Fenster.addEventListener('unload', {
  holen('/siteAnalytics', {
    Methode: 'POST',
    Körper: getStatistics(),
    bleib am Leben: wahr
  });
}

das fetch () Die Methode bietet den Vorteil einer besseren Kontrolle darüber, was an den Server gesendet wird. Was ich im Beispiel nicht zeige, ist das fetch () gibt auch ein Versprechen zurück, das mit a gelöst wird Antwort Objekt. Da ich versuche, das Herunterladen der Seite zu verhindern, habe ich beschlossen, nichts damit zu tun.

SendBeacon ()

SendBeacon ()

Tatsächlich wird die Fetch-API unter der Haube verwendet, weshalb dieselbe Nutzlastbeschränkung von 64 KB gilt und auch sichergestellt wird, dass eine Anforderung nach dem Herunterladen einer Seite fortgesetzt wird. Sein Hauptvorteil ist seine Einfachheit. Sie können Ihre Daten mit einer einzigen Codezeile übermitteln:

Fenster.addEventListener('unload', {
Navigator.sendBeacon('/siteAnalytics', getStatistics());
}

Fazit

Mit dem größere Verfügbarkeit von
fetch ()

in Browsern, XMLHttpRequest () Con suerte, se eliminará de la plataforma Netz en algún momento. Los proveedores de navegadores están de acuerdo en que debería eliminarse, pero llevará tiempo. Dejar de lado uno de sus peores casos de uso es un primer paso que mejora la experiencia del usuario para todos.

Foto von Matthew Hamilton im Unsplash