プログレッシブウェブアプリの「ナビゲーター」とは何ですか？
「ナビゲーター」がどのようにWebアプリを段階的に強化できるか
Webアプリの「ナビゲーター」とは何ですか？
サポートされている場合、Webアプリケーションのグローバルな「ウィンドウ」オブジェクトは「ナビゲーター」オブジェクトへのアクセスを提供します。 「ナビゲーター」には、アプリに関する多くの情報が含まれている可能性があり、サブスクライブする特定のイベントにアクセスできます。それはあなたがほとんどネイティブのように感じることができる本当に現代のウェブアプリを書くのを助けます。
「ナビゲーター」のインスタンスは、Webアプリを実行するアプリケーションであるユーザーエージェント（ブラウザー）に直接関連付けられています。
「ナビゲーター」がアプリを段階的に強化する方法
「プログレッシブエンハンスメント」とは、「ナビゲーター」がアプリをホストするブラウザーに基づいて特定の機能セットを提供することを意味します。たとえば、GoogleのChromeには、プログレッシブウェブアプリの限界を常に押し広げているため、不安定な機能も含め、常にほとんどの機能が実装されていました。
MDNのドキュメントのすべての例に示されているように、アクセスする変数または関数が実際に「ナビゲーター」で使用可能であることを確認する必要があります。
// 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'
}「ナビゲーター」によってアプリで使用できる情報は次のとおりです。
- CPUコアの数
- 詳細なネットワーク情報
- タブレットやスマートフォンなど、アプリを実行するデバイスのバッテリーステータス
- 現在のジオロケーションの読み取りと追跡
- ホストのネイティブメニューを使用してコンテンツを共有する
- メディアセッションの制御
これらの機能のいくつかは、まさにこのPWAで実際に動作しているのを見ることができます。ページの最後までスクロールするだけで、CPUコアの数など、利用可能なハードウェアメトリックの実装のいくつかを確認できます。
「ナビゲーター」との連携
この記事は、プログレッシブWebアプリの「ナビゲーター」に伴う可能性について簡単に紹介することのみを目的としています。 MDNには、優れた概要ページと、利用可能な各機能に関するドキュメントがあります。
GoogleのChromeには、実験的な新機能を実装する「Project Fugu」もあります。これは、Chromiumブラウザの機能フラグの背後でのみ利用できます。
行動
Feedback
提案された投稿
