5 JavaScript -APIs, um Ihre mobilen Webseiten zu stärken

Schlüsselpunkte

• Batteriestatus -API: bietet den Batteriepegel oder Statusinformationen des Geräte, und speichert Änderungen häufiger, wenn der Batteriepegel niedrig ist, wodurch der Datenverlust verhindert wird.
• Web -Benachrichtigungs -API: normalisiert, wie Entwickler Benutzer benachrichtigen und die Warnmeldungen (z. B. E -Mail -Zustellung) außerhalb des Kontextes der Webseite ermöglichen. Die Anzeigestile verschiedener Browser können jedoch variieren.
• Proximity -Sensor -API: Erkennen Sie den Abstand zwischen einem Objekt und dem Gerät, das eine Webseite ausführt, die derzeit nur von Firefox unterstützt wird.
• Vibrations -API: ermöglicht das Gerät zu vibrieren und kann verwendet werden, um spezifische Effekte im Spiel zu simulieren. Die Geräterichtung API erkennt die Geräterichtung, die Navigationsanwendungen und Spielen förderlich ist.

Die Aussagen wie "Der mobile Markt wächst" und "Benutzer, die über mobile Geräte (Smartphones und Tablets usw.) auf das Netzwerk zugreifen, werden diejenigen überschreiten, die über Desktops oder Laptops zugreifen", sind nicht mehr beeindruckend.

Heutzutage erkennen wir (zumindest), dass der mobile Markt für die Entwicklung von etwas für das Web von entscheidender Bedeutung ist.

Diskussionen und Meinungen zu nativen Anwendungen und Webanwendungen haben viele Jahre lang sehr unterschiedlich, und es war umstritten, welche besser ist. Unabhängig von Ihrer Sichtweise konnten native mobile Anwendungen auf Hardwarekomponenten zugreifen, auf die Webseiten in der Vergangenheit nicht zugreifen können. Aber ist diese Lücke heute noch gültig? Hat sich die Web -Technologie ausreichend entwickelt, um uns als Entwickler nur mit HTML, CSS und JavaScript zu codieren?

In diesem Artikel werde ich einige JavaScript -APIs einführen, mit denen Ihre Webseiten auf die Hardwarekomponenten Ihres mobilen Geräts zugreifen oder die Funktionalität Ihrer Webanwendungen auf Ihrem mobilen Gerät verbessern können.

Batteriestatus -API

Batteriestatus -API enthält Informationen zum Batteriepegel oder zum Status des Systems. Mit dieser API können Sie wissen, ob die Batterie aufgeladen wird, wie lange es dauern wird, bevor der Akku vollständig entladen wird oder nur die derzeitige Kapazität. Diese Details können über vier Eigenschaften zum

-Objekt zugegriffen werden. Diese API definiert auch Ereignisse, die ausgelöst werden können, wenn sich die obigen Eigenschaften ändern. window.navigator.battery

Diese API ist nützlich, wenn Sie (oder Ihr Benutzer) beispielsweise Schwierigkeiten haben, eine Webanwendung in einem Bus zu verwenden, und vergisst, die von Ihnen vorgenommenen Änderungen zu speichern. Plötzlich geht Ihr Smartphone aus und Sie werden frustriert, indem Sie viel Zeit und all Ihre Arbeit verschwenden. Mit dieser API können wir Seiten entwickeln, mit denen die Stromleistung der aktuellen Batterie erfasst und Änderungen häufiger sparen können, um den Datenverlust zu verhindern, wenn die Batterieleistung niedrig oder unzureichend ist.

Zum Zeitpunkt dieser Schrift wird die Batterie -Status -API nur von Firefox unterstützt, aber es ist sehr einfach, die Unterstützung für diese API zu erkennen, wie unten gezeigt:

if (window.navigator && window.navigator.battery) {
   // API 受支持
} else {
   // 不受支持
}

Ein einfaches Beispiel für die Verwendung dieser API ist wie folgt:

if (window.navigator && window.navigator.battery) {
   // API 受支持
} else {
   // 不受支持
}

Wenn Sie diese API ausprobieren möchten, haben wir eine Demo für Sie. Wenn Sie weiter recherchieren möchten, haben wir hier die Batterie -Status -API auf SitePoint eingeführt.

Web -Benachrichtigungs -API

Auf mobilen Geräten sind wir mit dem Konzept der Benachrichtigungen vertraut und viele Anwendungen, die auf dem Gerät installiert wurden, implementieren Benachrichtigungen. Im Web implementieren Websites sie auf unterschiedliche Weise. Denken Sie an Google und Twitter, beide haben Benachrichtigungsmechanismen, aber sie implementieren sie anders.

