Les développeurs Web doivent souvent faire face à divers besoins des chefs de produit dans le développement du système. Bien sûr, la plupart d'entre eux sont toujours utiles à l'expérience du produit. Par exemple, lorsque nous avons mentionné aujourd'hui, actualisez la page, vers l'avant et vers l'arrière, et fermez la balise du navigateur, afin d'éviter une mauvaise opération des utilisateurs, une boîte d'invite de confirmation secondaire est requise. Je crois que tout le monde le connaît très bien. L'utilisation du mécanisme d'événements BOM fournie par le navigateur peut le résoudre. Vous pouvez utiliser l'événement OnBeforeUnload de l'objet Window. Si le chef de produit ne fait qu'une telle demande, il est en effet compréhensible, mais cela nécessite plus que ceux-ci ...
Par exemple, lors d'un développement de projet, le chef de produit a proposé un «plan d'amélioration» pour notre mise en œuvre:
Votre boîte contextuelle est trop laide, elle ne correspond pas au style général du système. Vous ne pouvez pas utiliser la boîte de dialogue dans notre propre bibliothèque de composants? Très bonne question ... Je veux juste dire, tu peux toi ...
Votre rafraîchissement est le même que la fermeture de la copie affichée dans la page onglet. Vous devez le traiter différemment. Actualisez l'invite XXX et SSS lors de la fermeture, afin que l'utilisateur puisse être plus clair. Eh bien, compte tenu de l'expérience utilisateur, c'est très bien. Je veux toujours dire que vous pouvez vous en hausse ... en fait, lorsque le navigateur se ferme et se rafraîchit, il a été traité différemment. Les invites sont différentes, mais nos pièces personnalisées ne peuvent pas afficher des copywriting différent; Bien sûr, il existe également certaines méthodes de piratage, mais il est difficile de s'adapter à plusieurs navigateurs. Les mécanismes de mise en œuvre des onglets de fermeture et des rafraîchissements au sein de chaque navigateur seront différents;
Pourquoi avez-vous besoin de retarder 10 secondes pour que l'agent s'y enregistre dans le système téléphonique chaque fois que vous vous connectez? Cette limite peut-elle être supprimée? L'expérience utilisateur est trop mauvaise! Nous voulons également le supprimer, mais il y aura des problèmes avec l'enregistrement fréquent et le système téléphonique. L'utilisateur actualise le navigateur et vérifie à nouveau. Si l'intervalle est court, le système téléphonique échouera. Afin d'éviter ce problème, nous avons ajouté cette restriction, mais si nous réfléchissons, nous pouvons saisir le sujet dont nous discutons aujourd'hui;
Différencier les onglets rafraîchissants et de fermeture
Nous ne pouvons pas distinguer de rafraîchir ou de fermer la page d'onglet en fonction de l'événement du navigateur, puis d'effectuer différentes actions avant que l'action correspondante ne soit déclenchée. Cependant, pour le troisième avis soulevé par le produit ci-dessus, nous pouvons en fait envisager de l'optimiser, ce qui ne retarde que 10 secondes lorsqu'il est rafraîchissant, et ne retarde pas lors de la connexion nouvelle ou ferme la page onglet après une période de temps;
Il est en fait très simple de le faire. Vous pouvez utiliser le mécanisme de stockage local du navigateur, tels que les cookies, LocalStorage, etc. Vous ne pouvez pas utiliser SessionStorage ici, car après cette réponse, le cache ne sera pas valide. Étant donné que le stockage dans le cookie augmentera le nombre d'octets, la transmission de réseau correspondante dans chaque demande augmentera, nous utilisons LocalStorage; Son fonctionnement est très simple, et le cadre frontal que nous utilisons est AngularJS, qui est la suivante:
const max_wait_time = 10; const CurrentDate = new Date (). GetTime (); const laistleVeVeTime = paSeInt (this. $ window.localstorage.getItem ('LastestleVeTime'), 10) || CurrentDate; this.secondcounter = math.max (max_wait_time - math.ceil ((currentDate - LastLeaveTime) / 1000), 0); if (this.secondcounter> 0) {this.logouttimeinterval = this. $ interal (() => {this.secondcounter -; this. $ Scope. this.secondcounter, false) .then (() => {this.updatebystatus (this.avayaservice.status.offline);});} else {this.updatebystatus (this.avayaservice.status.offline);}La fonction principale du code ci-dessus est qu'après être entré dans le système, il ira d'abord sur LocalStorage pour obtenir l'heure de la dernière sortie, puis obtenir l'heure actuelle et soustraire les deux fois. Si la valeur est inférieure à 10 secondes, nous pensons qu'il s'agit d'un rafraîchissement. Si la valeur est supérieure à 10 secondes, nous pensons qu'il s'agit de fermer l'onglet ou de se connecter, puis nous pouvons exécuter différentes méthodes pour offrir une meilleure expérience du service client. Il n'est pas nécessaire d'attendre 10 secondes pour chaque entrée dans le système avant de vous enregistrer dans le système téléphonique. Le chef de produit est toujours très important. Huh, si ce n'était pas pour ses doutes, nous ne serons peut-être pas venus d'optimiser cet endroit ... bien sûr, RD devrait d'abord cultiver cette réflexion de la réflexion à l'utilisateur. Même s'il y a un peu qui peut améliorer l'efficacité du service client, cela vaut notre temps d'optimiser;
Postons le code de sortie pertinent ci-dessous. J'ai oublié de dire avant qu'il soit rafraîchissant ou ferme la page d'onglet, tant que la page est détruite, nous effectuerons le fonctionnement de la sortie du système téléphonique, nous devons donc nous enregistrer à chaque fois que nous entrons;
// actualisez la page ou fermez la page $ window.onbeforeunLoad = () => {return 'L'opération entraînera effacer les données de la page, veuillez faire attention ...';}; // Chaque fois que la page de la page est déchargée, définissez l'heure locale; $ window.onUnload = () => {$ window.localstorage.setItem ('lastestleVeTime', new Date (). GetTime ());};Nous pouvons également remarquer certains problèmes, c'est-à-dire, rafraîchir, fermer la page, vers l'avant et vers l'arrière, vous devez sauter de la boîte de confirmation secondaire par défaut du navigateur, mais si l'utilisateur clique sur le bouton Système de sortie, la boîte de dialogue dans sa bibliothèque de composants doit apparaître et ne doit pas apparaître. Le code spécifique est le suivant:
OnStatusClick (index, name) {if (name === 'exit') {this.mgDialog.OpenConfirm ({showClose: false, `` Template: 'app / header / logoutDialog.html', contrôleur: ' => {this. $ window.location.href = '/logout' ;this.$window.onbeforeunload = null;});} else {// opérations internes, tout le monde n'a pas à s'inquiéter de ...}}Ce qui précède est le contenu entier de JS que l'éditeur vous présente pour distinguer si la page du navigateur est actualisée ou fermée. J'espère que ce sera utile à tous!