Η αποσύνδεση MatDialog δεν λειτουργεί σε προγράμματα περιήγησης για κινητά

ψήφοι
10

Θέλω να ειδοποιήσω τον χρήστη εάν είναι αδρανής για 20 λεπτά. Έτσι, δημιούργησα μια υπηρεσία.

Λειτουργεί καλά με επιτραπέζιο υπολογιστή, αλλά σε κινητό τηλέφωνο δεν εμφανίζεται και μερικές φορές αν η οθόνη παραμείνει στο παρασκήνιο για μερικές ώρες, τότε η οθόνη διαλόγου αποσύνδεσης ξεκίνησε την αντίστροφη μέτρηση μόλις μπήκα ξανά στη σελίδα.

Θέλω να πω ότι πρέπει να αποσυνδεθεί και θα πρέπει να βλέπω τη σελίδα σύνδεσης, αλλά εδώ δείχνει τη σελίδα αντίστροφης μέτρησης αποσύνδεσης μετά από μερικές ώρες αλλιώς δεν εμφανίζεται στο πρόγραμμα περιήγησης για κινητά.

Εδώ είναι ο κωδικός μου παρακαλώ επιτρέψτε μου να ξέρω ποια λογική μου λείπει.

Εδώ είναι το αρχείο Service.ts. Ο έλεγχος () θα καλείται για κάθε 5 δευτερόλεπτα και η ειδοποίηση αποσύνδεσης θα εμφανίζεται σε 20 δευτερόλεπτα ...

const MINUTES_UNITL_AUTO_LOGOUT = 0.2; // 1 mins- 20
const CHECK_INTERVAL = 5000; // checks every 5 secs- 5000

@Injectable({
  providedIn: root,
})
export class AutoLogoutService {
  logOutInterval: any;

  constructor(
    private localStorage: LocalStoreManager,
    private authService: AuthService,
    public dialog: MatDialog
  ) {
    this.localStorage.savePermanentData(
      Date.now().toString().toString(),
      DBkeys.AUTO_LOGOUT
    );
    this.initListener();
  }

  initListener() {
    document.body.addEventListener(click, () => this.reset());
    document.body.addEventListener(mouseover, () => this.reset());
    document.body.addEventListener(mouseout, () => this.reset());
    document.body.addEventListener(keydown, () => this.reset());
    document.body.addEventListener(keyup, () => this.reset());
    document.body.addEventListener(keypress, () => this.reset());
  }

  reset() {
    this.setLastAction(Date.now());
  }

  initInterval() {
    this.logOutInterval = setInterval(() => {
      this.check();
    }, CHECK_INTERVAL);
  }
  clearInterval() {
    clearInterval(this.logOutInterval);
  }

  check() {
    const now = Date.now();
    const timeleft = this.getLastAction() + MINUTES_UNITL_AUTO_LOGOUT * 60 * 1000;
    const diff = timeleft - now;
    const isTimeout = diff < 0;
    console.log(diff);
    if (isTimeout && !this.authService.isLogoutDialogOpenned) {
      this.authService.isLogoutDialogOpenned = true;
      this.dialog
        .open(LogoutDialog, {
          maxWidth: 100vw,
        })
        .afterClosed()
        .subscribe((result) => {
          this.authService.isLogoutDialogOpenned = false;
        });
    }
  }

  public getLastAction() {
    return parseInt(this.localStorage.getData(DBkeys.AUTO_LOGOUT));
  }

  public setLastAction(lastAction: number) {
    this.localStorage.savePermanentData(
      lastAction.toString(),
      DBkeys.AUTO_LOGOUT
    );
  }
}
Δημοσιεύθηκε 15/05/2020 στις 13:34
πηγή χρήστη
Σε άλλες γλώσσες...                            


2 απαντήσεις

ψήφοι
0

Πιστεύω στο κινητό, όταν ο χρήστης ελαχιστοποιεί το πρόγραμμα περιήγησης, η λογική σας σταματά να εκτελείται καθώς τα κινητά τηλέφωνα σκοτώνουν αυτόματα την εφαρμογή φόντου για διαχείριση ram και όταν επανατοποθετεί το πρόγραμμα περιήγησης το σενάριό σας ξεκινά ξανά. Θα πρέπει επίσης να αποσυνδεθείτε από την καταστροφή ή το συμβάν window.beforeunload.

Απαντήθηκε 23/05/2020 στις 09:56
πηγή χρήστη

ψήφοι
0

Ευχαριστώ για τις προτάσεις, αλλά η παρακάτω λύση λειτούργησε για μένα

Χρησιμοποιήθηκε ngZone όπου εκτελείται στο παρασκήνιο

initInterval() {
    this.ngZone.runOutsideAngular(() => {
      this.logOutInterval = setInterval(() => {
        this.check();
      }, CHECK_INTERVAL);
    })
  }
  clearInterval() {
    clearInterval(this.logOutInterval);
  }

  check() {
    const now = Date.now();
    const timeleft =
      this.getLastAction() + MINUTES_UNITL_AUTO_LOGOUT * 60 * 1000;
    const diff = timeleft - now;
    const isTimeout = diff < 0;
    const isBackgroundLogoutEnabled = diff < -ONE_MINUTE;

    this.ngZone.run(() => {
      if (isTimeout && !this.authService.isLogoutDialogOpenned) {
        this.authService.isLogoutDialogOpenned = true;
        this.dialog
          .open(LogoutDialog, {
            maxWidth: "100vw",
          })
          .afterClosed()
          .subscribe((result) => {
            this.authService.isLogoutDialogOpenned = false;
          });
      }
      if(isBackgroundLogoutEnabled){
        this.clearInterval();
        this.authService.isLogoutDialogOpenned = false;
        this.authService.logout();
        this.authService.redirectLogoutUser();
        this.dialog.closeAll();
      }
    });
  }
Απαντήθηκε 26/05/2020 στις 15:58
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more