Die Web -Benachrichtigungs -API ist eine API, die zu diesem Zweck erstellt wurde, um die Benachrichtigung von Benutzern zu normalisieren. Benachrichtigungen ermöglichen es Benutzern, einen Benutzer an ein Ereignis außerhalb des Kontextes der Webseite zu erinnern, z. B. die E -Mail -Zustellung. Während Entwickler auf die gleiche Weise Benachrichtigungen erstellen, beschreibt die Spezifikation nicht, wie und wo die Benutzeroberfläche sie anzeigen soll. Dies bedeutet, dass wir in verschiedenen Browsern verschiedene Stile sehen werden. Auf mobilen Geräten können wir sie beispielsweise in der Benachrichtigungsleiste sehen.

Die API

Web -Benachrichtigung wird durch das window -Merkmal des Notification -Objekts ausgesetzt. Es ist ein Konstruktor, mit dem wir Benachrichtigungsinstanzen erstellen können. Um eine neue Benachrichtigung zu erstellen, können wir den folgenden Code schreiben:

// 打印电池是否正在充电
console.log("电池" + (navigator.battery.charging ? "" : "未") + "充电");

Derzeit unterstützen Chrome, Firefox und Safari diese API. Zu den mobilen Browsern, die die Web -Benachrichtigungs -API unterstützen, gehören Firefox, Android 4.4 und Blackberry. Hast du etwas Seltsames gesehen? Chrome Mobile unterstützt diese API nicht! Traurig, aber es ist wahr.

Weil Browser, die diese API unterstützen, mehr als die Hälfte des Marktes abdecken, aber um sicherzustellen, dass unser JavaScript -Code nicht versucht, nicht unterstützte Methoden aufzurufen, müssen wir die Unterstützungssituation testen. Wir können dies mit dem folgenden Code -Snippet tun:

var notification = new Notification('收到电子邮件', {
  body: '您收到了一封电子邮件。立即阅读！'
});

begeistert von dieser API? Sehr gut! Sie können im Artikel mehr erfahren, um mit der Web -Benachrichtigungs -API zu beginnen, und Sie können auch die Live -Demo ausprobieren.

Proximity -Sensor -API

Die Proximity -Sensor -API ist eine JavaScript -API, mit der wir den Abstand zwischen einem Objekt und dem Gerät erkennen können, das eine Webseite ausführt. Der Abstand wird vom Näherungssensor gemessen (wenn Ihr Gerät über einen Näherungssensor verfügt). Die Proximity -Sensor -API liefert keine Attribute oder Methoden, sondern löst nur zwei Ereignisse für das window -Objekt aus. Wir können ihnen zuhören, um Operationen auszuführen. Das erste Ereignis deviceproximity enthält Informationen über den tatsächlichen Abstand zwischen dem Gerät und dem nahe gelegenen Objekten, während das zweite Ereignis userproximity nur angibt, ob sich Objekte in der Nähe befinden.

Der einzige Browser, der diese API unterstützt, ist Firefox (Desktop und Mobile), beginnend mit Version 15. Da viele Laptops und Desktops keine Näherungssensoren haben, zielen wir hauptsächlich auf mobile Geräte ab.

Unterstützung der Unterstützung für diese API:

if ('Notification' in window) {
  // API 受支持
} else {
  // 不受支持
}

Ein einfaches Beispiel für die Verwendung ist wie folgt:

if ('ondeviceproximity' in window) {
   // API 受支持
} else {
   // 不受支持
}

Wenn Sie mehr über die Proximity -Sensor -API erfahren möchten, habe ich einen Artikel mit dem Titel "Beginnend mit der Proximity -Sensor -API" geschrieben. Wenn Sie dies tatsächlich tun möchten, können Sie diese Demo verwenden.

Vibrationsapi

Vibrations -API ist eine sehr einfache API, die eine Methode enthält, mit der wir Geräte vibrieren können. Eine offensichtliche Verwendung ist im Spiel, in dem wir die Effekte, die einige Konsolen vor einem Jahrzehnt eingeführt haben, reproduzieren können. Dies ist jedoch nicht der einzig mögliche Zweck dieser API.

Wie ich bereits erwähnt habe, enthält die Vibrations -API nur eine Methode namens vibrate(). Letzteres gehört zum window.navigator -Objekt in seiner einfachsten Form eine Ganzzahl, die die Anzahl der Millisekunden angibt, die das Gerät vibrieren sollte.

Abgesehen von Internet Explorer und Safari wird diese API von allen großen Browsern unterstützt. Möglicherweise ist jetzt ein guter Zeitpunkt, um es für Ihr nächstes Projekt zu verwenden. Wenn es unterstützt wird, bieten Sie dem Benutzer eine bessere Erfahrung (es sei denn, Sie missbrauchen diese Funktion). Die Erkennungsunterstützung ist sehr einfach, wie unten gezeigt:

