Suppression de page améliorée dans XMLHttpRequest synchrone ()

Es común que una página o aplicación tenga análisis u otros datos sin enviar en el momento en que un Nom d'utilisateur 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 serveur. No solo existen mejores formas de guardar datos, sino que esta técnica crea una mala expérience utilisateur al retrasar el cierre de la página hasta varios segundos.

Esta práctica debe cambiar y los navigateurs están respondiendo. los XMLHttpRequest ()
la spécification est déjà désapprobation et suppression programmées. Chrome 80 fait le premier pas en n'autorisant pas les appels synchrones dans divers gestionnaires d'événements, en particulier avant de décharger, décharger, masquer la pagey changement de visibilité quand ils sont licenciés en cas de mise à pied. WebKit a également récemment atterri un engagement qui met en œuvre le même changement de comportement.

Dans cet article, je décrirai brièvement les options pour ceux qui ont besoin de temps pour mettre à jour leurs sites et décrirai les alternatives pour XMLHttpRequest ().

Exclusions temporaires

Chrome ne veut pas seulement se déconnecter XMLHttpRequest (), c'est pourquoi certaines options de désinscription sont disponibles. Pour les sites sur Internet, une preuve d'origine est disponible. Con esto, agrega un token específico de origen a los en-têtes de su página que habilita la sincronización XMLHttpRequest () appels. Cette option prend fin peu de temps avant le lancement de Chrome 89, en mars 2021. Les clients Chrome Enterprise peuvent également utiliser AllowSyncXHRInPageDismissal indicateur de stratégie, qui se termine en même temps.

Des alternatives

Quelle que soit la façon dont vous envoyez les données au serveur, il est préférable d'éviter d'attendre le téléchargement de la page pour envoyer toutes les données en même temps. En plus de créer une mauvaise expérience utilisateur, vous risquez de perdre des données en cas de problème. Télécharger les événements souvent non activé sur les navigateurs mobiles
parce que là de nombreuses façons de fermer una pestaña o le navigateur en sistemas operativos móviles sin la décharger un événement de disparo. Con
XMLHttpRequest (), l'utilisation de petites charges utiles était un choix. Maintenant, c'est une exigence. Les deux alternatives ont une limite de téléchargement de 64 Ko par contexte, comme requis par la spécification.

Obtenez Keepalive

Les Obtenir l'API
fournit un moyen robuste de gérer les interactions avec le serveur et une interface cohérente para su uso en diferentes API de plataforma. Entre sus opciones esta rester en vie, qui garantit qu'une demande se poursuit indépendamment du fait que la page qui l'a effectuée reste ouverte ou non:

la fenêtre.addEventListener('unload', {
  aller chercher('/siteAnalytics', {
    méthode: 'POST',
    corps: getStatistics(),
    rester en vie: vrai
  });
}

Les aller chercher () La méthode a l'avantage de mieux contrôler ce qui est envoyé au serveur. Ce que je ne montre pas dans l'exemple, c'est que aller chercher () renvoie également une promesse qui est résolue avec un Réponse objet. Puisque j'essaie d'empêcher le téléchargement de la page, j'ai choisi de ne rien faire avec.

EnvoyerBeacon ()

EnvoyerBeacon ()

il utilise en fait l'API Fetch sous le capot, c'est pourquoi il a la même limitation de charge utile de 64 Ko et pourquoi il garantit également qu'une requête se poursuit après le téléchargement d'une page. Son principal avantage est sa simplicité. Il vous permet de soumettre vos données avec une seule ligne de code:

la fenêtre.addEventListener('unload', {
navigateur.sendBeacon('/siteAnalytics', getStatistics());
}

conclusion

Avec lui une plus grande disponibilité de
aller chercher ()

dans les navigateurs, XMLHttpRequest () Con suerte, se eliminará de la plataforma la toile 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.

photo par Matthew Hamilton au Unsplash