キーポイント

• バッテリーステータスAPI：デバイスのバッテリーレベルまたはステータス情報(bào)を提供し、バッテリーレベルが低いときに変更をより頻繁に節(jié)約し、データの損失を防ぎます。
• Web通知API：開発者がユーザーに通知する方法を正規(guī)化し、Webページのコンテキストの外でアラート（電子メール配信など）を発行できるようにします。ただし、異なるブラウザのディスプレイスタイルは異なる場合があります。
• 近接センサーAPI：オブジェクトとWebページを?qū)g行しているデバイスとの間の距離を検出します。現(xiàn)在はFirefoxでのみサポートされています。
• 振動(dòng)API：デバイスを振動(dòng)させ、ゲーム內(nèi)の特定の効果をシミュレートするために使用できます。デバイスの方向APIは、デバイスの方向を検出します。これは、ナビゲーションアプリケーションとゲームを助長します。
「モバイルマーケットが成長している」や「モバイルデバイス（スマートフォンやタブレットなど）を介してネットワークにアクセスするユーザーなどのステートメントは、デスクトップやラップトップを介してネットワークにアクセスするものを超えています」は、もはや印象的ではありません。

今日、私たちは（少なくとも）ウェブ用に何かを開発するときにモバイル市場が重要であることを認(rèn)識(shí)しています。

長年にわたり、ネイティブアプリケーションとWebアプリケーションに関する議論や意見は大きく異なり、どちらが優(yōu)れているかは議論の余地があります。あなたの視點(diǎn)に関係なく、ネイティブモバイルアプリケーションが過去にWebページにアクセスできないハードウェアコンポーネントにアクセスできたことは事実です。しかし、このギャップは今日でも有効ですか？ Webテクノロジーは、開発者として、HTML、CSS、およびJavaScriptのみを使用してエンコードできるように十分に開発されていますか？

この記事では、Webページがモバイルデバイスのハードウェアコンポーネントにアクセスするか、モバイルデバイス上のWebアプリケーションの機(jī)能を強(qiáng)化できるJavaScript APIを紹介します。

バッテリーステータスapi

バッテリーステータスAPIは、システムのバッテリーレベルまたはステータスに関する情報(bào)を提供します。このAPIを使用すると、バッテリーが充電されているかどうか、バッテリーが完全に排出されるまでの期間、または現(xiàn)在の容量のみを知ることができます。これらの詳細(xì)は、オブジェクトに屬する4つのプロパティからアクセスできます。このAPIは、上記のプロパティが変更されたときにトリガーできるイベントも定義します。

このAPIは、たとえば、あなた（またはユーザー）がバスでWebアプリケーションを使用するのに苦労し、行った変更を保存するのを忘れている場合に役立ちます。突然、スマートフォンが消えてしまい、多くの時(shí)間とすべての作業(yè)を無駄にすることでイライラします。このAPIを使用すると、現(xiàn)在のバッテリー電源を検出し、バッテリーの電源が低いか不十分なときにデータの損失を防ぐために、より頻繁に変更を節(jié)約できるページを開発できます。 window.navigator.battery この記事の執(zhí)筆時(shí)點(diǎn)では、バッテリーステータスAPIはFirefoxによってのみサポートされていますが、以下に示すように、このAPIのサポートを検出するのは非常に簡単です。

このAPIを使用する簡単な例は次のとおりです。

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

このAPIを試してみたい場合は、デモがあります。さらに調(diào)査したい場合は、ここでSitePointにバッテリーステータスAPIを?qū)毪筏蓼筏俊?

Web通知api

モバイルデバイスでは、通知の概念と??、デバイスの実裝通知にインストールされている多くのアプリケーションに精通しています。ウェブ上では、Webサイトはさまざまな方法でそれらを?qū)g裝します。 GoogleとTwitterについて考えてみてください。どちらも通知メカニズムを持っていますが、それらを異なる方法で実裝しています。

Web通知APIは、この目的のために作成されたAPIであり、開発者がユーザーに通知する方法を正?；筏蓼?。通知により、ユーザーは、電子メール配信など、Webページのコンテキスト以外のイベントをユーザーに思い出させることができます。開発者は同じように通知を作成しますが、仕様ではUIがそれらを表示する方法と場所を説明していません。これは、さまざまなブラウザにさまざまなスタイルが表示されることを意味します。たとえば、モバイルデバイスでは、通知バーに表示される場合があります。

Web通知APIは、windowオブジェクトのNotification屬性を介して公開されます。通知インスタンスを作成できるようにするコンストラクターです。新しい通知を作成するには、次のコードを書くことができます。

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

現(xiàn)在、Chrome、Firefox、およびSafariはこのAPIをサポートしています。 Web通知APIをサポートするモバイルブラウザには、Firefox、Android 4.4、およびBlackBerryが含まれます。奇妙なものを見たことがありますか？ Chrome MobileはこのAPIをサポートしていません！悲しいが、それは本當(dāng)だ。