if (window.navigator && window.navigator.battery) {
   // API 受支持
} else {
   // 不受支持
}

Eine sehr einfache Verwendung der

Eine sehr einfache Möglichkeit, die API zu verwenden, ist wie folgt:

// 打印电池是否正在充电
console.log("电池" + (navigator.battery.charging ? "" : "未") + "充电");

Um mehr über diese API zu erfahren, lesen Sie den Artikel "So verwenden Sie die HTML5 -Vibrations -API" und vergessen Sie nicht, die Demo auszuprobieren.

Geräterichtung API

Die letzte API, über die ich diskutieren möchte, ist die API der Geräterichtung. Die Erkennung der Ausrichtung des Geräts ist für eine Vielzahl von Situationen nützlich, von Navigationsanwendungen bis hin zu Spielen. Diese API definiert mehrere Ereignisse, die Informationen über die physische Ausrichtung und Bewegung des Geräts liefern. Diese API ist ein W3C -Arbeitsentwurf, was bedeutet, dass die Spezifikation instabil ist und wir in Zukunft einige Änderungen erwarten können.

Die API enthält die folgenden drei Ereignisse: deviceorientation, devicemotion und compassneedscalibration. Das erste Ereignis wird ausgelöst, wenn das Beschleunigungsmesser eine Änderung der Richtung des Geräts erkennt. Ein zweites Ereignis wird jedes Mal ausgelöst, wenn das Gerät beschleunigt oder verlangsamt. Das letzte Ereignis wird ausgelöst, wenn der Benutzeragent feststellt, dass der Kompass kalibriert werden muss.

Fast alle wichtigen Browser (außer Safari) unterstützen diese API, aber die Unterstützung ist teilweise oder es gibt Inkonsistenzen. Zum Zeitpunkt des Schreibens unterstützen nur wenige Browser compassneedscalibration Ereignisse. Mein Vorschlag ist also, jedes Ereignis zu testen, um festzustellen, ob es unterstützt wird. Um die Existenz von deviceorientation Ereignissen zu testen, können Sie schreiben:

var notification = new Notification('收到电子邮件', {
  body: '您收到了一封电子邮件。立即阅读！'
});

oder:

if ('Notification' in window) {
  // API 受支持
} else {
  // 不受支持
}

Wenn Sie beispielsweise das Ereignis devicemotion testen möchten, können Sie schreiben:

if ('ondeviceproximity' in window) {
   // API 受支持
} else {
   // 不受支持
}

Wenn Sie diese API verwenden möchten, haben wir eine Demo, die Sie verwenden können. Wenn Sie es lernen möchten, haben wir den Artikel "Verwenden der Geräteorientierung in HTML5".

Schlussfolgerung

In diesem Artikel zeige ich Ihnen einige APIs, mit denen mobile Besucher -Webseiten verbessert werden können.

Die Anwendungsfälle für diese APIs sind endlos, alles hängt von Ihrer Fantasie und der Art der Anwendung oder Website ab, die Sie entwickeln. Ich hoffe, Sie haben diesen Beitrag genossen. Bitte lassen Sie mich wissen, welche anderen nützlichen APIs Sie glauben.

Häufig gestellte Fragen zur mobilen Web -JavaScript -API

Was sind JavaScript -APIs und wie verbessern sie mobile Webseiten?

Die JavaScript -API (Anwendungsprogrammierschnittstelle) ist eine Reihe von Regeln und Protokollen, mit denen verschiedene Softwareanwendungen miteinander kommunizieren können. Sie verbessern mobile Webseiten, indem sie ermöglichen, dass mobile Webseiten mit Gerätehardware und anderen Softwareanwendungen interagieren und so ihre Funktionalität und Benutzererfahrung verbessern. Beispielsweise kann die JavaScript -API auf Webseiten auf die Kamera, den geografischen Standort und sogar den Batteriestatus des Geräts zugreifen. Dies schafft Entwicklern mehr Möglichkeiten, mobile Webseiten zu interagieren, zu engagieren und benutzerfreundlich zu engagieren.

Wie benutze ich die Geolocation -API in meiner mobilen Seite?

Geolocation -API ist ein leistungsstarkes Tool, mit dem Sie auf die Geolokalisierung Ihres Geräts zugreifen können. Um es zu verwenden, müssen Sie zunächst überprüfen, ob der Browser des Benutzers es unterstützt. Dies kann mit der Eigenschaft navigator.geolocation erfolgen. Wenn es true zurückgibt, können Sie die Methode getCurrentPosition() verwenden, um den aktuellen Speicherort des Benutzers zu erhalten. Denken Sie daran, immer die Berechtigung des Benutzers zu erhalten, bevor Sie auf die Standortdaten des Benutzers zugreifen.

