ナビゲーターが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'
}

「ナビゲーター」によってアプリで使用できる情報は次のとおりです。