このAPIをサポートするブラウザは、市場の半分以上をカバーしているため、JavaScriptコードがサポートされていないメソッドを呼び出そうとしないようにするため、サポートの狀況をテストする必要があります。次のコードスニペットを使用してこれを行うことができます。

このAPIに興奮していますか？とても良い！ Web通知APIで始まる記事で詳細(xì)を?qū)Wぶことができます。また、ライブデモを試すこともできます。

var notification = new Notification('收到電子郵件', {
  body: '您收到了一封電子郵件。立即閱讀！'
});

近接センサーapi

近接センサーAPIは、オブジェクトとWebページを?qū)g行しているデバイス間の距離を検出するために使用できるJavaScript APIです。距離は、近接センサーによって測定されます（デバイスに近接センサーがある場合）。近接センサーAPIは屬性やメソッドを提供するのではなく、オブジェクト上の2つのイベントのみをトリガーします。私たちは彼らの話を聞いて操作を?qū)g行することができます。最初のイベントは、デバイスと近くのオブジェクト間の実際の距離に関する情報(bào)を提供しますが、2番目のイベント

は、近くにオブジェクトがあるかどうかのみを指定します。

このAPIをサポートする唯一のブラウザは、バージョン15から始まるFirefox（デスクトップおよびモバイル）です。殘念ながら、多くのラップトップやデスクトップには近接センサーがないため、主にモバイルデバイスをターゲットにしています。 window このAPIのサポートの検出：deviceproximity userproximity

使用の簡単な例は次のとおりです

振動(dòng)api

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

Vibration APIは、デバイスを振動(dòng)させる方法を含む非常にシンプルなAPIです。明らかな使用の1つは、10年前にいくつかのコンソールによって導(dǎo)入された効果を再現(xiàn)できるゲームでです。ただし、これはこのAPIの唯一の可能な目的ではありません。

私が言ったように、振動(dòng)APIはvibrate()と呼ばれるメソッドのみを公開します。後者は、最も単純な形式でwindow.navigatorオブジェクトに屬し、デバイスが振動(dòng)するミリ秒數(shù)を指定する整數(shù)を受け入れます。

Internet ExplorerとSafariとは別に、このAPIはすべての主要なブラウザによってサポートされています。それでも、今こそ、次のプロジェクトに使用するのに良い時(shí)期かもしれません。実際、それがサポートされている場合、ユーザーにより良いエクスペリエンスを提供します（この機(jī)能を悪用しない限り）。以下に示すように、検出サポートは非??常に簡単です

APIを使用する非常に簡単な方法の非常に簡単な使用法は次のとおりです。

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

このAPIの詳細(xì)については、「HTML5 Vibration APIの使用方法」という記事を読んで、デモを試すことを忘れないでください。

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

デバイスの方向API

私が議論したい最後のAPIは、デバイスの方向APIです。デバイスの向きを検出することは、ナビゲーションアプリケーションからゲームまで、さまざまな狀況に役立ちます。このAPIは、デバイスの物理的な向きと動(dòng)きに関する情報(bào)を提供するいくつかのイベントを定義します。このAPIはW3Cワーキングドラフトです。つまり、仕様は不安定であり、將來のいくつかの変更が予想される場合があります。 APIは、次の3つのイベントを公開します：

、

、

。最初のイベントは、加速度計(jì)がデバイスの方向の変化を検出するとトリガーされます。デバイスが加速または減速するたびに、2番目のイベントがトリガーされます。最後のイベントは、ユーザーエージェントがコンパスを較正する必要があると判斷したときにトリガーされます。

deviceorientationほとんどすべての主要なブラウザ（SAFARIを除く）はこのAPIをサポートしていますが、サポートは部分的であるか、矛盾があります。たとえば、執(zhí)筆時(shí)點(diǎn)では、devicemotionイベントをサポートするブラウザはほとんどありません。したがって、私の提案は、各イベントをテストしてサポートされているかどうかを確認(rèn)することです。 compassneedscalibrationイベントの存在をテストするには、次のように書くことができます。

または：compassneedscalibration deviceorientation

たとえば、

var notification = new Notification('收到電子郵件', {
  body: '您收到了一封電子郵件。立即閱讀！'
});

イベントをテストしたい場合は、次のことを記述できます。

このAPIを使用する場合は、使用できるデモがあります。あなたがそれを?qū)Wびたいなら、私たちは「HTML5でデバイスの向きを使用する」という記事を持っています。

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

結(jié)論devicemotion

この記事では、モバイル訪問者のWebページを強(qiáng)化できるAPIをいくつか紹介します。

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

これらのAPIのユースケースは無限であり、それはすべてあなたの想像力と開発中のアプリケーションまたはウェブサイトの種類に依存します。この投稿を楽しんでいただければ幸いです。他に便利なAPIがどうなるか教えてください。

モバイルWeb javaScript API

に関するよくある質(zhì)問

JavaScript APIとは何ですか？モバイルWebページをどのように強(qiáng)化しますか？

