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!