Dall'archivio script > HTML5

Recuperare informazioni sul browser con Angular CDK

di Stefano MostardaStefano Mostarda, in HTML5, Angular,

La libreria Angular CDK permette di avere informazioni sul browser su cui sta girando l'applicazione come il tipo di browser e se alcune funzionalità sono supportate. Questo è possibile grazie alla classe Platform e ai metodi getSupportedInputTypes, supportsPassiveEventListeners e supportsScrollBehavior tutti importati dal modulo @angular/cdk/platform.

La classe ci offre le informazioni sul tipo di browser, mentre i metodi rispettivamente dicono quali sono i tipi di input supportati, se sono supportati gli event listener passivi (ottimali per migliorare le prestazioni dello scrolling ad esempio) e se è supportato lo scrolling behavior (che migliora ulteriormente lo scrolling).

import {Component} from '@angular/core';
import { getSupportedInputTypes, Platform,
  supportsPassiveEventListeners, supportsScrollBehavior,
} from '@angular/cdk/platform';

@Component({
  templateUrl: 'view.html'
})
export class PlatformExample {
  supportedInputTypes = Array.from(getSupportedInputTypes()).join(', ');
  supportsPassiveEventListeners = supportsPassiveEventListeners();
  supportsScrollBehavior = supportsScrollBehavior();

  constructor(public platform: Platform) {}
}

<h1>Info:</h1>
<ul>  <li>Android: {{platform.ANDROID}}</li>
  <li>iOS: {{platform.IOS}}</li>
  <li>Firefox: {{platform.FIREFOX}}</li>
  <li>Blink: {{platform.BLINK}}</li>
  <li>Webkit: {{platform.WEBKIT}}</li>
  <li>Trident: {{platform.TRIDENT}}</li>
  <li>Edge: {{platform.EDGE}}</li>
  <li>Input types: {{supportedInputTypes}}</li>
  <li>Passive event listeners: {{supportsPassiveEventListeners}}</li>
  <li>Scroll behavior: {{supportsScrollBehavior}}</li>
</ul>

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi