Was ist der „Navigator“ in Web-Apps?
Falls unterstützt, bietet das globale „window“-Objekt in Ihrer Webanwendung Zugriff auf das „Navigator“-Objekt. Der „Navigator“ enthält potenziell viele Informationen über die App und kann Ihnen Zugriff auf bestimmte Ereignisse zum Abonnieren geben. Es hilft Ihnen, wirklich moderne Web-Apps zu schreiben, die sich fast nativ anfühlen können.
Eine Instanz des „Navigators“ ist direkt mit dem User-Agent verbunden, der Anwendung, die Ihre Web-App ausführt – dem Browser.
Wie der „Navigator“ Ihre App schrittweise verbessern kann
„Fortschrittlich verbessern“ bedeutet, dass der „Navigator“ basierend auf dem Browser, der die App hostet, bestimmte Funktionen bietet. Zum Beispiel hatte Googles Chrome immer die meisten Funktionen implementiert, sogar instabile, da Google ständig die Grenzen von progressiven Web-Apps überschreitet.
Wie Sie in allen Beispielen in der MDN-Dokumentation sehen werden, müssen Sie sicherstellen, dass die Variable oder Funktion, auf die Sie zugreifen möchten, tatsächlich auf dem „Navigator“ verfügbar ist.
// Just a simple example of how
// to check for availability
// of features.
function checkNetwork(){
if("connection" in navigator){
// Now it's safe to use 'navigator.connection'.
// 👉 https://developer.mozilla.org/en-US/docs/Web/API/Navigator/connection
}
// Alternative if you're using:
// 'navigator?.connection'
}
Einige Informationen, die Ihnen der „Navigator“ in Ihrer App ermöglicht:
- Anzahl CPU-Kerne
- detaillierte Netzwerkinformationen
- Batteriestatus des Geräts, auf dem Ihre App ausgeführt wird, z. B. Tablet oder Smartphone
- Lesen und Verfolgen der aktuellen Geolokalisierung
- Verwenden des nativen Menüs des Hosts zum Teilen von Inhalten
- Steuerung der Mediensitzung
Sie können einige dieser Funktionen tatsächlich in dieser PWA live und in Aktion sehen. Scrollen Sie einfach zum Ende einer Seite, wo Sie einige der verfügbaren Hardware-Metriken-Implementierungen sehen können, zum Beispiel die Anzahl der CPU-Kerne.
Arbeiten mit dem „Navigator“
Dieser Artikel soll Ihnen nur eine sehr kurze Einführung in die Möglichkeiten geben, die der „Navigator“ für progressive Web-Apps bietet. MDN hat eine großartige Übersichtsseite sowie Dokumentationen zu allen verfügbaren Funktionen.
Für Googles Chrome gibt es auch "Project Fugu", das experimentelle neue Funktionen implementiert, die nur hinter einem Feature-Flag auf Chromium-Browsern verfügbar sind.