JavaScript API（アプリケーションプログラミングインターフェイス）は、異なるソフトウェアアプリケーションが相互に通信できるようにする一連のルールとプロトコルです。モバイルWebページがデバイスハードウェアやその他のソフトウェアアプリケーションと対話できるようにすることにより、モバイルWebページを強(qiáng)化し、機(jī)能とユーザーエクスペリエンスを向上させます。たとえば、JavaScript APIは、Webページがデバイスのカメラ、地理的位置、さらにはバッテリーステータスにアクセスできるようにすることができます。これにより、開発者が対話、エンゲージ、ユーザーフレンドリーなモバイルWebページがより多くの可能性を生み出します。

モバイルページでジオロ??ケーションAPIを使用する方法は？

Geolocation APIは、デバイスのジオロケーションにアクセスできる強(qiáng)力なツールです。それを使用するには、最初にユーザーのブラウザがサポートしているかどうかを確認(rèn)する必要があります。これは、navigator.geolocationプロパティを使用して実行できます。 trueを返す場合は、getCurrentPosition()メソッドを使用してユーザーの現(xiàn)在の場所を取得できます。ユーザーの位置データにアクセスする前に、常にユーザーの許可を取得することを忘れないでください。

バッテリーステータスAPIとの使用方法は何ですか？

バッテリーステータスAPIホストデバイスのバッテリーステータスに関する情報(bào)を提供します。これは、デバイスのバッテリーレベルに基づいてWebページのパフォーマンスを最適化するのに非常に役立ちます。たとえば、バッテリーが低い場合、更新頻度を下げたり、特定の機(jī)能を無効にして電源を節(jié)約できます。このAPIを使用するには、バッテリーマネージャーオブジェクトに解決する約束を返すnavigator.getBattery()メソッドを使用できます。

モバイルWebページでVibration APIを使用する方法は？

振動(dòng)APIを使用すると、ホストデバイスの振動(dòng)メカニズムを制御できます。これは、ユーザーに觸覚フィードバックを提供するのに非常に役立ちます。このAPIを使用するには、navigator.vibrate()メソッドを使用できます。単一の値を渡して特定の時(shí)間を振動(dòng)させるか、一連の値を渡して振動(dòng)を作成してモードを一時(shí)停止できます。

周囲の光センサーAPIとの使用方法は何ですか？

周囲光センサーAPIは、デバイスの周囲光レベルに関する情報(bào)を提供します。これは、さまざまな照明條件下で読みやすさを向上させるために、Webページの明るさまたはコントラストを調(diào)整するのに役立ちます。このAPIを使用するには、新しいAmbientLightSensorオブジェクトインスタンスを作成してから、start()メソッドを使用して光レベルの検知を開始する必要があります。

モバイルWebページでWeb情報(bào)APIを使用する方法は？

ネットワーク情報(bào)APIは、デバイスのネットワーク接続に関する情報(bào)を提供します。これは、ネットワークステータスに基づいてWebページのパフォーマンスを最適化するのに非常に役立ちます。たとえば、ネットワーク接続が遅い場合、畫像やビデオの品質(zhì)を低下させて、スムーズな読み込みを確保できます。このAPIを使用するには、ネットワークインフォメーションオブジェクトを返すnavigator.connectionプロパティを使用できます。

デバイスの向きAPIとの使用方法は何ですか？

デバイスの方向APIは、デバイスの物理的な向きに関する情報(bào)を提供します。これは、デバイスの動(dòng)きに対応するインタラクティブなエクスペリエンスを作成するのに非常に役立ちます。このAPIを使用するには、デバイスの向きが変更されたときに発火するイベントリスナーdeviceorientationイベントを追加できます。

モバイルWebページでページVivisibilityAPIを使用する方法は？

ページの可視性APIを使用すると、Webページが表示または非表示になったときに検出できます。これは、ページの可視性に基づいてアクティビティを一時(shí)停止または再開するのに役立ちます。たとえば、ユーザーが別のタブに切り替えると、ビデオを一時(shí)停止し、戻ってきたときにビデオを再開できます。このAPIを使用するには、document.visibilityState屬性とvisibilitychangeイベントを使用できます。

フルスクリーンAPIとの使用方法は何ですか？

フルスクリーンAPIを使用すると、フルスクリーンモードで要素を表示できます。これは、ビデオやゲームなどに沒入感のある體験を提供するのに非常に役立ちます。このAPIを使用するには、任意の要素に対してrequestFullscreen()メソッドを使用して、フル畫面に表示することができます。

モバイルページでWeb通知APIを使用する方法は？

Web通知APIを使用すると、ユーザーに通知を表示できます。これは、ページに焦點(diǎn)が合っていなくても、ユーザーに重要なイベントを思い出させるのに非常に便利です。このAPIを使用するには、最初にNotification.requestPermission()メソッドを使用してユーザーの許可を要求する必要があります。ユーザーが許可を付與する場合は、新しい通知オブジェクトを作成して通知を表示できます。

以上が5 JavaScript APIは、モバイルWebページを強(qiáng)化しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。