Wie lautet die Batteriestatus -API und wie kann ich sie verwenden?

Batteriestatus -API enthält Informationen zum Batteriestatus des Host -Geräts. Dies ist sehr nützlich, um die Leistung einer Webseite basierend auf dem Batteriepegel des Geräts zu optimieren. Wenn der Akku beispielsweise niedrig ist, können Sie die Aktualisierungsfrequenz senken oder bestimmte Funktionen deaktivieren, um Strom zu sparen. Um diese API zu verwenden, können Sie die navigator.getBattery() -Methode verwenden, die ein Versprechen zurückgibt, das sich an ein Batterymanager -Objekt auflöst.

Wie verwenden Sie die Vibrations -API in meiner mobilen Webseite?

Mit

Vibrations -API können Sie den Schwingungsmechanismus des Host -Geräts steuern. Dies ist sehr nützlich, um dem Benutzer taktile Feedback zu geben. Um diese API zu verwenden, können Sie die navigator.vibrate() -Methode verwenden. Sie können einen einzelnen Wert übergeben, um eine bestimmte Zeit zu vibrieren, oder eine Reihe von Werten übergeben, um Vibrationen und Pause -Modi zu erstellen.

Was ist die API des Umgebungslichtsensors und wie kann ich sie verwenden?

Die API des Umgebungslichtsensors enthält Informationen über die Umgebungslichtniveau des Geräts. Dies ist nützlich, um die Helligkeit oder den Kontrast einer Webseite anzupassen, um die Lesbarkeit unter verschiedenen Beleuchtungsbedingungen zu verbessern. Um diese API zu verwenden, müssen Sie eine neue AmbientLightSensor Objektinstanz erstellen und dann mit der start() -Methode die Lichtebene erkennen.

Wie verwenden Sie die Webinformations -API in meiner mobilen Webseite?

Netzwerkinformations -API enthält Informationen zur Netzwerkverbindung des Geräts. Dies ist sehr nützlich, um die Leistung einer Webseite basierend auf dem Netzwerkstatus zu optimieren. Wenn die Netzwerkverbindung beispielsweise langsam ist, können Sie die Qualität Ihrer Bilder oder Videos reduzieren, um eine reibungslose Belastung zu gewährleisten. Um diese API zu verwenden, können Sie die Eigenschaft navigator.connection verwenden, die ein NetzwerkInformationsobjekt zurückgibt.

Wie lautet die Geräteorientierungs -API und wie kann ich sie verwenden?

Die API der Geräterichtung enthält Informationen zur physischen Ausrichtung des Geräts. Dies ist sehr nützlich, um interaktive Erlebnisse zu schaffen, die auf Gerätebewegungen reagieren. Um diese API zu verwenden, können Sie dem deviceorientation Ereignis einen Ereignishörer hinzufügen, bei dem sich die Geräteorientierung ändert.

Wie verwenden Sie die Sichtbarkeits -API der Seite in meiner mobilen Webseite?

Mit

Sichtbarkeits -API können Sie erkennen, wann eine Webseite sichtbar oder versteckt ist. Dies ist nützlich, um eine Pause oder wieder aufzunehmen, basierend auf der Sichtbarkeit der Seite. Wenn der Benutzer beispielsweise auf eine andere Registerkarte wechselt, können Sie das Video pausieren und das Video wieder aufnehmen, wenn er zurückkehrt. Um diese API zu verwenden, können Sie das Attribut document.visibilityState und das visibilitychange -Ereignis verwenden.

Was ist eine Vollbild -API und wie kann ich sie verwenden?

Mit

API mit Vollbildmaterial können Sie Elemente im Vollbildmodus anzeigen. Dies ist sehr nützlich, um ein eindringlicheres Erlebnis für Videos oder Spiele usw. zu bieten. Um diese API zu verwenden, können Sie die requestFullscreen() -Methode für jedes Element verwenden, damit sie im Vollbildmodus angezeigt wird.

Wie verwenden Sie die Web -Benachrichtigungs -API in meiner mobilen Seite?

Mit der Web -Benachrichtigungs -API können Sie Benachrichtigungen an Benutzer anzeigen. Dies ist sehr nützlich, um Benutzer an wichtige Ereignisse zu erinnern, auch wenn Ihre Seite keinen Fokus hat. Um diese API zu verwenden, müssen Sie zunächst die Berechtigung des Benutzers mithilfe der Notification.requestPermission() -Methode anfordern. Wenn der Benutzer die Berechtigung gewährt, können Sie ein neues Benachrichtigungsobjekt erstellen, um Benachrichtigungen anzuzeigen.

Das obige ist der detaillierte Inhalt von5 JavaScript -APIs, um Ihre mobilen Webseiten zu stärken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!